Question

如果未填写所有必填字段，则下面的代码会禁用表单的提交按钮。问题是如果它被填写然后擦除按钮保持启用。我该如何解决这个问题？

$(".submit").prop('disabled', true);
$('.required').keyup(function () {
    if ($(".fname").val() != "" && $(".lname").val() != "" && $(".userName").val() != "" && $(".familyRav").val() != "" && $(".birthday").val() != "" && $(".password").val() != '' && $(".confirm_password").val() != '' && $(".password").val() ===  $(".confirm_password").val()) {
        $(".submit").prop("disabled", false);

    }
});

Answer 1

将您的if更改为if / else：

if ($(".fname").val() != "" && $(".lname").val() != "" && $(".userName").val() != "" && $(".familyRav").val() != "" && $(".birthday").val() != "" && $(".password").val() != '' && $(".confirm_password").val() != '' && $(".password").val() ===  $(".confirm_password").val()) {
    $(".submit").prop("disabled", false);
} else $(".submit").prop("disabled", true);

Answer 2

这是一种确保在启用提交按钮之前填充所有.required元素的方法。

该功能不依赖于＆＃34;特定的＆＃34;领域。
只需要.required类。

因此HTML更易于维护。

$(".submit").prop('disabled', true);

$('.required').keyup(function () {

    // Each time a check is performed, consider the button disabled as a start.
    $(".submit").prop('disabled', true);


    // Set a var to use as a "flag".
    var requiredAllCompleted = true;

    // Cycle through them all.  
    $('.required').each(function(){
        if( ($this).val() == "" ){
            requiredAllCompleted = false;
        }
    });

    // If all required fields not empty
    if ( requiredAllCompleted){

        // Additional check for password match.
        if( $(".password").val() ===  $(".confirm_password").val()) {

            // Unlock the submit button.
            $(".submit").prop("disabled", false);
        }
    }
});

Answer 3

您可能应该默认将按钮更改为禁用，因为只有在必填字段中输入第一个内容时才首次禁用该表单。

您应该将此行为封装到可以在不同事件上调用的函数中。例如，如果您的表单已预先填充，您可能希望在页面加载时运行此检查以设置初始按钮状态，以及在更改数据期间调用此函数。

我认为将此绑定到相关表单字段的更改事件而不是键盘。如果您想在用户输入时提供单独的字段验证反馈，那么键入可能对于绑定可能很有价值，但尝试更改每次按键的按钮启用/禁用状态是否真的有意义？

我想回想一下@LouysPatriceBessette的想法，如果您已经为必需的字段定义了一个可以轻松选择的类并且迭代以验证值是非空字符串，那么您不需要在此处对字段名进行硬编码。

Answer 4

以下是仅限CSS 解决方案。并不总是我们应该跳过javascript解决方案：）

＆＃13;

#frm1:invalid #btn1 {
  pointer-events: none;
  cursor: not-allowed;
  color: graytext;
}

＆＃13;

<form id="frm1">
  name: <input name="n1" type="text" required="required" /><br />
  phone: <input name="n2" type="text" required="required" /><br />
  mail: <input name="n3" type="text" required="required" /><br />
  check: <input name="n4" type="checkbox" required="required" /><br />
  radio: <input name="n5" type="radio" required="required" /><br />
  <input id="btn1" type="submit" value="click" />
</form>

＆＃13;

重要的是要注意，如果有人会点击表单中的enter - 它将被发送（因为无法控制＆＃34;禁用＆＃34;属性从CSS提交按钮）。此解决方案仅适用于样式。

使用pointer-events

禁用了点击提交按钮

在未输入必填字段时禁用表单中的按钮的最佳方法

4 个答案: