Сообщение об ошибке. Валидация формы?

Question

[Alibek Kulseitov]

Всем привет.
Как вызывать какой-то div блок при валидаций формы?
Например пользователь не ввел имя и сверху над инпутом вылазает "веедите ваше имя".
Я собираюсь подключать Этот

Вот мой скрипт валидаций

function checkForm(form1) {

  var $form = $(form1),
      checker = true,
      name = $("input[name='name']", $form).val(),
      phone = $("input[name='phone']", $form).val(),
      email = $("input[name='email']", $form).val();

  if($form.find(".name").hasClass("required")) {
    if(!name) {
      $form.find(".name").addClass("red");
      checker = false;
    } else {
      $form.find(".name").removeClass('red');
    }
  }
 if($form.find(".phone").hasClass("required")) {
    if(!phone) {
      $form.find(".phone").addClass("red");
      checker = false;
    } else {
      $form.find(".phone").removeClass('red');
    }
  }

  if(checker != true) { return false; }
}

Сейчас у меня при ошибке просто красный border.

Answer 1

[IceJOKER]

Я бы на вашем месте упростил бы код, в начале функции добавил бы удаление всех классов .red , а внизу просто добавлял бы их если поле не заполнено, код станет короче в разы.

и в конце нафиг проверка? просто верните checker

А насчет текста ошибки, то можно заранее добавить и скрыть, а потом показывает если есть ошибка. либо добавить динамически. для такой простой задачки использовать стороннюю библиотеку - bad idea

p.s. можно сделать код универсальным и укоротить:
$('input.required').each();
а еще лучше вариант использовать не класс .required, а атрибут required="required",

Comments

[littleguga]

>заранее добавить и скрыть
$('#alert_name').hide(); и потом $('#alert_name').show(), если на заполнено?
Это Вы имеете ввиду?

[IceJOKER]

littleguga: можно же через css скрывать, зачем лишний раз вызывать hide() ?
один раз можно в начало формы добавить, и если одно из полей не заполнено, то выделяем красным и пишем, что выделенное поле не заполнено.

[littleguga]

IceJOKER: как - "можно через css скрывать"? :before? или добавлением/удалением классов?

[IceJOKER]

littleguga: display :none; oO

[littleguga]

IceJOKER: но для переключения display, всё равно понадобится использовать же js? (либо добавление/удаления класса, либо изменение css)?

[IceJOKER]

littleguga: я имел в виду изначально скрывать с помощью css, а потом уже манипулировать с помощью JS

Answer 2

[zooks]

Красивая всплывающая подсказка. Но почему бы не использовать для валидации средства самого html?
www.w3schools.com/html/html_form_input_types.asp