Проверка на заполнение
Нужно сделать проверку. При клике по "Отправить", нужно проверить все ли поля заполнены, если нет то сообщение "Не все поля заполнены"
<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, время: 01:13. |