2

フォームを検証するために、公式のjQueryWebサイトで入手できるjQueryValidateプラグインを使用しています。nameフィールドではなく、classまたはに基づいてルールを渡す必要があるまで、すべてが順調に進んでいましたid。私はそれをなんとかすることができません。

これは、。を使用してルールをフィールドに渡す方法の例ですname="comment"。

これは私のjQueryコードです

$("#comForm").validate({
    rules: {
        comment: {
            required: true,
            minlength: 5,
            maxlength: 500
        }
    }
});

これが私のフォームです

  <form id="comForm" action="#" method="post" >
  <textarea rows="4" name="comment" placeholder="What do you think?" class="input-xxlarge" id="defaultform"></textarea></br>
  <textarea rows="4" name="othercomment" placeholder="What do you think?" class="input-xxlarge" id="defaultform"></textarea></br>
  <input type="submit" value="Rate!" class="btn btn-primary">
  </form>

idデフォルトの形式ですべてのフィールドに、または。ですべてのフィールドにルールを渡したいとしましょうinput-xxlarge class。それは可能ですか？

4

3 に答える 3

3

はい、可能ですが、実際には重複したものを使用しないでくださいid...これは無効なHTMLであり、JavaScriptの問題が発生します。class複製が必要な場合に使用します。

組み込みのrules()メソッドを使用してルールを追加し、によって割り当てますclass。 ドキュメントを参照してください。

次に、jQueryの.each()メソッドを使用して、同じを使用するすべての一致する要素にルールを適用しますclass。

HTML：

<form id="myform">
    <textarea class="myclass" name="field1" ></textarea>
    <textarea class="myclass" name="field2" ></textarea>
</form>

jQuery：

$('#myform').validate({
    // your other rules and options
});

// the following method must come AFTER .validate()
$('.myclass').each(function() {
    $(this).rules('add', {
        required: true,
        minlength: 5,
        maxlength: 500,
        messages: {
            required: "Required input",
            minlength: "Must be at least {0} characters",
            maxlength: "Must be less than {0} characters"
        }
    });
});

ワーキングデモ

また、この質問と同様に：

jQueryワイルドカードを使用してセットルールを検証し、ターゲットフィールドを検索します

于 2013-01-24T04:21:09.063 に答える
0

標準のjqueryセレクターを使用して、次のような要素にルールを追加できます。

$(".required").rules("add", { 
  required:true,  
  minlength:1
});
于 2013-01-24T04:17:00.057 に答える
0

データルール属性を介してルールを適用できます。これは、クリーンなコードを維持するための最も簡単な方法であり、おそらく最良の方法です...

例：

<input type="text" name="email" data-rule-required="true" data-rule-email="true">
<input type="text" name="password" id="passoword" data-rule-required="true" data-rule-minlength="6">
<input type="text" name="password-confirm" data-rule-required="true" data-rule-minlength="6" data-rule-equalsto="#password">

データ属性を介してメッセージを提供することもできます。

<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address" />

JavaScriptでは、次のように呼び出します。

$('#myform').validate();
于 2013-03-30T11:07:21.687 に答える