0

クライアント側の検証にjQuery Validate ( http://jqueryvalidation.org/ ) を使用しています

<script type="text/javascript">
        $().ready(function() {
           //validate the inquiry form on keyup and submit
            $("#inquiryForm").validate({
                onkeyup: true,
                rules: {
                    fullName: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    inquiry: {
                        required: true,
                        minlength: 5,
                        maxlength: 500
                    }
                },
                messages: {
                    fullName: $.growl({ title: "Growl", message: "Your name is required!" });
                }
            })
        })

</script>

（サーバー側も使用していますが、質問の性質上、ここには含まれていません。）

デフォルトでは、入力フィールドの下にエラー メッセージが表示されます。エラー メッセージにjquery Growl ( http://ksylvest.github.io/jquery-growl/ )を使用したいと考えています。エラーメッセージごとに個別のうなり通知が必要です。

jquery Growl は次のようになります。

$.growl({ title: "Growl", message: "The kitten is awake!" });

コードの最初のブロックからわかるように、検証スクリプトのメッセージ領域の下に追加しようとしましたが、ページが読み込まれたときにうなりメッセージが表示され、検証のためにフォームを送信すると、以下のエラーメッセージが表示されますフィールドは通常通り。

また、送信時ではなくキーアップ時に検証スクリプトを実行するにはどうすればよいですか?

アップデート

リクエストに基づくフォームはこちら

<form class="form-horizontal" id="inquiryForm">
   <div class="control-group">
     <label class="control-label" for="inputname">Your Name:</label>
     <div class="controls">
        <input type="text" name="fullName" id="inputname" placeholder="First and Last">
     </div>
   </div>
   <div class="control-group">
     <label class="control-label" for="inputemail">Your Email:</label>
     <div class="controls">
        <input type="text" name="email" id="inputemail" placeholder="Email">
     </div>
   </div>
   <div class="control-group">
     <label class="control-label" for="inputinquiry">Your Inquiry:</label>
     <div class="controls">
        <textarea name="inquiry" id="inputquiry" placeholder="Your Inquiry"></textarea>
     </div>
   </div>
   <div class="control-group">
     <div class="controls">
        <button type="submit" id="inquiryFormSubmit" class="btn btn-success pull-right">Send</button>
     </div>
   </div>
</form>
4

2 に答える 2

1

はmessage、表示する文字列です。で代替プレゼンテーションを処理できますshowErrors。validate({})これを呼び出しに追加します。

showErrors: function(errorMap, errorList) {
     for (var error in errorMap) {
         $.growl({title: error, message: errorMap[error]});
     }
}

これにより、フィールド名をタイトルとして送信する各エラーが警告されます。そこからカスタマイズできるはずです。

于 2013-09-17T20:46:43.543 に答える
0

引用OP：

「また、送信時ではなくキーアップ時に検証スクリプトを実行するにはどうすればよいですか?」

次の行を削除します。

onkeyup: true

なんで？これはすでにデフォルトの動作であり、これを に設定するtrueと壊れてしまうためです。

onkeyup:trueデモ: http://jsfiddle.net/FhsTg/ (壊れた)

動作デモ: http://jsfiddle.net/FhsTg/1/

ドキュメントに従って：

onkeyup

タイプ: Boolean または Function()

キーアップ時に要素を検証します。フィールドが無効としてマークされていない限り、何も起こりません。それ以外の場合、各キーアップ イベントですべてのルールがチェックされます。

- に設定しfalseて無効にします。
- 関数に設定して、検証を実行するタイミングを自分で決定します。
-ブール値trueは有効な値ではありません。

于 2013-09-17T22:00:45.750 に答える