Проверка вложенного номера телефона jQuery

Кто-нибудь знает, как использовать плагин проверки jQuery при циклическом просмотре входных данных? Единственный способ, которым я знаю, как заставить работать плагин проверки, — это запрос на отправку. Тем не менее, я работаю над формой, состоящей из нескольких частей, которая проверяет форму на каждом этапе и просто выделяет обязательные поля по мере прохождения пользователя. Я также хотел бы добавить проверку в этот процесс, просто не знаю, как это сделать. В идеале я хотел бы проверить больше, чем просто номера телефонов, возможно, формат электронной почты и reg exp. Вот код, который я сейчас использую:

function validateStep(step) {
  if(step == fieldsetCount) return;

  var error = 1;
  var hasError = false;
  $('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
    var $this       = $(this);
    var valueLength = jQuery.trim($this.val()).length;

    if(valueLength == ''){
      if($(this).hasClass('req')) {
        hasError = true;
        $this.addClass('hasError');
      }
      else
        $this.removeClass('hasError');
    } else {
      $this.removeClass('hasError');
    }
  });  
}

Любые идеи?


javascript validation jquery phone-number nested-loops
person Austin    schedule 25.11.2013    source источник
comment
Пробовали ли вы вызывать valid() для элементов одного шага, а не для всей формы?   -  person Jan    schedule 25.11.2013

Ответы (1)


arrow_upward
0
arrow_downward

Код в вашем вопросе не имеет для меня большого смысла. Если вы хотите использовать подключаемый модуль jQuery Validation, то проверка выполняется автоматически, вам не нужно вручную перебирать какие-либо входные данные.

Что касается многоступенчатых форм, то существует много возможных подходов. Я предпочитаю использовать отдельный элемент form для каждого шага. Затем я использую метод .valid() для проверки раздела перед переходом к следующему. (Не забудьте сначала инициализировать подключаемый модуль; вызовите .validate() во всех формах, готовых к DOM.)

Затем в последнем разделе я использую .serialize() для каждой формы и объединяю их в строку запроса данных для отправки.

Что-то вроде этого...

$(document).ready(function() {

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize()
           // ajax submit
           return false; // block regular form submit action
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

});

Важно помнить, что мои обработчики click выше не используют кнопки type="submit". Это обычные кнопки, расположенные либо вне тегов form, либо type="button".

Только кнопка на самой последней форме — это обычная кнопка type="submit". Это потому, что я использую встроенную в плагин функцию обратного вызова submitHandler только для самой последней формы.

ДЕМО-ПРОВЕРКА КОНЦЕПЦИИ: http://jsfiddle.net/j8vUt/

См. это для справки: https://stackoverflow.com/a/19546698/594235

person Sparky    schedule 26.11.2013