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

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

javascript jquery html forms

Javascript 检查是否所有表单字段都有输入jQuery,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我的页面上有一个表单，我想通过jQuery禁用submit按钮，直到所有表单字段都有一个值。我也有服务器端验证，但我宁愿使用一些客户端验证来缓解服务器上的压力。我当前将表单中的所有元素保存在一个数组中，然后循环遍历每个元素并检查是否有空元素。我还需要在用户每次向表单输入数据时调用此函数，以检查是否已填写所有输入。这似乎给我的浏览器带来了巨大的压力，并使页面崩溃，下面是代码 let inputArray = [ $('.registration-form #inputEma

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

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);
            });
        }

试试这个

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);
    })

试试这个

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);
    })

根据我的评论：你的问题过于复杂了。你的浏览器崩溃的原因是因为你在无限循环中调用

checkFields

。您想做的事情非常简单：

为所有要验证的输入字段指定一个类，比如为它们指定一个

validate

绑定

onInput

事件以调用这些输入字段。当提供元素集合时，jQuery将自动迭代绑定同一事件处理程序

在

onInput

事件的回调中，您只需要检查任何字段是否为空的逻辑即可。这是通过使用

.map（）

然后使用

.filter（）

返回空字段数组来完成的。通过检查此数组的长度，有条件地禁用/启用“提交”按钮

第3点理解起来可能有点复杂，下面是它的分解：

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

这将返回一个空字段数组。然后可以使用

.prop（'disabled'，）

有条件地启用或禁用提交按钮<代码>！！emptyFields.length表达式用于确保返回布尔值：

如果没有空字段（长度为0），
```
！！0
```
返回false
当有空字段（长度>=1）时，
```
返回true
```



见下面的概念证明：

$（函数（）{
//缓存要验证的字段
var$fieldsToCheck=$（'.registration form.validate'）；
//函数以确保字段不为空
var checkFields=函数（）{
//获取空字段数组
var emptyFields=$fieldsToCheck.map（函数（）{
返回此.value；
}).get（）.filter（函数（val）{
返回val.length==0；
});
//根据空字段的长度切换禁用的道具
$（'.create account button'）.prop（'disabled'，！！emptyFields.length）；
};
//将onInput事件绑定到要检查的所有输入
$fieldsToCheck.on（'input'，checkFields）；
});

创建帐户
根据我的评论：你的问题过于复杂了。你的浏览器崩溃的原因是因为你在无限循环中调用checkFields
。您想做的事情非常简单：
为所有要验证的输入字段指定一个类，比如为它们指定一个validate
绑定onInput
事件以调用这些输入字段。当提供元素集合时，jQuery将自动迭代绑定同一事件处理程序
在onInput
事件的回调中，您只需要检查任何字段是否为空的逻辑即可。这是通过使用.map（）
然后使用.filter（）
返回空字段数组来完成的。通过检查此数组的长度，有条件地禁用/启用“提交”按钮
第3点理解起来可能有点复杂，下面是它的分解：

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

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

如果没有空字段（长度为0），！！0
返回false
当有空字段（长度>=1）时，返回true



见下面的概念证明：

$（函数（）{
//缓存要验证的字段
var$fieldsToCheck=$（'.registration form.validate'）；
//函数以确保字段不为空
var checkFields=函数（）{
//获取空字段数组
var emptyFields=$fieldsToCheck.map（函数（）{
返回此.value；
}).get（）.filter（函数（val）{
返回val.length==0；
});
//根据空字段的长度切换禁用的道具
$（'.create account button'）.prop（'disabled'，！！emptyFields.length）；
};
//将onInput事件绑定到要检查的所有输入
$fieldsToCheck.on（'input'，checkFields）；
});

创建帐户
纯Javascript版本。让我们采取引导形式
将validate类添加到需要检查的输入中
<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>