Question

我正在尝试使用jQuery验证表单，我现在要做的是禁用提交按钮，直到所有字段都正确填充。这是我的方法： http://jsfiddle.net/w57hq430/

<input type="text" name="commodity">Commodity
<input type="text" name="plz">PLz
        <input type="submit">

和实际的jQuery：

$(document).ready(function() {
var error = null;
$('input[name=commodity]').focusout(function() {
    var com = $('input[name=commodity]').val();
    if($.isNumeric(com)) {
       error ="asd";
    }
    else {
       alert("commodity has to be numeric");
    }

});
    $('input[name=plz]').focusout(function() {
    var com = $('input[name=plz]').val();
    if($.isNumeric(com)) {
       error ="asd";
    }
    else {
       alert("plz has to be numeric");
    }

});


if(error != null) {
 $('input[type=submit]').attr('disabled', 'disabled');
}
else {
    $('input[type=submit]').removeAttr('disabled');

}
});

我知道这段代码会阻止在所有字段都正确的情况下点击提交按钮，因为如果我正确使用mouseout，这是一个测试。但是，这不起作用。即使在你之后，变量错误也是空的在文本字段中输入一些数字（应将其设置为“asd”）。其余代码是否无法访问我的变量？或者其他任何错误？

Answer 1

即使输入文本后错误为空的原因也是因为您只运行此函数一次，即文档加载完成后。

相反，您需要在文本更改时验证字段，并在提交按钮上处理禁用标记。

此外，您不希望var两个语句中的if位于错误字段的前面。

我试试这个问题，你将验证转移到一个函数中（而不是共享一个错误变量，因为你不知道何时将其置零）并在其中一个字段完成编辑时触发。

您可以在此JSFiddle

中试用

$(document).ready(function() {

    var toggleButton = function() {

        // Check validity of 1st input
        if($.isNumeric($('input[name=commodity]').val()) === false) {
            $('input[type=submit]').attr('disabled', 'disabled');
            error = "commodity has to be numeric";

        // Check validity of 2nd input
        } else if ($.isNumeric($('input[name=plz]').val()) === false) {
            $('input[type=submit]').attr('disabled', 'disabled');
            error = "plz has to be numeric";
        } else {
            $('input[type=submit]').removeAttr('disabled');
        }         
    };

    $('input[name=commodity]').focusout(function() {
        toggleButton();
    });

    $('input[name=plz]').focusout(function() {
       toggleButton();
    });

    // Disable submit button right at the start
    toggleButton();
});

Answer 2

尝试使用，最好在提交点击时检查表单是否有效，而不是每个字段的更改事件...

$(":submit").click(function(){
   if(IsFormValid() == false)
    return false;
});

function IsFormValid()
{
   //Check form fields are valid
  if form is valid
     return true;
  return false;
}

Answer 3

也许如果你可以，我建议你使用一个jquery插件，可以帮助你节省重新发明轮子的时间，也许this one，它可以让你禁用提交按钮

Answer 4

您的代码存在一些问题，其中一些问题在发布的答案中提到但有些问题没有提及，例如，当您有两个字段时，一个错误var就不够用这种方式而且您也没有调用按钮状态函数每一次改变。

试试这个：

$(document).ready(function() {
    $('input[type=submit]').attr('disabled', 'disabled');
    var IsError1 = 0;
    var IsError2 = 0;
    $('input[name=commodity]').focusout(function() {
        var com = $('input[name=commodity]').val();
        if(!$.isNumeric(com)) {
          alert("commodity has to be numeric");
          IsError1 = 1;
        }else {
            IsError1 = 0;
        }
        setButtonState();
    });
        $('input[name=plz]').focusout(function() {
        var com = $('input[name=plz]').val();
        if(!$.isNumeric(com)) {
          alert("plz has to be numeric");
          IsError2 = 1;
        }else {
            IsError2 = 0;
        }
        setButtonState();
    });

    function setButtonState(){
        if(IsError1 == 0 && IsError2 == 0) {
            $('input[type=submit]').removeAttr('disabled');
        } else {
            $('input[type=submit]').attr('disabled', 'disabled');
        }
    }
});

<强> Check JSFiddle Demo

使用jquery在验证中禁用提交按钮

4 个答案: