Проверка на заполнение
Нужно сделать проверку. При клике по "Отправить", нужно проверить все ли поля заполнены, если нет то сообщение "Не все поля заполнены"
<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>
|
<!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>
|
Спасибо большое
|
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>
|
Rasy,
Можно и так, вариантов тут на самом деле много |
<!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>
|
Цитата:
Метод массива some - нативный, и совместное использование с либой не совсем целесообразно. Плюс слабая поддержка синтаксиса es6. |
Это я в качестве примера. насчет es6 согласен, а вот использовать ли нативные методы в JQ, если запись короче и быстрей, почему бы и нет, тут мешает только этическая точка зрения "чистоты кода".
|
Цитата:
|
Rasy,
на счет быстрей, filter будет до конца перебирать, some как только найдет сразу вернет true не перебирая до конца. |
| Часовой пояс GMT +3, время: 19:07. |