Question

我正在使用JS来检查两个字段是否匹配但我需要一种方法来禁用提交按钮，如果它们匹配不匹配，然后一旦它们匹配就启用：

    <label>New password:</label><br><input type="password" name="new_password"  id="password1"/><br><br>
    <label>Confirm password:</label><br><input type="password" name="new_password_check"  id="password2" /><br><br>

    <p id="validate-status"></p>

  $(document).ready(function() {
  $("#password2").keyup(validate);
});


function validate() {
  var password1 = $("#password1").val();
  var password2 = $("#password2").val();
    if(password1 == password2) {
       $("#validate-status").text("Passwords Match!");        
    }
    else {
       $("#validate-status").text("Passwords Do Not Match!");  
    }

}

已更新

<form method="post" action="password_change.inc.php">

    <input type="hidden" name="user_id" value="<? echo $_SESSION['user_id']; ?>" />


    <label>New password:</label><br><input type="password" name="new_password"  id="password1"/><br><br>
    <label>Confirm password:</label><br><input type="password" name="new_password_check"  id="password2" /><br><br>

    <p id="validate-status"></p>   

    <input id="#submit-button" type="submit" value="Change password" />
</form>

<script>

function validate() {
    var password1 = $("#password1").val();
    var password2 = $("#password2").val();
    if(password1 == password2) {
         $("#validate-status").text("Passwords Match!");
         $('#submit-button').prop('disabled', false);
    }
    else {
         $("#validate-status").text("Passwords Do Not Match!");  
         $('#submit-button').prop('disabled', true);
    }
}

</script>

我已根据下面的一个建议更新了我的代码，但它仍然允许我发布表单而不会禁用，直到字段匹配...

Answer 1

如果您的提交按钮ID为＆＃34;提交＆＃34;，您可以执行以下操作：

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

（您可能还需要点击提交按钮进行验证）

所以你应该尝试类似的东西：

   if(password1 == password2) {
      $("#validate-status").text("Passwords Match!");     
       $("#submit").prop('disabled', false);

   }
   else {
      $("#validate-status").text("Passwords Do Not Match!");  
      $("#submit").prop('disabled', false);
  }

但我建议你这样写：

在提交表单时，最好在提交表单时进行验证，因为通过validate调用keyup，您将完成大量不必要的工作。

<input id="submit" type="submit" value="Change password" onSubmit="return validate();" />

function validate(){
    return ($("#password1").val() === $("#password2").val());
}

在表单提交按钮中编写onSubmit=" return validate();可防止在validate函数返回false时提交表单。因此，您不需要编写任何其他代码。这应该足够了。

Answer 2

将两个密码元素都设为一个类并执行.blur（）。

$('.myClass').blur(function () { value is the same enable submit, else disable  });

我也会检查提交功能，如果值不相同则返回false，并且有些消息说密码不匹配

Answer 3

首先，您需要从输入ID中删除＃。在负载上禁用它也可能是有意义的。

输入id =“submit-button”type =“submit”value =“更改密码”disabled =“true”

然后在两个密码字段

上设置一个keyup监听器

$（“＃password1，＃password2”）。keyup（function（e）{validate（）;}）;

（根据您更新的代码）

Answer 4

道歉，以补充一个已有5年历史的问题，但这是另一种解决方法...

<form method="post" action="password_change.inc.php">

    <input type="hidden" name="user_id" value="<? echo $_SESSION['user_id']; ?>" />


    <label>New password:</label><br><input type="password" name="new_password"  id="password1"/><br><br>
    <label>Confirm password:</label><br><input type="password" name="new_password_check"  id="password2" /><br><br>

    <p id="validate-status"></p>   

    <input id="submit-button" type="submit" value="Change password" />
</form>

<script>

$('#password1, #password2').keyup(validate); // Allows for interchangeable user text - Example, if user types in password1 field, but actually has password2 field with the correct password, user can correct password1 field and things match/validate
function validate() {
    var password1 = $("#password1").val();
    var password2 = $("#password2").val();
    if(password1 == password2) {
         $('#validate-status').css({'background' : 'green'});
         $('#validate-status').text('Passwords Match');
         // Below commented out code works too...
         //$('#submit-button').prop('disabled', false);
         $('#submit-button').css({'display' : 'block'}); // Bring the submit button back...
    }
    else {
         $('#validate-status').css({'background' : 'red'});
         $('#validate-status').text('Passwords do NOT match - Please fix');
         // Below commented out code works too...
         //$('#submit-button').prop('disabled', true);
         $('#submit-button').css({'display' : 'none'}); // Do not display the submit button - user has no choice but to correct passwords and make them match...
    }
}

</script>

提琴：https://jsfiddle.net/8kLypb7q/1/

Answer 5

你几乎就在那里。在提交按钮上设置public IQueryable<QR_Group> GetAllGroups() { return db.GetAllGroups(); }属性（粘贴的代码中似乎缺少该属性）。假设您的提交按钮的ID为disabled：

submit-button

优化版本会＆＃34;缓存＆＃34;像这样的元素：

function validate() {
    var password1 = $("#password1").val();
    var password2 = $("#password2").val();
    if(password1 == password2) {
         $("#validate-status").text("Passwords Match!");
         $('#submit-button').prop('disabled', false);
    }
    else {
         $("#validate-status").text("Passwords Do Not Match!");  
         $('#submit-button').prop('disabled', true);
    }
}

如果字段不匹配，则阻止提交

5 个答案: