Проверка наличия поля ввода с использованием jQuery

Question

Что было бы самым простым способом проверить, требуется ли вход? Я пробовал вещи в этом направлении, но всегда придумывал все необходимое (только 4/6).

$('form#register').find('input').each(function(){ 
    if($(this).prop('required') == 'undefined'){ 
     console.log("NR"); 
    } else { 
     console.log("IR"); 
    } 
}) 

(я попытался .attr Aswell)

Im пытается использовать его для проверки формы Ajax, Im делает это таким образом на данный момент:

if($('form#register span').length == $('form#register').children(".green").length){ 
    $('input#register-sub').prop('disabled', false); 
} else { 
    $('input#register-sub').prop('disabled', true); 
} 

Спасибо.

EDIT: Html добавление

<form id="register" action="" method="post" autocomplete="on"> 
<label>Nickname:</label><input type="text" name="name" value="<? echo $_POST['name'] ?>" required="" /><span id="reg-name"></span><br /> 

<? if($user->type == "l"){ ?> 
<label>email:</label><input type="email" name="email" value="<? echo $_POST['email'] ?>" required="" /><span id="reg-email"></span><br /> 
<label>Password:</label><input type="password" name="password" value="<? echo $_POST['password'] ?>" required="" /><span id="reg-password"></span><br /> 
<label>Again:</label><input type="password" name="password-test" value="<? echo $_POST['password-test'] ?>" required="" /><span id="reg-password-test"></span><br /> 
<label>Avatar:</label><input type="url" name="avatar" value="<? echo $_POST['avatar'] ?>" /><span id="reg-avatar"></span><br /> 
<? } ?> 

<input type="submit" value="Register" disabled="" id="register-sub"/> 

Answer 1

Свойство required является boolean:

$('form#register').find('input').each(function(){ 
    if(!$(this).prop('required')){ 
     console.log("NR"); 
    } else { 
     console.log("IR"); 
    } 
}); 

Ссылка: HTMLInputElement

Answer 2

Немного более полного ответа, вдохновленный принятый ответ:

$('#form_id').submit(function(event) { 
     event.preventDefault(); 

     //validate fields 
     var fail = false; 
     var fail_log = ''; 
     $('#form_id').find('select, textarea, input').each(function(){ 
      if(! $(this).prop('required')){ 

      } else { 
       if (! $(this).val()) { 
        fail = true; 
        name = $(this).attr('name'); 
        fail_log += name + " is required \n"; 
       } 

      } 
     }); 

     //submit if fail never got set to true 
     if (! fail) { 
      //process form here. 
     } else { 
      alert(fail_log); 
     } 

}); 

В этом случае мы перебираем все типы входов и если они необходимы, мы проверяем, если они имеют значение, и если нет, то обратите внимание, что они обязаны добавляются в боевую готовность, что будет работать.

Обратите внимание, что этот пример предполагает, что форма будет действовать в положительном условном режиме через AJAX или аналогичную. Если вы отправляете с помощью традиционных методов, переместите вторую строку, event.preventDefault();, в отрицательную условную.

Answer 3

Для этого вам не нужен jQuery. Вот ES2015 решение:

// Get all input fields 
const inputs = document.querySelectorAll('#register input'); 

// Get only the required ones 
const requiredFields = Array.from(inputs).filter(input => input.required); 

// Do your stuff with the required fields 
requiredFields.forEach(field => /* do what you want */); 

Или вы могли бы просто использовать :required селектор:

Array.from(document.querySelectorAll('#register input:required')) 
    .forEach(field => /* do what you want */);