防止提交字段不匹配

我使用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>

我已经更新了我的代码按下面的一种建议，但它仍然会允许我发布形式不禁止，直到字段匹配...

来源

2015-07-10 PhpDude

我在此看到的一个缺陷是仅针对＃password2发起的事件。如果他们让他们匹配，然后改变＃password1？为什么不对提交进行检查或对两个密码或两者都执行$（.class）.blur？ – Ju66ernaut

那么更好的方法是什么？ – PhpDude

在'＃password1'上简单地将'validate（）'绑定到keyup'，就像'＃password1'一样＃ –

-1

你快到了。在您的提交按钮上设置disabled属性（这似乎从您的粘贴代码中丢失）。假设你的提交按钮有一个ID submit-button：

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); 
    } 
}

优化版本会“缓存”等，从而元素：

var $password1 = $("#password1"), 
    $password2 = $("#password2"), 
    $statusMessage = $("#validate-status"), 
    $submitButton = $('#submit-button'); 

function validate() { 

    if($password1.val() == $password2.val()) { 
     $statusMessage.text("Passwords Match!"); 
     $submitButton.prop('disabled', false); 
    } 
    else { 
     $statusMessage.text("Passwords Do Not Match!"); 
     $submitButton.prop('disabled', true); 
    } 
}

来源

2015-07-10 14:08:23

应该颠倒你的'true'和'false'。 – Karthik

哦，男人，那些日子之一......谢谢。 –

所以我正在尝试上述，但它仍然允许我推送提交按钮？ – PhpDude

如果您的提交按钮ID为“提交”，你可以这样做：

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

不过，我建议你可以这样写：

正如您所提交的形式，它的最好在提交表单时进行验证，因为通过keyup致电validate，您将会做很多不必要的工作。

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

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

写在你的形式onSubmit=" return validate();提交按钮防止从形式时validate函数返回false提交。所以你不需要编写任何其他代码。这应该够了。

来源

2015-07-10 14:06:44 Karthik

如果所有人放在一起，你会如何看待上述建议？ – PhpDude

@phpcoder我没有得到你的问题。 – Karthik

@karthik我认为它翻译为“请为我写我的代码”。 –

赋予这两个密码要素类，并做了.blur（）。

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

我把支票上的提交功能以及，如果值是不一样的回报虚假和一些消息，说的密码不匹配

来源

2015-07-10 14:24:57 Ju66ernaut

为什么downvote？这个示例有效 – Ju66ernaut

首先，你需要从删除＃您的输入ID。在加载时禁用它也许是有意义的。

输入ID = “提交按钮” 类型= “提交” 值= “更改密码” 禁用= “真正的”

然后，只需设置一个KEYUP监听两个密码字段

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

（根据您更新的代码）

来源

2015-07-10 14:55:42

防止提交字段不匹配

回答

相关问题