複数のテキストボックスに対するJavascriptのバリデーション

Question

jsを使用してテキストボックスを検証する方法がわかりません。私は10のテキストボックスを持っていますが、ユーザーは1から10までの数字を記入できますが、0は記入できません。ここには私が書いたjsがあります。いっぱい。

function submitIt() { 
    if (document.isForm.Student_ID.value == null) { 
     alert ("You must enter a Colleague ID."); 
     return false; 
    } else { 
     return true; 
    } 
} 

そして、こちらのフォームです.....

<form name="isForm" onSubmit="return submitIt()"> 
    <input name="Student_ID" type="text" id="idField1" /> 
    <input name="Student_ID" type="text" id="idField2" /> 
    <input name="Student_ID" type="text" id="idField3" /> 
    <input name="Student_ID" type="text" id="idField4" /> 
    <input name="Student_ID" type="text" id="idField5" /> 
    <input name="Student_ID" type="text" id="idField6" /> 
    <input name="Student_ID" type="text" id="idField7" /> 
    <input name="Student_ID" type="text" id="idField8" /> 
    <input name="Student_ID" type="text" id="idField9" /> 
    <input name="Student_ID" type="text" id="idField10" /> 
    <input name="SUBMIT" type="submit" /> 
</form> 

私は名前をすべて変更し、それぞれを確認することができることを実現する、しかし私はそれほど混乱を避けるためにしようとしています私のコードは、これを行うための最善の方法は興味があります。どんな助けでも感謝しています！

Answer 1

document.getElementsByNameでこれらすべてのテキストボックスのコレクションを取得できます。そして、それらをループし、少なくとも一方が記入されていることを確認します

var allTbs = document.getElementsByName("Student_ID"); 
var valid = false; 
for (var i = 0, max = allTbs.length; i < max; i++) { 
    if (allTbs[i].value) { 
     valid = true; 
     break; 
    } 
} 

DEMO

Answer 2

機能は、学生のテキストボックスのすべてで反復し、いくつかの要素が記入されている場合はtrueを返すされています。 http://jsfiddle.net/hhD2x/

Answer 3

あなたはjqueryのを使用することができます。その入力は上のスペースのみ:)

function submitIt() { 
     for(var i = 0, t = document.getElementsByName("Student_ID"), l = t.length; i < l; i++)  
     if(t[i].value && !/^\s+$/.test(t[i].value)) 
      return true; 

     return false 
    } 

デモが含まれている場合に対する保護。

function submit() 
{ 
     $('.student').each(function() { 
      if($(this).val() == '' || $(this).val() == null) 
      { 
       // your error message 
       return false; 
      } 

     } 
} 

この関数は学生のクラスを持つすべての要素をチェックjsの機能で、すべてのテキストボックスすなわち今

<input name="Student_ID" type="text" id="idField1" class="student" /> 

に共通のクラス名を追加します。

Answer 4

$('input[type="text"], select, 
    :input[type="date"], 
    :input[type="email"], 
    :input[type="radio"]').each(function() { 

    if ($.trim($(this).val()) == '') { 
    // your error message here 
    isValid = false; 
    } 

});