使用jQuery檢查是否需要輸入字段

Question

檢查輸入是否是必需的，最簡單的方法是什麼？我一直在嘗試這些方面的東西，但總是滿足所有要求（只有4/6）。

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

（我曾經嘗試.attr藏漢）

我試着去使用它的形式AJAX驗證，林做這樣的時刻：

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

感謝。

編輯：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 */);