Question

我的页面上有一个表单，我想通过jQuery禁用提交按钮，直到所有表单字段都有值。我也有服务器端验证，但我宁愿使用一些客户端验证来缓解我服务器上的压力。我目前在数组中保存表单的所有元素，然后遍历每个元素并检查是否为空。每次用户在表单中输入数据时，我还需要调用此函数，以检查是否所有输入都已填充。这似乎给我的浏览器带来了巨大的压力并使页面崩溃，下面是代码。

let inputArray = [
            $('.registration-form #inputEmail'),
            $('.registration-form #inputForename'),
            $('.registration-form #inputSurname'),
            $('.registration-form #inputJobTitle'),
            $('.registration-form #inputJobFunction'),
            $('.registration-form #inputCompanyName'),
            $('.registration-form #inputCompanySize')
        ];

        let $registerButton = $('.create-account-button');

        function checkFields() {
            inputArray.forEach(function (input) {
                if (!$(input).val()) {
                    $registerButton.prop('disabled', true);
                } else {
                    $registerButton.prop('disabled', false);
                }
                input.on('input', checkFields);
            });
        }

Answer 1

根据我的评论：你的问题过于复杂 - 浏览器崩溃的原因是你在无限循环中调用checkFields。你想做的事情很简单：

为要验证的所有输入字段添加一个类，比如给它们一个validate
绑定onInput事件以调用这些输入字段。当提供元素集合时，jQuery将自动迭代地绑定相同的事件处理程序
在onInput事件的回调中，您只需要检查是否有任何字段为空的逻辑。这是通过使用.map()然后.filter()返回空字段数组来完成的。通过检查此阵列的长度，有条件地禁用/启用提交按钮。

第3点可能有点复杂，所以这里有它的细分：

.map()用于返回类似数组的对象。在回调函数中使用return this.value意味着您希望将每个输入的值推送到此arrya中。
.get()之后被链接，因为.map()没有返回真正的数组
.filter()用于从数组中删除非空的项，使用当数组项的长度（在本例中为input元素的值）为0时返回true的回调函数

这将返回一个空字段数组。然后，您可以使用.prop('disabled', <boolean>)有条件地启用或禁用提交按钮。 !!emptyFields.length表达式用于确保返回布尔值：

如果没有空字段（长度为0），!!0将返回false。
当有空字段（长度＆gt; = 1）时，!!<n>返回true。

见下面的概念验证：

$(function() {
  // Cache fields that you want to validate
  var $fieldsToCheck = $('.registration-form .validate');
  
  // Function to ensure fields are not empty
  var checkFields = function() {
    // Get array of empty fields
    var emptyFields = $fieldsToCheck.map(function() {
      return this.value;
    }).get().filter(function(val) {
      return val.length === 0;
    });
    
    // Disabled prop to be toggled based on length of empty fields
    $('.create-account-button').prop('disabled', !!emptyFields.length);
  };

  // Bind onInput event to all inputs you want to check
  $fieldsToCheck.on('input', checkFields);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="registration-form">

  <input name="email" class="validate" type="text" />
  <input name="forename" class="validate" type="text" />
  <input name="surname" class="validate" type="text" />

  <button class="create-account-button" disabled>Create account</button>

</form>

Answer 2

不要重新发明方向盘jquery validation plug-in

但如果你真的想要

＆＃13;

$(document).ready(function(){
       var form = $('form'),
           submitButton = $("#btnSubmit"),
           isValid = true;

       submitButton.click(function(event){
       		event.preventDefault();
          isValid = true;
          form.children("input").each(function(index,element)               
          {
                 if(!element.value.trim())
                    isValid = false;    
          });

					console.log(isValid);
          
          if(isValid)
          	 form.submit();
      });      
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input id="btnSubmit" type="submit" value="Submit">
</form>

＆＃13;

Answer 3

我同意Nick使用jQuery plugin

以下是使用插件的工作示例：

<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
        <style>
        input{
        width:100px;
        margin-bottom: 3px;
        clear:both;
        }
        form#form-to-validate {
            float: left;
            display: block;
            width: 100px;
        }
        </style>
    </head>
    <body>
        <form id="form-to-validate">
        <input class="registration-form" id='inputEmail' name="inputEmail"/>
        <input class="registration-form" id='inputForename' name='inputForename'/>
        <input class="registration-form" id='inputSurname' name='inputSurname'/>
        <input class="registration-form" id='inputJobTitle' name='inputJobTitle'/>
        <input class="registration-form" id='inputCompanyName' name='inputCompanyName'/>
        <input class="registration-form" id='inputCompanySize' name='inputCompanySize'/>
        <input type="submit"/>
        </form>
        <script>
        jQuery.validator.setDefaults({
                    debug: true,
                    success: "valid"
                });
                $( "#form-to-validate" ).validate({
                    rules: {
                        inputEmail: {
                        required: true,
                        email: true
                        },
                        inputForename: {
                        required: true
                        },
                        inputSurname: {
                        required: true
                        },
                        inputJobTitle: {
                        required: true
                        },
                        inputCompanyName: {
                        required: true
                        },
                        inputCompanySize: {
                        required: true
                        }
                    }
                });
        </script>
    </body>
</html>

Answer 4

试试这个

let inputArray = [
        $('.registration-form #inputEmail'),
        $('.registration-form #inputForename'),
        $('.registration-form #inputSurname'),
        $('.registration-form #inputJobTitle'),
        $('.registration-form #inputJobFunction'),
        $('.registration-form #inputCompanyName'),
        $('.registration-form #inputCompanySize')
    ];

    let $registerButton = $('.create-account-button');

    function checkFields() {
        inputArray.forEach(function (input) {
            if (!$(input).val()) {
                $registerButton.prop('disabled', true);
            } else {
                $registerButton.prop('disabled', false);
            }
        });
    }

    inputArray.forEach(function (input) {
            input.on('input', checkFields);
    })

Answer 5

纯Javascript版本。让我们采取Bootstrap形式。

将validate类添加到您需要检查的输入中：

<form class="registration-form">
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control validate" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control validate" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control validate" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control validate" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary create-account-button">Submit</button>
</form>


var form = document.querySelector('.registration-form'),
    form_elements = form.querySelectorAll('.validate'),
    btn = document.querySelector('.create-account-button');

function checkFields() {
    var error = 0;
    Array.prototype.slice.call( form_elements ).forEach(function( input ) {
        if ( input.value.length == 0 ) {
            error++;
        }
    });
    if ( error > 0 ){
        btn.setAttribute( 'disabled', 'disabled' );
    } else {
        btn.removeAttribute( 'disabled' );
    }
}

document.addEventListener( 'DOMContentLoaded', checkFields, false );
Array.prototype.slice.call( form_elements ).forEach(function( input ) {
    input.addEventListener( 'input', checkFields, false );
});

DEMO

检查所有表单字段是否都有输入jQuery

5 个答案: