Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проверка на заполнение (https://javascript.ru/forum/dom-window/70620-proverka-na-zapolnenie.html)

Sav2907 20.09.2017 02:15

Проверка на заполнение
 
Нужно сделать проверку. При клике по "Отправить", нужно проверить все ли поля заполнены, если нет то сообщение "Не все поля заполнены"
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<div class="content">
	<input type="text" class="data"><input type="text" class="names"><br>
</div><br>
<button id="add">Добавить</button><button id="send">Отправить/button>
<script>
$('#add').on('click', function(){
	$('.content').append('<input type="text" class="data"><input type="text" class="names"><br>');	
});
</script>

j0hnik 20.09.2017 02:36

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="content">
		<input type="text" class="data"><input type="text" class="names"><br>
	</div><br>
	<button id="add">Добавить</button><button id="send">Отправить</button>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		$('#add').on('click', function(){
			$('.content').append('<input type="text" class="data"><input type="text" class="names"><br>');	
		});
		$('#send').on('click', function(){
			var a = 0;
			$('input').each(function(){
				if($(this).val().length<3) a = 1;
			});
			if(a) alert("Не все поля заполнены");
		});
	</script>
</body>
</html>

Sav2907 20.09.2017 09:08

Спасибо большое

Rasy 20.09.2017 10:49

j0hnik,
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="content">
    <input type="text" class="data">
    <input type="text" class="names">
    <br></div>
  <br>
  <button id="add">Добавить</button>
  <button id="send">Отправить</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $('#add').on('click', function(){
      $('.content').append('<input type="text" class="data"><input type="text" class="names"><br>');  
    });
    $('#send').on('click', function(){
      var a = $('input').filter(function(i, v) {
        return v.value.length<3;
      });
      if(a.length) alert("Не все поля заполнены");
    });
  </script></body>
</html>

j0hnik 20.09.2017 11:26

Rasy,
Можно и так, вариантов тут на самом деле много

j0hnik 20.09.2017 12:40

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="content">
    <input type="text" class="data">
    <input type="text" class="names">
    <br></div>
  <br>
  <button id="add">Добавить</button>
  <button id="send">Отправить</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $('#add').on('click', function(){
      $('.content').append('<input type="text" class="data"><input type="text" class="names"><br>');  
    });
    $('#send').on('click', function(){
      if([].some.call($('input'), el=> el.value.length < 3)) alert("Не все поля заполнены");
    });
  </script></body>
</html>

Rasy 20.09.2017 12:54

Цитата:

Сообщение от j0hnik
Можно и так, вариантов тут на самом деле много

Согласен. Но. Если писать на jQuery лучше использовать подходящий для этого метод.
Метод массива some - нативный, и совместное использование с либой не совсем целесообразно. Плюс слабая поддержка синтаксиса es6.

j0hnik 20.09.2017 13:01

Это я в качестве примера. насчет es6 согласен, а вот использовать ли нативные методы в JQ, если запись короче и быстрей, почему бы и нет, тут мешает только этическая точка зрения "чистоты кода".

Rasy 20.09.2017 13:12

Цитата:

Сообщение от j0hnik
если запись короче и быстрей

Я об этом и говорю. На мой взгляд проще и быстрее написать метод filter, чем some.

j0hnik 20.09.2017 13:15

Rasy,
на счет быстрей, filter будет до конца перебирать, some как только найдет сразу вернет true не перебирая до конца.


Часовой пояс GMT +3, время: 01:13.