Question

我对此代码感到非常头疼，函数.change（validate）;表格填写完毕后，它没有开火！有什么建议？？？

$(document).ready(function(){
    validate();
    $('#SUEmail', '#SUName', '#SUPassword','#SUConfPassword').change(validate);
});

function validate(){
    if ($('#SUEmail').val().length   >   0   &&
        $('#SUName').val().length  >   0   &&
        $('#SUPassword').val().length  >   0   &&
        $('#SUConfPassword').val().length    >   0) {
        $("input[type=submit]").prop("disabled", false);
    } else {
        $("input[type=submit]").prop("disabled", true);
    }
}

Answer 1

$('#SUEmail', '#SUName', '#SUPassword','#SUConfPassword')无效，请参阅the documentation。您将一系列单独的字符串传递给函数。

您可能想要使用CSS group：

的单个字符串

$('#SUEmail, #SUName, #SUPassword, #SUConfPassword').change(validate);

...但请注意change在离开元素之前不会触发，因此您可能会考虑input事件。

我还将validate函数移动到 ready处理程序中，因此它不是全局的。 Globals是Bad Thing™。全局命名空间真的拥挤。当你可以避免添加它时添加它并不是一个好主意。

CSS小组示例，使用input以及change，移动validate：

＆＃13;

$(document).ready(function() {
  validate();
  $('#SUEmail, #SUName, #SUPassword, #SUConfPassword').on("input change", validate);

  function validate() {
    if ($('#SUEmail').val().length > 0 &&
      $('#SUName').val().length > 0 &&
      $('#SUPassword').val().length > 0 &&
      $('#SUConfPassword').val().length > 0) {
      $("input[type=submit]").prop("disabled", false);
    } else {
      $("input[type=submit]").prop("disabled", true);
    }
  }
});

＆＃13;

<form onsubmit="return false;/*For demo purposes*/">
  <input id="SUEmail" type="text">
  <input id="SUName" type="text">
  <input id="SUPassword" type="password">
  <input id="SUConfPassword" type="password">
  <input type="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

.change（）在表单填写后没有触发

1 个答案: