Как проверить форму с помощью jQuery?

Question

Я пытался найти ответ в других вопросах, но на самом деле ничего не получалось -.- Как-то я ненавижу JavaScript ... В любом случае! Мой код выглядит так:

function validate()
{
 if ($(":input").length == 0) 
 {
  $(":input").addClass("notvalid");
  return false;
 }
 else
 {
  $(":input").removeClass("notvalid");
  return true;
 } 

 return true;
}

$(":input").blur(validate());
$(":input").keyup(validate());

$("#customForm").submit(function(){
 if(validate()){
  return true;
 }
 else
 {
  return false;
 }
});

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

Это не работает. Консоль ошибок Firefox говорит что-то вроде: неизвестный псевдокласс или псевдоэлемент 'input'. Что это значит?

Answer 1

Вы всегда можете использовать AJAX для проверки ваших полей, если вы более знакомы с серверными сценариями, такими как PHP.

Возвращаясь к JS, я думаю, что вы хотите достичь:

$("input:text").bind("blur, keyup", function(){
  if($(this).val().length > 0){
    //Valid not empty
    $(this).removeClass("notvalid");     
  }else{
    //invalid empty
    $(this).addClass("notvalid");
  }
});

$("#customForm").submit(function(){
  $("input:text").keyup(); //triggers the keyup event on input fields 
                         //which then validates your fields according the
                         //code above.

  if($("form .notvalid").length > 0){
    //You got some invalid fields in form

    return false;
  }else{
    //All fields are valid continue

    return true;
  }

});

это может выглядеть совсем иначе, чем ваш подход, но если вы хотите изучить jQuery, лучше ознакомиться с ним. Я прокомментировал некоторые процессы, но если у вас есть какие-либо сомнения в методах или функциях, использованных в приведенном выше коде, просто зайдите на Google. Удачи!

Answer 2

Вместо:

function validate()
{
 if ($(":input").length == 0) 
 {
  $(":input").addClass("notvalid");
  return false;
 }
 else
 {
  $(":input").removeClass("notvalid");
  return true;
 } 

 return true;
}

Использование:

function validate()
{

$(":input").each(function(){
  if ($(this).val() === '')
  {
    $(this).addClass("notvalid");
    return false;
  }
  else
  {
    $(this).removeClass("notvalid");
    return true;
  } 
});

 return true;
}

Answer 3

Ошибка говорит о том, что jQuery не знает, какие элементы выбрать с помощью :input. Просто замените :input, но input:text в ваших селекторах. Вы также можете взглянуть на плагин jquery.validate , который упростит вашу логику проверки. На сайте есть много демонстраций, которые должны помочь вам начать работу.

---

UPDATE:

Моя ошибка. : селектор ввода согласно документации.

Answer 4

Если вы уже используете jQuery, вам действительно следует использовать плагин jquery.validate, как сказал Дарин.

Это сделает ваш код намного чище и проще для добавления стандартных правил проверки, таких как действительный адрес электронной почты, URL-адрес, минимальная длина, максимальная длина и т. Д. Также устраняет необходимость добавлять и удалять классы, поскольку это делает за вас.