2016-12-08 14 views
0

私はサインアップフォームを持っていて、サードパーティのライブラリを使って入力を検証しています。このライブラリはバリデーションに非常に素晴らしい効果をもたらしますが、パスワードとパスワードが一致していることを確認するためにもう一度検証する必要があります。 jQueryを使ってどうすればいいですか?ここに私のコードは次のとおりです。jQuery for passwordフィールドに2つのバリデーションを組み合わせる

<div class="form-group"> 
    <label>Password</label> 
    <input type="password" class="form-control" name="password" /> 
</div> 
<div class="form-group"> 
    <label>Retype Password</label> 
    <input type="password" class="form-control" name="password2" /> 
</div> 

とjQueryの一部:

$('#registrationForm').formValidation({ 
    framework: 'bootstrap', 
    fields: { 
     password: { 
      validators: { 
       notEmpty: { 
        message: 'The password is required' 
       } 
      } 
     }, 
     password2: { 
      validators: { 
       notEmpty: { 
        message: 'Password conformation is required' 
       }, 
       equalTo: { 
        field: 'password', 
        message: 'The password cannot be the same as username' 
       } 
      } 
     } 
    } 
}); 

は、私は私の問題に対処するために、疑問符の代わりに何を置くべきですか?あるいは、私は構文に完全に間違っているかもしれませんか?

+0

jQueryはどこですか?あなたが持っているのは、ネストされたオブジェクトリテラルです。 –

+0

Validate.jsを使用していますか? –

+0

いいえ私はformvalidation.ioを使用しています – Amir

答えて

1

Working Fiddle

HTML:

<form id="formCheckPassword"> 

    <div class="form-group"> 
    <label>Password</label> 
    <input type="password" class="form-control" name="password" id="password" /> 
    </div> 
    <div class="form-group"> 
    <label>Retype Password</label> 
    <input type="password" class="form-control" name="cfmPassword" id="cfmPassword" /> 
    </div> 
    <input type="submit" value="submit" /> 
</form> 

とjQueryのルール:

$("#formCheckPassword").validate({ 
    rules: { 
    password: { 
     required: true, 
     minlength: 6, 
     maxlength: 10, 

    }, 

    cfmPassword: { 
     equalTo: "#password", 
     minlength: 6, 
     maxlength: 10 
    } 


    }, 
    messages: { 
    password: { 
     required: "the password is required" 

    } 
    } 

}); 

リクエストごとに更新:

$('#RegistrationForm').formValidation({ 
    framework: 'bootstrap', 
    fields: { 
     password: { 
      validators: { 
       identical: { 
        field: 'confirmPassword', 
        message: 'The password and its confirm are not the same' 
       } 
      } 
     }, 
     confirmPassword: { 
      validators: { 
       identical: { 
        field: 'password', 
        message: 'The password and its confirm are not the same' 
       } 
      } 
     } 
    } 
}); 
+0

ありがとうございました。このコードスニペットに基づいてコードを書き直せますか? $( '#1 registrationForm')formValidation({ 枠組み: 'ブートストラップ'、 フィールド:{ PW:{ バリ:{ notEmpty:{ メッセージ: 'パスワードが必要とされる' } } }、 PW2:{ バリ:{ notEmpty:{ メッセージ: 'コンフォメーションが必要とされる' }}} }})。 – Amir

+0

検証のための更新を参照してください。 –

+0

パーフェクト!ありがとうございました! – Amir

0

この構文では動作しません。あなたはjQueryの(あなたが述べたように)を介してそれを実行したい場合は、単に値をチェックすることができます

var password1 = $('input[name=password]').val(); 
var password2 = $('input[name=password2]').val(); 
var match = password1 == password2 
関連する問題