javascript - 如何禁用提交，直到仅填写必填字段

Question

我已经搜索过，但我得到了有关如何禁用提交按钮直到所有字段完成的信息....

我有以下表单，其中一些字段是必填，有些字段是可选。

我想禁用提交按钮，直到完成必填字段。

表单示例代码:

<form name="registration_form" id="registration_form" action="nextaction.php" method="post" enctype="multipart/form-data" >
Name : <input type="text" id="name" name="name" required>
Email : <input type="text" id="name" name="name" required>
Mobile : <input type="text" id="mobile" name="mobile" required>
Gender : <input type="text" id="gender" name="gender" >/*optional*/
Occupation : <input type="text" id="occupation" name="occupation" >/*optional*/
City : <input type="text" id="city" name="city" required>
Avatar : <input type="file" id="avatar" name="avatar" required>

<input type="submit" class="link-button-blue" id="register" value="PROCEED TO NEXT STEP" /> 

==========

已编辑

我尝试提交禁用直到所有字段完成如下:

第一件事:

<input type="submit" class="link-button-blue" id="register" value="PROCEED TO NEXT STEP" disabled="disabled" /> 

脚本:

   <script>
    $(document).ready(function (){
    $('form > input').keyup(function() {

     var empty = false;
      $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
     });

      if (empty) {
         $('#register').attr('disabled', 'disabled');
      } else {
         $('#register').removeAttr('disabled'); 
      }
   });
});        
</script>

Answer 1

$('#registration_form input[required]').on('input propertychange paste change', function() {

  var empty = $('#registration_form').find('input[required]').filter(function() {
    return this.value == '';
  });

  $('#register').prop('disabled', (empty.length));

});

https://jsfiddle.net/ot5kn5c7/

这应该有效。

每当任何必需的输入发生任何变化时，都会检查非空的必填字段的数量。一旦有 0 个所需的空输入，就会更新按钮的禁用属性。 (0 评估为 false)

如果您没有禁用该按钮，而只想阻止表单提交，则可以附加到表单上的提交事件，并使用类似的逻辑检查长度来阻止默认操作。

$('form').on('submit', function(e) {

  var empty = $(this).find('input[required]').filter(function() {
    return this.value == '';
  });

  if (empty.length) {
    e.preventDefault();
    alert('enter all required field!')
  }

});