Javascript 使用jquery禁用验证中的提交按钮

我正在尝试使用jQuery验证表单，现在我想做的是禁用submit按钮，直到所有字段都正确填写。 这是我的方法：

---

我知道这段代码会阻止在所有字段都正确时单击submit按钮，因为如果我正确使用mouseout，这是一个测试。但是，这不起作用。即使在文本字段中输入了一些数字（应将其设置为“asd”）后，变量错误仍然为null。我的变量是否无法被代码的其余部分访问？或者是否有其他错误？

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

相反，您希望在字段的文本更改时验证字段，并以这种方式处理submit按钮上的disabled标志

此外，您不希望在两个

if

语句中的

var

位于错误字段前面

我想试试这个isntead，您可以将验证移到一个函数中（而不是共享一个错误变量，因为您不知道何时将其设为null），并在其中一个字段完成编辑时触发

你可以试试这个

---

即使在输入文本之后，错误仍然为null的原因是您只运行此函数一次，即在文档完成加载时

相反，您希望在字段的文本更改时验证字段，并以这种方式处理submit按钮上的disabled标志

此外，您不希望在两个

if

语句中的

var

位于错误字段前面

我想试试这个isntead，您可以将验证移到一个函数中（而不是共享一个错误变量，因为您不知道何时将其设为null），并在其中一个字段完成编辑时触发

你可以试试这个

---

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

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

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

---

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

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

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

---

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

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

试试这个：

$(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');
        }
    }
});

---

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

试试这个：

$(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');
        }
    }
});

---

谢谢你指出这一点。我其实知道这个插件，但我想尝试一下普通的方式；）谢谢你指出这一点。我其实知道这个插件，但我想用普通的方式试试；）

$(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');
        }
    }
});