jQuery, проверяющий несколько полей формы

Question

Довольно новый для jquery, но я понимаю, что мой код может быть сжат. Он работает отлично, но есть лучший способ сделать это, потому что это похоже на избыточный код. У меня есть два поля ввода и текстовое поле, которое я проверяю ниже. Образцы кода было бы идеально, так как я все еще учусь, но любая помощь appreiacted:

$("form#designForm").submit(function(){ 

    if($("#ccDesignFirstName").val().length == 0){ 
     alert("Full Name field is required"); 
     $("#ccDesignFirstName").focus(); 
     return false; 
    }   

    if($(".telephoneInput").is(":visible")){ 
     if($("#ccDesignTelephone").val().length == 0){ 
      alert("Phone is required"); 
      $("#ccDesignTelephone").focus(); 
      return false; 
     } 
    } 

    if($("#ccDesignProblem").val().length == 0){ 
     alert("Question is required"); 
     $("#ccDesignProblem").focus(); 
     return false; 
    } 
}); 

Answer 1

Для перебора всех входов в форме вы можете сделать это:

$("form#designForm").submit(function(){ 
    var valid = true; 
    $("form#designForm :input").each(function(){ 
     //$(this) is the jquery object of the input. 
     //do your validation here 
     if($(this).val().length == 0){ 
      valid = false; 
     } 
     //some more validation if needed... 
    }); 
    return valid; 
}); 

Это использует JQuery [ : селектор входов] [1], чтобы получить все типы входов, если вы просто хотите текст, который вы можете сделать:

$("form#designForm input[type=text]") 

т.д.

Answer 2

Да, есть несколько различных стратегий для проверки формы, которые вы можете сделать. Мой личный фаворит - добавлять классы к элементам, которые вы хотите проверить.

Нужно, чтобы все поля не оставались пустыми? Добавить класс check-empty на входы. Нужно проверить проверку подлинности электронной почты? Добавьте класс email. В своем JavaScript вы можете использовать один селектор jQuery и перебирать каждый вход по категориям и следить за тем, чтобы каждая проверка проходила.

Я пошел немного за борт здесь и использовал .apply() для каждой функции. Честно говоря, этот метод не будет задерживаться, если вам нужно сделать что-то асинхронное (запрос AJAX на сервер, чтобы убедиться, что электронная почта уникальна, например).

Если вам необходимо проверить с помощью AJAX, вам необходимо будет использовать обратные вызовы, чтобы все было проверено. Вообще-то, что-то подобное случается один или два раза, поэтому нет необходимости слишком увлекаться этим. Если у вас действительно есть форма, очень тяжелая AJAX-вызов, вы можете рассмотреть возможность использования jQuery's $.Deferred.

Дайте мне знать, если возникнут какие-либо вопросы. Это всего лишь мой личный подход к проверке формы, я также очень много способов сделать это. Я считаю, что проверка с помощью правил CSS позволяет вам проверять поля и в других областях. И это довольно многоразово; проверка формы - это обычная задача в Интернете. Если у вас есть надежное решение, это просто вопрос применения его к вашей конкретной ситуации.