2016-05-23 9 views
0

は、私はこのHTMLを持っていたときに送信ボタンを有効JavaScriptの無効化/パスワードが一致し

> <div class="row"> 
>      <div class="col-xs-6 col-sm-6 col-md-6"> 
>       <div class="form-group"> 
>        <input type="password" name="pass1" id="pass1" class="form-control input-lg" placeholder="Password" 
> tabindex="3"> 
>       </div> 
>      </div> 
>      <div class="col-xs-6 col-sm-6 col-md-6"> 
>       <div class="form-group"> 
>        <input type="password" name="pass2" id="pass2" onkeyup="checkPass(); return false;" class="form-control 
> input-lg" placeholder="Confirm Password "> 
>       <span id="confirmMessage" class="confirmMessage"></span> 
>      </div> 
>      
>      </div> 
>     
>     </div> 
>     
>     <div class="row"> 
>      <input type="submit" id="login" value="Register"> 
>     </div> 

私はこのような何かを行うことができます方法:

パスワードを無効にすべき提出(=無効」が無効空である

")。

無効な属性を削除するために何かがパスワードに入力されたとき。

パスワードフィールドがもう一度空になると(テキストが削除される)、送信ボタンを再び無効にする必要があります。パスワードが一致するか、一致していませんが、私の問題がときであれば

<script type="text/javascript"> 
function checkPass() 
{ 
    //Store the password field objects into variables ... 
    var pass1 = document.getElementById('pass1'); 
    var pass2 = document.getElementById('pass2'); 
    //Store the Confimation Message Object ... 
    var message = document.getElementById('confirmMessage'); 
    //Set the colors we will be using ... 
    var goodColor = "#66cc66"; 
    var badColor = "#ff6666"; 
    //Compare the values in the password field 
    //and the confirmation field 
    if(pass1.value == pass2.value){ 
     //The passwords match. 
     //Set the color to the good color and inform 
     //the user that they have entered the correct password 
     pass2.style.backgroundColor = goodColor; 
     message.style.color = goodColor; 
     message.innerHTML = "Passwords Match!" 
    }else{ 
     //The passwords do not match. 
     //Set the color to the bad color and 
     //notify the user. 
     pass2.style.backgroundColor = badColor; 
     message.style.color = badColor; 
     message.innerHTML = "Passwords Do Not Match!" 
     $("#submit").attr("disabled", "disabled"); 
    } 
} 
</script> 

javascriptの表示メッセージ:

パスワードが一致しない場合、送信ボタンは、私がこのような何かを試してみました

無効にする必要がありますパスワードがSUBMITボタンと一致しない場合は、依然として先に進み、提出します。

答えて

0

使用似たような:

if (pass1.value && pass2.value && pass1.value == pass2.value) { 
    pass2.style.backgroundColor = goodColor; 
    message.style.color = goodColor; 
    message.innerHTML = "Passwords Match!" 
    $("#submit").prop("disabled", false); 
} else { 
    pass2.style.backgroundColor = badColor; 
    message.style.color = badColor; 
    message.innerHTML = "Passwords Do Not Match!" 
    $("#submit").prop("disabled", true); 
} 

私は(値が""であれば、それがfalseと評価された)2つの長さのチェックを追加し、ボタン、二つの文字列の一致を有効にする#prop()呼び出しを追加しました。

+0

まだ動作していません – youngdero

+0

まだ動作していません – youngdero

+0

'pass1'フィールドの' onkeyup'に 'checkPass'を添付してください。 – meskobalazs

1

あなたは要素のプロパティを変更する必要があり、属性ではない:

$(document).ready(function() { 
 
    var isDisabled = false; 
 
    $('#toggler').click(function() { 
 
    isDisabled = !isDisabled; 
 
    $('#submit').prop('disabled', isDisabled); 
 
    }); 
 

 
    $('form').submit(function(e) { 
 
    e.preventDefault(); 
 
    alert('Submiting'); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#" method="post"> 
 
    <button type="button" id="toggler">Disable/Enable</button> 
 
    <button type="submit" id="submit">Submit</button> 
 
</form>

0

申し訳ありませんが、私はあなたがフォームを持っている場合は、私が代わりに にお答えしますコメントすることはできませんので、(私はあなたが行うと仮定します私はそれを見ることはできませんが、あなたはこのようにすることができます)

$("#form").on('submit', function(e) { 
    e.preventDefault(); 
    if(!$('#submit').prop('disabled')){ 
       $(this).submit(); 
    } 

}); 

基本的に私は最初に投稿を停止しますフォームを送信する前にボタンが無効になっている場合

+0

はまだ動作していません – youngdero

+0

あなたはあなたのフォームを再投稿していると思います。 – Justinas

関連する問題