2012-04-11 10 views
0

JavaScriptのオブジェクト値を使用して簡単なフォームの検証をしようとしています。私はそれが "理想的"ではないことを知っていますが、私はただ鉄で覆われていなくても簡単な形で作業しています。私は、各フォームフィールドが値を持っていることを確認しようとしていますhttp://jsfiddle.net/6dXd7/3/javascriptオブジェクトでフォームフィールドを検証する方法は?

私のバイオリンの例を参照してください。その場合は、myObj.fieldIDの値をyesに設定します。

フォームが送信されたら、既存のすべてのmyObj.XXXを確認し、すべての値がyesであることを確認します。

私の例では、オブジェクトの作成に問題があります。送信ボタンを押したときに、名前を指定せずにすべてのオブジェクトを循環させる方法がわかりません。ここで

は、上記にリンクされているjsfiddle例のコードです:

<script> 
$(document).ready(function() { 
    var myObj = {}; 
    $("input.checkblank").blur(function() { 
     var inputID = $(this).attr("id"); 
     var contents = $("input#" + inputID).val(); 
     if (contents == "") { 
      $(myObj).data(inputID, "no"); 
     } else { 
      $(myObj).data(inputID, "yes"); 
     } 
    }); 
    $("#verify").click(function() { 
     if (myObj.first && myObj.second == "yes") { 
      // ***** Trying to get it to scan through ALL existing myObj's and make sure all their values are "yes" *****   
      $('.results').text('all good'); 
     } else { 
      $('.results').text('not good'); 
     } 
    }); 
}); 
</script> 

<input type="text" name="first" id="first" class="checkblank"><br /> 
<input type="text" name="second" id="second" class="checkblank"> 
<a href="#" id="verify">check</a><br /> 
<p class="results"> </p> 

+3

なぜ[jQuery Validation Plugin](http://bassistance.de/jquery-plugins/jquery-plugin-validation/)を使用しないのですか? – Sparky

+1

なぜプレーンオブジェクトでjQuery.data()を使用していますか?このメソッドは、データをDOM要素に 'data-attr'値として添付するためのものです。 – Mathletics

+1

jsFiddleはあなたのコードをデモンストレーションするのに最適ですが、あなたのコードをポストに入れておいてください。 – Sparky

答えて

1

あなたはjQueryのデータ内のフィールドの情報を格納し、後でなく、同じ場所でそれらをチェックしようとしていました。.. 。

var obj = {} 
$(obj).data('a','1'); 
console.log(obj.a); //this will log null, cause there's no attribute 'a' in 'obj' 
console.log($(obj).data('a')); //this will log '1' :] 

代わりにこれを行う、あなたはあなたにこのようなネイティブオブジェクトから属性にデータを格納する必要があります

var obj = {} 
obj['a'] = '1'; //obj.a = '1' work's too 
console.log(obj.a); //now it log '1' :] 

また、お使いの検証機能はsecondが存在し、"yes"に等しい場合firstmyObj内部に存在している場合にのみチェック...間違っています。 ] http://jsfiddle.net/6dXd7/5/

:ここ
$("#verify").click(function() { 
    var allFieldsOK = false; 
    for (var field in checkedFields) { 
     if (!(allFieldsOK = checkedFields[field])) break; 
    } 
    $('.results').text( allFieldsOK ? 'all good' : 'not good'); 
}); 

が、それはあなたのために働いていると、あなたはクラス checkblankで複数の入力フィールドを追加する場合は動作するはずです、あなたにjsFiddleアップデートです。だからあなたの検証機能は、次のようなものでなければなりません
+1

完全な答えについては、jsFiddleにのみ依存しないでください。リンクが死んでしまうと、あなたの答えは不完全になります。 – Sparky

+0

ありがとう、私はあなたの少し微調整したが、基本的にそれを使用しました。良い仕事。 – JROB

+1

@ Sparky672 thx、私はjsFiddleなしで役に立つように私の質問を編集しました:D –

0

この

$("#verify").click(function() { 
    var flag=true; 
    $('.checkblank').each(function(){ //check all elements with class checkblank 
     if($(this).val().length==0)  //set flag false if anyone of them is blank 
      flag=false;     
    }) 
    if (flag) { 
      $('.results').text('all good');  
     } else { 
      $('.results').text('not good'); 
     } 
}); 
この

$("#verify").click(.........}); 

を置き換えます

...それは動作するはずです

関連する問題