6

ユーザー入力用の基本的なフォーム設定（名、姓、電子メール）があります。jQueryと検証プラグインを正しくインポートしました。検証のための私の構成はこれです：

$(document).ready(function() {
    $("#form").validate({meta: "validate"});
});

こことここにあるプラグインのドキュメントによると、これは、検証したい各入力に詳細を追加できることを意味するはずです。したがって、私はこれを持っています：

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0">
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1">
<input type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address.', email:'Please enter a valid email address.'}}}" id="em2">

これらのそれぞれには、私が省略した独自のラベルがあります。

私のCSSは次のように設定されています。

label.error {
    color: red;
    font-weight: bold;
}

3つのフィールドすべてを空白にして[送信]をクリックした後、フォームに表示されると、[名]と[名前]に期待どおりに赤いエラーメッセージが表示されます（ただしPlease enter your first name.、Please enter your last name.それぞれ、メールにエラーメッセージは表示されません。無効な形式のメールアドレスを入力すると、まだメッセージが届きません。しばらくググってドキュメントを読みましたが、どこで失敗しているのか特定できないようです。

ありがとう

注： IDと名前は、ソースコードからわかりやすくするために編集されています。

4

3 に答える 3

5

おそらく、現在の検証オプション構成ではなく、クラスを「必須の電子メール」として設定する必要があります。これが私のために働く修正されたデモコードです：

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0">
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1">
<input type="text" name="em" value="" class="required email" id="em2">

javascriptとcssは同じままです。

<script type="text/javascript">
$(document).ready(function() {
    $("#form").validate({meta: "validate"});
});
</script>
<style type="text/css" media="screen">
    label.error {
    color: red;
    font-weight: bold;
}
</style>

フォームフィールドに設定されたクラスごとに検証ルールが実行され、各ルールの標準エラーが表示されます。この例では、最初に「必須」ルールが実行され、「このフィールドは必須です」というエラーが表示されます。フィールドが空になると、フィールド値がルールでテストされた電子メール形式と一致するまで「電子メール」検証ルールが実行されます。

エラーメッセージをより細かく制御したい場合は、次のように「validate」関数呼び出しでより多くの構成を渡すことができます。

$("#form").validate({
       rules: {
         fn: "required",
         ln: "required",
         em: {
           required: true,
           email: true
         }
       },
       messages: {
         fn: "Please specify your first name",
         ln: "Please specify your last name",
         em: {
           required: "We need your email address to contact you",
           email: "Your email address must be in the format of name@domain.com"
         }
       }
    });
于 2012-08-19T11:35:13.943 に答える
4

私はこのプラグインの使用経験があります。私の知識から、これを試してみてください、

<script id="demo" type="text/javascript">
jQuery(document).ready(function($) {
    var validator = $("#your_form_id").validate({
        rules: {
            fn: "required",
            ln: "required",
            em: {
                required: true,
                email: true,
            },
        },
        messages: {
            fn: "Please enter your first name.",
            ln: "Please enter your last name.",
            em: {
                required: "Please enter your email address.",
                email: "Please enter a valid email address.",
            },
        },
        errorPlacement: function(error, element) {
                error.appendTo( element.parent().next() );
        },
        success: function(label) {
            label.html("OK").addClass("checked");
        }
    });
});
</script>

そしてあなたのHTMLで;

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn"><span class="status"></span><br> 
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln"><span class="status"></span><br>
<input type="text" name="em" value="" class="required" id="em"><span class="status"></span><br>

<span class="status">これにより、対応する入力要素の近くにエラーメッセージが表示されます。また、 CSSを使用しsuccessてメッセージのスタイルを設定します。error

#your_form_id label.error {
  background:url("error.png") no-repeat 0px 0px;
  color: #CC0000;
}
#your_form_id label.checked {
  background:url("checked.png") no-repeat 0px 0px;
  color: #008000;
}
#your_form_id .success_msg {
  color: #008000;
}

それでも使用したい場合はMeta、以下に完全なコードを示します。

<head>
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.metadata.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#commentForm").validate({meta: "validate"});
});
</script>
</head>
<body>
<form id="commentForm" method="post" action="test.php">
<input id="fn0" type="text" name="fn" value="" class="required" title="Please enter your first name."><br />
<input id="ln1" type="text" name="ln" value="" class="required" title="Please enter your last name."><br />
<input id="em2" type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/><br />
<input class="submit" type="submit" value="Submit"/>
</form>
</body>

お役に立てれば。

于 2012-08-15T06:40:25.803 に答える
1

メタは、FirstnameフィールドとLastnameフィールドに対して正しく行うように、すでに存在する検証メソッドで使用できます。独自の検証方法を追加するには、次のようなものを使用します。

$.validator.addMethod('own_method_name', function(value, element){
    var matches = value.match(/[ a-z0-9?%-]+/gi);
    return matches.length > 0 && matches[0] == value;
}, 'Default error message');

と：

<input type="text" name="em" value="" class="required email own_method_name" id="em2">

注：この場合（要素のメタを介した複数のルール）、独自のエラーメッセージを指定する機能が失われ、デフォルトのメッセージのみを使用できます。

于 2012-08-16T13:59:02.253 に答える