0

私はjQueryで検証機能に取り組んでおり、少し動けなくなっています。非常に長く、回避しようとしているハードコードされたフォーム値でいっぱいの作業バージョンがあります。現在、機能するものは次のとおりです。

$(document).ready(function(){
  var fname = $("#formFName");
  var lname = $("#formLName");

  fname.blur(validateFName);
  lname.blur(validateLName);

  function validateFName(){
    if(fname.val().length > 0){
      fname.removeClass("req_error");
      return true;
    }
    else {
      fname.addClass("req_error");
      return false;
    }
  }

  function validateLName(){
    if(lname.val().length > 0){
      lname.removeClass("req_error");
      return true;
    }
    else {
      lname.addClass("req_error");
      return false;
    }
  }
});

その部分はこれら 2 つのフィールドで問題なく機能しますが、全体をもう少し保守しやすい関数にカプセル化したいと思います。このようなもの：

$(document).ready(function(){

  $("#first_name").blur(validateField("first_name","text"));
  $("#last_name").blur(validateField("last_name","text"));
  $("#email_address").blur(validateField("email_address","email"));

  function validateField(formfield, type){
    var field = $("#" + formfield);
    switch(type) {
      case "text":
        if(field.val().length > 0){
          field.removeClass("req_error");
          return true;
        }
        else {
          field.addClass("req_error");
          return false;
        }
        break;
      case "email":
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        if(filter.test(field.val())) {
          field.removeClass("req_error");
          return true;
        else {
          field.addClass("req_error");
          return false;
        }
        break;
    }
  }
});

ただし、これを行うと、Firefox の JS エラー ログに次のエラーが表示されます。

エラー: ((f.event.special[r.origType] || {}).handle || r.handler).apply は関数ではありません ソース ファイル: /scripts/jquery-1.7.1.min.js 行: 3

残念ながら、そのエラーを Google で簡単に調べても、私にとって意味のあるものは何も得られませんでした。さまざまな場所でアラートを試してみたところ、適切なフォームフィールド名が実際にあるはずの場所に渡されていることが確認されましたが、jQuery にかなり慣れていない (そして JavaScript が得意ではない) ため、ここでちょっと損。

私を正しい方向に向けることができる人に感謝します。また、私のやり方が間違っていると思われる方がいれば、喜んで変更します。jQuery 検証プラグインを使用してみましたが、動的に作成されたフィールドもいくつか使用しています。残念ながら、非表示の必須フィールドが含まれていると、訪問者がフォームを送信できなくなります。

4

2 に答える 2

2

特定の要素の代わりに動作を追加することで、これを単純化できるように思えます。

<input type="text" id="someId" class="validate-text" />
<input type="text" id="someOtherId" class="validate-email" />

$('.validate-text').live('blur', function()
{
    $(this).removeClass('req_error');
    if($.trim(this.value).length < 1)
       $(this).addClass('req_error');
});

$('.validate-email').live('blur', function()
{
    // Same thing with the email validation logic
});

この方法では、特定のイベント ハンドラーを要素にアタッチする必要はなく、代わりにそれらのハンドラーを使用して目的の動作を確認できます。次に、必要な検証モードをマークするために、HTML 要素を特定のクラスでマークするだけです。

私があなたの質問を正しく理解したと仮定します。

于 2012-04-13T18:15:50.703 に答える
0

関数呼び出し式を .blur() に渡すことはできません。無名関数コンストラクターを渡すことができます。

$("#first_name").blur(function () {validateField("first_name","text");});

または、関数の名前を渡します。

function validateFirstName() {
    validateField("first_name","text");
}

* * *

$("#first_name").blur(validateFirstName));

クラスを使用してバリデーターをアタッチするという@Tejsの提案も良いものです。

于 2012-04-13T18:24:11.823 に答える