2016-07-12 5 views
0

equalToメソッドから現在の要素にアクセスする方法はありますか?下のコードでは、変更すると動作しますjQueryのvalidateメソッド:現在の要素へのアクセス

equalTo: "#" + $("#t2").parent().parent().find("input[name='thing1']").attr("id") 

しかし、私はむしろハードコードします。

私はstackoverflowを検索して、役立つ回答を見つけることができません。

注:これはこのフォームを作成する最善の方法ではありません。私は命名法について何もできません。

<!DOCTYPE html> 
<html> 
<head> 
    <!-- include jQuery and the validate plugin --> 
    <script> 
    $(document).ready(function(){ 
     $.validator.prototype.checkForm = function() { 
      this.prepareForm(); 
      for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) { 
       if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) { 
        for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) { 
         this.check(this.findByName(elements[i].name)[cnt]); 
        } 
       } else { 
        this.check(elements[i]); 
       } 
      } 
      return this.valid(); 
     } 

     $("#formthing").validate({ 
      rules: { 
       thing1: "required", 
       thing2: { 
        required: true, 
        equalTo: "#" + $(this).parent().parent().find("input[name='thing1']").attr("id") 
       } 
      }, 
      messages: { 
       thing1: "Please enter somthing", 
       thing2: { 
        required: "Please repeat somthing", 
        equalTo: "Be sure it's equal" 
       } 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <form id="formthing" method="post" action="http://mcclurg.co/"> 
     <div> 
      <div><label for="t1">Thing 1 </label><input type="text" name="thing1" id="t1" /></div> 
      <div><label for="t2">Thing 2 </label><input type="text" name="thing2" id="t2" /></div> 
     </div> 
     <br /><br /> 
     <div> 
      <div><label for="t3">Thing 1' </label><input type="text" name="thing1" id="t3" /></div> 
      <div><label for="t4">Thing 2' </label><input type="text" name="thing2" id="t4" /></div> 
     </div> 
     <br /><br /> 
     <input type="submit" value="Stuff man" /> 
    </form> 
</body> 
</html> 

答えて

0

新しい方法を挿入します。このメソッドは要素を受け取り、そこから検証を実行することができます。デフォルトのequalToメソッドの代わりにこれを使用します。

$.validator.addMethod("equalToPrevious", function(value, element) { 
    if(value) { 
     return $(element).val() === $(element).parent().parent().find("input[name='thing1']").val(); 
    } else { 
     return true; 
    } 
}); 

妥当性検査のルールとメッセージは必ず変更してください。

$("#formthing").validate({ 
     rules: { 
      thing1: "required", 
      thing2: { 
       required: true, 
       equalToPrevious: true 
      } 
     }, 
     messages: { 
      thing1: "Please enter somthing", 
      thing2: { 
       required: "Please repeat somthing", 
       equalToPrevious: "Be sure it's equal" 
      } 
     } 
    }); 

これは値を渡すように変更することができます(希望する場合は、探しているフィールドの名前のように)。

+0

、あなたが 'name'の属性を複製して作成した問題を回避するプロトタイプを書いてポイントを強調して良いでしょう。 – Sparky

0

根本的な問題は、フィールド名を複製していることです。 thing1という名前の2つのフィールドと、thing2という名前の2つのフィールドがあります。プラグインは、特にこのプラグインがすべての入力要素を追跡するためにname属性を使用するため、この井戸を処理することはできません。

ユニークnameを必須として指定するだけですべてが必要です。

DEMO:ご質問と回答の中でhttp://jsfiddle.net/15s6x8pm/

$("#formthing").validate({ 
    rules: { 
     thing1: "required", 
     thing2: { 
      required: true, 
      equalTo: "thing1" 
     }, 
     thing11: "required", 
     thing22: { 
      required: true, 
      equalTo: "thing11" 
     } 
    }, .... 
+0

私はこの解決策がより良いと思います。制約のために、私はフィールドの名前を変更することはできません。バリデーターに追加したプロトタイプでは、複数のフィールドを同じ名前でチェックできます。 – DMAC

関連する問題