0

Есть большая форма, содержащая большое количество:

<input type="text" id="AxBy" name="AxBy" class="AB-input">

В разных ситуациях количество таких полей разное, но всегда > 100. Есть ли какой-либо простой способ проверить сразу все поля на факт заполнения используя JavaScript или jQuery не прибегая к циклам и не перебирая каждый элемент по отдельности? Вариант минимум - получить ответ: все поля заполнены/есть незаполненные поля, вариант максимум - получить ответ: все поля заполнены корректными целочисленными значениям/есть некорректные данные (не все значения целочисленные)/ не все поля заполнены.

3 ответа 3

1

Можно использовать встроенные средства проверки полей формы:

  • обязательное поле (required);
  • для проверки целочисленных цифровых значений (pattern). \d+ только одна или более цифра.

const form = document.querySelector('form');
const formSubmit = document.querySelector('button');

form.addEventListener('change', changeFormHandler);

function changeFormHandler() {
  console.log(form.checkValidity());
  if (form.checkValidity()) {
    formSubmit.removeAttribute('disabled');
  }
}
<form>
  <input
    name="field1"
    pattern="\d+"
    required
  >
  <input
    name="field2"
    pattern="\d+"
    required
  >
  <button
    disabled
  >Submit</button>
</form>

0
var empties = $("form").find('input:text').filter(function() { 
  // добавьте здесь дополнительные проверки на целочисленность и т.п.
  return $(this).val() == ""; 
});

if (empties.length > 0) {
  console.log("has empty inputs");
}
0

Посмотри как я сделал для своей формы, каждое поле проверяю. Плюсы: Могу управлять каждым полем, на каждое поле могу написать свой валидатор.

$("form[name='name_form']").submit(function(event, i) {
    event.preventDefault();
    var curform = $(this);
    var goodform =  true;
    var name = $(this).attr("name");

    curform.find('.required').each(function() {
        console.log($(this).attr("name"))
        //debugger;
        switch($(this).attr("name")) {
            case "phone":
                if( $(this).val().length != 18) {
                    goodform = false;
                }

            case "first_name":
                if( $(this).val().length < 0) {
                   goodform = false;
                }
        }
    });
    if (goodform) {
       alert("Успех")

    }
})

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.