1

テキストを入力して次のフォームにタブで移動しない限り、以下のフォーム検証に応答することができません。別のフィールドをクリックしたり、送信を押したりしても何も起こりません。すべてのシナリオで応答するようにしたいと思います。正直なところ、クラスの有効化または無効化よりも複雑なことにjqueryを使用したのはこれが初めてなので、おそらくどこかで基本的なエラーを犯しています。しかし、それが何であるかはわかりません。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script type="text/javascript">
    //form validation 
   $(document).ready(function() {
       $("#form").validate({
            rules: {
                organization: {
                    required: true,
                    minlength: 2,
                    },
                firstname: {
                    required: true,
                    minlength: 2,
                    },
                lastname: {
                    required: true,
                    minlength: 2,
                    },
                email: {
                    required: true,
                    email: true,
                    },
                phone: {
                    required: true,
                    minlength: 10,
                    number: true,
                    },
            },
            messages: {
                organization: "Please enter a valid organization name",
                firstname: "Please enter your first name",
                lastname: "Please enter your last name",
                email: "Please enter a valid email address",
                phone: "Please enter a valid phone number",
            },
        });         
   });
</script>
</head>
<body>
<div id="form_container">
    <div id="form_title">REQUEST INFO</div>
    <form id="form" name="form_container" action="#">
        <!-- fields -->
        <input id="organization" type="text" name="organization" minlength="2" />
        <input id="firstname" type="text" name="firstname" minlength="2" />
        <input id="lastname" type="text"  name="lastname" minlength="2" />
        <input id="email" type="text" name="email" />
        <input id="phone" type="text" name="phone" />
        <!-- submit button -->
        <input type="button" id="button" name="submit" type="submit" value="submit" > 
    </form>
</div>
</body>
</html>
4

2 に答える 2

0

.focusin()および.focusout()jQuery イベント メソッドを見てください。.submit()実際に送信を実行する前に、訪問者が「送信」ボタンをクリックしたときにさらに検証を行う場合は、メソッドを確認する必要があります。

さらにガイダンスや詳細な説明/例が必要な場合はお知らせください。幸運を！:)

于 2012-08-31T15:03:43.793 に答える
0

送信ボタンに 2 つの type 属性があります

<input type="button" id="button" name="submit" type="submit" value="submit" >

これに変更

<input id="button" name="submit" type="submit" value="submit" />

これにより、ボタンがフォームを送信し、期待どおりに検証プラグインがトリガーされます。また、検証構成オブ​​ジェクトには、いくつかの場所 (各サブオブジェクトの最後のフィールドの後) にいくつかの余分な末尾のコンマがあり、一部の古いブラウザー (特に IE) でトリップする可能性があります。

于 2012-08-31T14:51:59.233 に答える