Проверка формы полей через массив

Question

Я начинаю с jQuery и пытаюсь сохранить много кода в форме проверки. Я подумал, чтобы поместить все поля формы в массив, использовать each () для циклического перемещения по массиву, чтобы увидеть, являются ли поля пустыми и возвращать ли ошибки (при необходимости).

Одна проблема; мой подход не работает ..

Я использую следующий метод

     var fields = [ "$('#name')", "$('address')" ];
     jQuery.each(fields,function(){
      if(this.val() == ""){
       alert(this.id+" is empty");
       return false;
      }
     });

Конечно, я могу проверить все поля отдельно, но поскольку у меня много форм, это будет довольно большой код.

Возможны ли мои мысли, и если да, то как?

Хорошо, вышеупомянутая проблема решена отлично, но теперь у меня есть новая

После того, как я проверил все поля, если они пусты, я хочу проверить, введен ли действительный адрес электронной почты. Я использую следующий код:

    $("#reservationForm").live("submit", function(f){
     $(".formError").hide();
     if(!$('#agree').is(':checked')){
      $("#agree").after('You need to agree with the terms on the right');
      f.preventDefault();
     }else{
      $("#reservationForm").find("input[type=email], input[type=tel], input[type=text]").filter(function(){
       if($(this).val() == ""){
        $(this).css("border","solid 1px red").after('Please fill in your '+this.id+'');
        $(this).find("first-child").focus();
        f.preventDefault();
       }else if(!/\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4}\b/.test($("#mail").val())){
        $("#mail").css("border","solid 1px red").after('Please enter a valid email address');
       }
      });
     }
    });

Проблема в том, что граница не становится красной, а сообщение, которое должно отображаться после поля электронной почты, не отображается. Сфокусировано только поле электронной почты, больше ничего.

О, и у меня действительно есть еще одна «проблема», потому что селектор первого ребенка, кажется, не работает. Вместо первого элемента последний элемент сфокусирован. (Я также попробовал «последнего ребенка», но это не помогло…)

Answer 1

Удалите '"' в массиве. Вы хотите сохранить ссылку на элемент, а не строку; -)

Кроме того, взгляните на:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Это отличный и простой в использовании плагин формы jQuery! О, и вы можете изменить .val () на .attr ("значение") (хотя val может быть допустимым, яне уверен)

О, и если это все еще не работает, попробуйте $ (this) вместо этого, а не 100% на способ, которым jQuery обрабатывает это более $ (this)

Answer 2

Как насчет нахождения пустых элементов в форме:

var emptyElements = $('#formId')
    .find(':text, :radio, :checkbox, select')
    .filter(function() { 
        var isEmpty = $(this).val() == '';
        if (isEmpty) {
            alert(this.id + ' is empty');
        }
        return isEmpty; 
    });
if (emptyElements.length > 0) {
    return false;
}

Также стоит проверить плагин проверки jQuery .

Answer 3

$.each($('form').serializeArray(), function(i, field) {
    if (field.value.length == 0 || field.value.match('regex of invalid syntax')) {
         // handle invalid data properly.
    }
})