Проверка формы Javascript

Question

Я пытаюсь выяснить, что было бы самым простым способом проверки необходимых полей без необходимости делать оператор if для имени каждого элемента. Возможно, просто с помощью цикла и проверки его класса.

То, что я пытаюсь выполнить это проверить только те, которые имеют имя класса, как «требуется»

<input name="a1" class="required" type="text" /> 
<input name="a2" class="" type="text" /> 
<input name="a3" class="required" type="text" /> 

Благодаря

Answer 1

Я бы порекомендовал вам использовать this javascript based css selector Wich получите все элементы определенного класса. Проверка формы так же, как вы упомянули.

Answer 2

Я использую плагин jQuery validation. Работает очень хорошо и соответствует вашему заявленному желанию только для атрибутов класса.

$(document).ready(function() { 
    $('form').validate(); 
}); 

Все, что требуется для настройки проверки после того, как у вас есть обязательные поля.

Answer 3

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

Это должно работать:

function validate() { 
    var inputs = document.getElementsByTagName("input"); 

    for (inputName in inputs) { 
     if (inputs[inputName].className == 'required' && inputs[inputName].value.length == 0) { 
      inputs[inputName].focus(); 
      return false; 
     } 
    } 

    return true;  
} 

позволяет также сказать, ваши входы в форме под названием «theForm»:

function validate() { 
    for (var i = 0; i < theForm.elements.length; i++) { 
     if (theForm.elements[i].className == "required" && theForm.elements[i].value.length == 0) { 
      theForm.elements[i].focus(); 
      return false; 
     } 
    } 

    return true; 
} 

Конечно, вы бы урезать значение и/или добавить соответствующую проверку логики для приложения, но я уверен, что вы можете получить эту идею из образца.

Вы также можете сохранить произвольные данные на самом входе и прочитать его с помощью метода getAttribute() на элементе. Например, вы могли бы иметь этот элемент в вашем HTML (регулярное выражение требует 3-значный номер):

<input name="a1" validate="true" regex="[0-9]{3}" type="text" /> 

вы могли бы использовать этот метод, чтобы запустить регулярное выражение в процедуре проверки.

function validate() { 
    for (var i = 0; i < theForm.elements.length; i++) { 
     var elem = theForm.elements[i]; 

     if (elem.getAttribute("validate") == "true") { 
      if (!elem.value.match(elem.getAttribute("regex"))) { 
       elem.select(); 
       return false; 
      } 
     } 
    } 

    return true; 
} 

Надеюсь, это поможет.

Answer 4

Образец для этого, который я использовал в течение длительного времени и хорошо зарекомендовал себя, обертывает элемент управления DIV или P и маркирует это как требуется.

<div class="form-text required"> 
    <label for="fieldId">Your name</label> 
    <input type="text" name="fieldName" id="fieldId" value="" /> 
</div> 

Это означает, что я могу выделить необходимые поля для проверки с помощью CSS-селектора.

.required input, .required select 

В JQuery, вы можете проверить вход с чем-то вроде этого:

$('form').submit(function(){ 
    var fields = $(this).find('input, textarea, select'); // get all controls 
    fields.removeClass('invalid'); // remove 
    var inv = $(this).find('input[value=""], select[value=""]'); // select controls that have no value 
    if (inv.length > 0) { 
    inv.addClass('invalid'); // tag wrapper 
    return false; // stop form from submitting 
    } 
    // else we may submit 
}); 

В простом Javascript было бы больше, чем я забочусь, чтобы напечатать, но вдоль линий:

var badfields = []; 
var fields = theForm.getElementsByTagName('input'); 
for (var i=0; i< fields.length; i++) { 
    if (fields[i] && fields[i].parentNode && fields.value == '' && 
     /(^|)required(|$)/.test(fields[i].parentNode.className)) { 
    badfields.push(fields[i]); 
    } 
} 
// badfields.length > 0 == form is invalid 

Самое непосредственное преимущество обертывания ярлыка и ввода (и необязательно: текст подсказки, ошибка ...) в качестве элемента управления, установленного таким образом, заключается в том, что вы можете применять стили CSS на входе и метке вместе.

.required input, .required select { 
    border : 1px solid red; 
} 
.required label { 
    color : #800; 
} 
.invalid input, .invalid select { 
    background-color : #f88; 
} 

Я рекомендую использовать готовые решения для вашей формы проверки, как вещи могут быстро добавлять на: Как вы проверки флажков? Могут ли быть установлены флажки? (EULA?) Как насчет переключателей, как вы их проверите?

Большинство решений по валидации также обеспечит сахар, например, проверку правильных данных (например, адресов электронной почты), а не проверку их наличия.

Answer 5

Я немного удивлен, что никто не упомянул YUI. Вы можете легко использовать метод getElementsByClassName класса Dom следующим образом:

var aElements = YAHOO.util.Dom.getElementsByClassName('required', 'input'); 
for (var i = 0; i < aElements.length; i++) 
{ 
    // Validate 
} 

Дополнительная информация метод доступен here и более общая информация является here