使用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 */);