1

基本的な jQuery 検証をセットアップしようとしていますが、何も機能していないようです。ページを実行して送信すると、最初のテキスト ボックスが強調表示されますが、2 番目のテキスト ボックスのメッセージが概要に表示されます。2 番目のテキスト ボックスをクリックしてクリックすると、両方のボックスが強調表示されますが、2 番目のボックスのメッセージが 2 回表示されます。続いて送信ボタンをクリックすると、ボタンが押されている間は 2 番目のメッセージが表示されますが、ボタンが離されると非表示になります。

明らかに、私は何か重要なものを間違って設定しましたが、私の人生では何を見ることができません.

形：

<form id="formInput">    
    Some Input  <input type="text" id="someInput1" />
    Some Input2 <input type="text" id="someInput2" />

    <input id="btnSubmit" type="submit" />    
</form>

コード (document.ready ハンドラー内から実行):

$('form').validate({
    highlight: function (element, errorClass) {
        $(element).addClass("invalidElement");
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass("invalidElement");
    },
    errorClass: "errorMsg",
    errorContainer: '#errorSummary',
    errorLabelContainer: '#errorsList',
    wrapper: 'li',
    onkeyup: false,
    focusCleanup: false
});

$("#someInput1").rules("add", {
    required: true,
    messages: {
        required: "Some input 1 is required"
    }
});

$("#someInput2").rules("add", {
    required: true,
    messages: {
        required: "Some input 2 is required"
    }
});
4

2 に答える 2

2

上記のコードの問題は、jQuery 検証プラグインがすべての入力に名前を付ける必要があることです。

追加する

name="X" 
name="Y"

2 つのテキスト ボックスに固定事項を入力します。

Some Input  <input type="text" name="X" class="someInput1" />
Some Input2 <input type="text" name="Y" class="someInput2" />
于 2012-04-19T18:30:54.010 に答える
1

最終的にはさらにカスタマイズしたいので、すべてのコードを書いているかどうかはわかりませんが、例を最も基本的な形式で動作させたい場合は、次のものが必要です。

<form id="formInput">    
    Some Input  <input type="text" id="someInput1" class="required" />
    Some Input2 <input type="text" id="someInput2" class="required" />
    <input id="btnSubmit" type="submit" />    
</form>

$('#formInput').validate();

少なくとも、それから始めて、一度に1 つのカスタマイズされたオプションを追加して、何が起こっているかを確認できます。

編集：カスタムメッセージの場合（インラインルールを介して削除したことに注意してくださいclass）：

<form id="formInput">    
    Some Input  <input type="text" id="someInput1" name="someinput1" />
    Some Input2 <input type="text" id="someInput2" name="someinput2" />
    <input id="btnSubmit" type="submit" />    
</form>

$("#someInput1").rules("add", {
   required: true,
   messages: { required: "This input is required - learn2forminputn00b!!" }
});

別の方法 (ドキュメントから):

nameこのメソッドを使用すると、コンストラクターのフォーム フィールドによってルールとそれらのルールのメッセージを指定します。

$(".selector").validate({
   rules: {
     name: {
       required: true,
       minlength: 2
     }
   },
   messages: {
     name: {
       required: "We need your email address to contact you",
       minlength: jQuery.format("At least {0} characters required!")
     }
   }
})
于 2012-04-19T17:58:28.187 に答える