Проверка Javascript для нескольких текстовых полей - PullRequest
Новая
       7

Проверка Javascript для нескольких текстовых полей

1 голос
/ 05 января 2012

У меня возникли проблемы с выяснением того, как проверить мои текстовые поля с помощью js.У меня есть 10 текстовых полей, пользователь может заполнить любое число 1-10, но не может заполнить 0. Вот js, которые я написал, но он возвращает true только если все 10 текстовых полей заполнены, а не просто проверяет, если одинзаполнено. 

    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>

Я понимаю, что могу изменить все имена и проверить каждое, но я пытаюсьчтобы избежать такого большого количества беспорядка в моем коде, и мне любопытно, лучший способ сделать это.Любая помощь приветствуется, спасибо!

Ответы [ 4 ]

5 голосов
/ 05 января 2012

Вы можете получить коллекцию всех этих текстовых полей с помощью 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

0 голосов
/ 31 июля 2016 
$('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;
  }

});
0 голосов
/ 22 января 2014

вы можете использовать JQuery. добавить общее имя класса для всех ваших текстовых полей, т.е. 

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

теперь в функции js 

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

       }
}

эта функция проверяет все элементы в классе ученика.

0 голосов
/ 05 января 2012

Функция выполняет итерацию по всем текстовым полям ученика и возвращает true, если какой-либо элемент заполнен.Защищено от этого, если входные данные содержат только пробелы:) 

   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 
   }

Демонстрация на: http://jsfiddle.net/hhD2x/

...