防止提交字段不匹配

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

防止提交字段不匹配

回答

相關問題