3

jQueryを使用して自家製のバリデーターを構築しようとしています。jQueryに制限があると思います：jQuery値をjson変数に割り当て、jQueryを使用して、変数のクエリに適合する現在のページにDOM要素を追加すると、それらのDOMにアクセスする方法がないようです。 json変数のクエリに適合する要素がページに追加されました。

次のコードを検討してください。

var add_form = {
    $name_label: $("#add-form Label[for='Name']"),
    $name: $("#add-form #Name"),
    $description_label: $("#add-form Label[for='Description']"),
    $description: $("#add-form #Description"),
    $submit_button: $("#add-form input#Add"),
    $errors: $("#add-form .error"),
    error_marker: "<span class='error'>&nbsp;*</span>"
}
function ValidateForm() {
    var isValid = true;

    add_form.$errors.remove();

    if (add_form.$name.val().length < 1 ) {
        add_form.$name_label.after(add_form.error_marker);
        isValid = false;
    }
    if (add_form.$description.val().length < 1) {
        add_form.$description_label.after(add_form.error_marker);
        isValid = false;
    }

    return isValid
}
$(function(){
    add_form.$submit_button.live("click", function(e){
        e.preventDefault();
        if(ValidateForm())
        {
        //ajax form submission...
        }
    });
})

例はここで利用可能です：http：//jsfiddle.net/Macxj/3/

まず、htmladdフォームを表すjson変数を作成します。次に、フォームを検証する関数を作成します。最後に、フォームの送信ボタンのクリックイベントをフォームの検証にバインドします。

jQuery after（）メソッドを使用して、フォーム内のすべての無効なフィールドラベルの後に「*」を含むスパンを配置していることに注意してください。また、フォームを再検証する前に、フォームから前回の送信試行のアスタリスクをクリアしていることに注意してください（これが失敗します）。

どうやら、add_form。$ errors.remove（）;への呼び出し。$ errors変数は、作成時にクエリに一致したDOM要素のみを指すため、機能しません。その時点では、どのラベルにもerror_marker変数の接尾辞は付いていませんでした。

したがって、jQuery変数は、変数が最初に割り当てられたときに存在していなかったため、それらを削除しようとしたときに、クエリの一致する要素を認識しません。jQuery変数にeval（）メソッドがあり、それに含まれるクエリを再評価して、新しいDOM要素がそれに一致するかどうかを確認すると便利です。しかし悲しいかな...

助言がありますか？

前もって感謝します！

4

3 に答える 3

8

jQueryオブジェクトが「ライブ」ではない、つまり、jQueryオブジェクトの要素のセットが動的に更新されないというのは正しいことです。（これは良いことです。）

本当に任意のjQueryオブジェクトを更新したい場合は、オブジェクトの作成に使用するセレクターを次の場所から取得できます.selector。

var els = $('#form input');
els.selector // '#form input'

els = $(els.selector);したがって、DOMを再クエリするために行うことができます。

ただし、最初のセレクター（、、、などの関数）の後でコレクションを変更した場合、addまたはセレクターを使用せずに（を渡すことによって） jQueryオブジェクトを作成した場合は、セレクターは空であるか、正しくないか、または潜在的に無効になります。filterchildrenDOMElement.selector

古いjQueryオブジェクトを保持しないようにコードを再構築することをお勧めします。他の答えはいくつかの良い提案をします。

また、入力サーバー側も検証していることを確認してください。

于 2012-06-04T03:22:16.167 に答える
7

変更されるオブジェクトの場合、JSONオブジェクトに静的な値を参照させるのではなく、次の関数にします。

$errors: function() { return $("#add-form .error"); },

これは関数であるため、を呼び出すたびにエラーフィールドを再評価しますadd_form.$errors()。

于 2012-06-04T02:53:49.510 に答える
4

問題へのあなたのアプローチには多くの構造的な問題があります：

  1. グローバル変数の使用は避けてください

    検証しているページにフォームが1つだけあるとは限りません。ある日、いくつかのフォームがあると判断した場合はどうなりますか。変数add_formはグローバル変数であるため、競合する可能性があります。

  2. フォームの送信を検出するために送信ボタンのクリックイベントを使用しないでください。

    フォームがのようなjs呼び出し$("form").submit();またはEnterキーによって送信された場合はどうなりますか？

  3. 構成オブジェクトの作成時にオブジェクトが既に存在するかどうかわからない場合は、DOMオブジェクトの代わりにセレクターを保管してください。

  4. .live非推奨です。.on代わりに使用してください。

実際の問題を解決するのは3ですが、4つの問題すべてに対処することを強くお勧めします。

2の場合、バリデーターを添付するのに最適な場所は、送信ボタンではなく、フォームの送信イベントです。このようなもの：

$("#add-form").submit(function(event) {
    event.preventDefault();

    if (validateForm(this))
       $.ajax({
           url: $(this).attr("action"),
           data: $(this).serialize(),
           //ETC
       });
});

フォームへのアクセスもはるかに簡単になったことに注意してください。構成オブジェクトは、送信ボタンへの参照を保存する必要がなくなりました。

これで、構成オブジェクトを次のように簡略化できます。

{
    name_label: "Label[for='Name']",
    name: "#Name",
    description_label: "Label[for='Description']",
    description: "#Description",
    errors: ".error",
    error_marker: "<span class='error'>&nbsp;*</span>"
}

validateForm内では、これらのセレクターを次のように使用できます。

var $name_label = $(configuration.name_label, this); //Finds the label within the current form.

ここで、フォームごとに異なる構成パラメーターを許可するには、次のようなものを使用します。

function enableValidation(form, configuration) {
  
 $.extend(configuration, {
     //Default configuration parameters here.
 });

  function validateForm(form) {
     //Your original function here with modifications.
  }

  $(form).submit(funciton(e) {
      if (!validateForm(this))
        e.preventDefault();
  });
}

function enableAjax(form) {
   $(form).submit(function(e){
       if (!e.isDefaultPrevented()) {
           e.preventDefault();
           $.ajax(...);
       }
   });
}


$(function() {
   enableValidation("#add-form", {/*specialized config parameters here*/});
   enableAjax("#add-form");
});
于 2012-06-04T03:05:17.823 に答える