Проверка формы 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

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

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

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 (регулярное выражение требует трехзначного числа):

<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 2

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

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

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

Answer 3

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

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

Более подробная информация о методе доступна здесь и более общая информация здесь

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

Я бы порекомендовал вам использовать этот селектор CSS на основе JavaScript , который получит все элементы определенного класса. Подтверждение формы так же, как вы упомянули.