1

jQuery Validate プラグインを使用してログイン フォームを検証する方法を教えてください。

私はこのコードを試しました：

    <script src="jquery-1.8.3.js"></script>
<script src="loginbut/js/login.js"></script>
<script src="jquery.validate.js" type="text/javascript">
</script>
<script>
$(document).ready(function(){
$("#loginform").validate({
rules:{
//name:"required",
username:"required",

password:"required",
gender:"required",

},
messages:{
email:"This field cannot be empty",

password:{
required:"specify password",

},

});

});


</script>

およびhtmlコードは次のとおりです。

<div id="bar">
    <div id="container">
        <!-- Login Starts Here -->
        <div id="loginContainer">
            <a href="#" id="loginButton"><span>Login</span><em></em></a>
            <div style="clear:both"></div>
            <div id="loginBox">                
                <form id="loginForm">
                    <fieldset id="body">
                        <fieldset>
                            <label for="email">Username</label>
                            <input type="text" name="email" id="email" class="required"/>
                        </fieldset>
                        <fieldset>
                            <label for="password">Password</label>
                            <input type="password" name="password" id="password" class="required"/>
                        </fieldset>
                        <input type="submit" id="login" value="Sign in" />
                        <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
                    </fieldset>
                    <span><a href="#">Forgot your password?</a></span>
                </form>
            </div>
        </div>
        <!-- Login Ends Here -->
    </div>
</div>

検証が機能していません。

私を助けてください。

4

1 に答える 1

5

構文とフォーマットのエラーが多数あるため、機能していません。validate()プラグインは、フィールドの属性を使用しnameますinput。あなたの2つのフィールドは と を使用emailしpasswordていname attributeます。関数に が含まれている理由もわかりませんgender。なぜなら、私が見ることができる HTML には含まれていないからです。

あなたのコードには多くの問題があります:

  • 閉じ括弧がありません。}
  • という名前のフィールドがない"gender"ため、このルールを削除しました。
  • username:"required",は、このルールの一般的な形式ではありません。する必要がありますrequired: true,
  • フィールド"username"のname属性が"email"
  • #loginFormjQueryコードのスペルミス
  • class="required"jQuery 内でルールを指定する場合は不要なinputので、HTML から削除してください。
  • Explorer の特定のバージョンで問題を引き起こす多くの「末尾のコンマ」が削除されました

ヒント:コードが適切にインデントされていると、構文エラーの多くを簡単に見つけることができます。

formHTMLが正しいと仮定すると、jQueryは次のようになります。

$(document).ready(function(){

    $("#loginForm").validate({
        rules: {
            email: {
                required: true
            },
            password: {
                required: true
            }
        },
        messages: {
            email: {
                required: "specify email"
            },
            password: {
                required: "specify password"
            }
        }
    });

});

作業デモ:

http://jsfiddle.net/fYdkL/1/

ドキュメンテーション：

http://docs.jquery.com/Plugins/Validation

公式の例:

http://jquery.bassistance.de/validate/demo/

于 2013-01-05T18:43:53.827 に答える