Код валидации формы, как написать?

Question

[Darkness]

Ребят, вообще не селен в этом, но нужно сделать. Просмотрел около 20 сайтов, 5 видео (20+мин), но так и не нашел. Нужна обычный код для валидации формы. Без плагина. Без картинок в инпате.
Т.е. есть одно поле email и все, добавлю класс для ошибки, чтобы использовать .addClass, и вниз нужно выводить ( не верный email), прошу помощи! В коммент добавил свой ужас
Спасибо!

Comments

[Darkness]

$(document).ready(function(){
		
  var validEmail = false;

  $(".personalsale").submit(function(event){
    event.preventDefault();

    var email = $("#email").val();

    if (email == "") {
      $("#email").parent().removeClass("errorInput").addClass("errorInput");	
      validEmail = false;	
    } else {
      $("#email").parent().removeClass("errorInput").addClass("errorInput");	
      validEmail = true;	
    }

    if(validEmail == true) {
      $(".personalsale").unbind('submit').submit();
    }

  });

});

Но как еще сообщение добавить под инпут не знаю, да и тут явно есть ошибки

[Сергей delphinpro]

такую валидацию можно сделать и без скриптов

<form>
  <input type="email" required>
</form>

[Darkness]

Сергей delphinpro, знаю, но нужно

[Алексей]

Darkness, добавить для ошибки блок с классом .hidden {display: none} и удалять класс когда необходимо показать ошибку, по проверке емайл я бы определился с символами и сделал через regexp (в качестве примера var pattern = /^\w.+[^\s][@][a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;)

[Darkness]

Алексей, не сможет дойти до меня как это сделать) То что с email да, но я думал в проверку закинуть "или не равен" и выше проиницилизировать регулярное выражение для email'a , но после оказыватся нельзя сказать " || != n , то делать то-то.. " , поэтому хз

[Алексей]

Не неравно а test или match введеного значения. Если совпало то делаем иначе нет.
Увы но я уже с телефона)

[FeST1VaL]

Darkness, Делаете блок , при установленном классе hidden display:none; когда происходит ошибка вы ищите например так:

P.S: это просто пример на скорую руку...

$('form').find('.form__alert').removeClass('hidden').html('Введите Email');

Answer 1

[ParaBellum577]

$(document).ready(function() {
  $('.class-email').blur(function() {
    if($(this).val() != '') {
      var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
      if(pattern.test($(this).val())){
        $(this).removeClass('error');
        $('#valid').text(''); 
      } else {
        $(this).addClass('error');  
        $('#valid').text('The field is required.');
      }
    }
  });
});

Comments

[Darkness]

Спасибо большое , буду разбирать код и гуглить что за что отвечает!

[ParaBellum577]

там где .class-email - впиши класс своего инпута.
там где #valid это айдти или класс какого-нибудь span к примеру, который будет выводить текст ошибки. собственно тут все просто)

[Darkness]

ParaBellum577, мог бы ты помочь со с span ?

[Darkness]

ParaBellum577, т.е. я правильно понял, просто создаю спан, и его id пишу там где #valid ?

[ParaBellum577]

Darkness, добавь спан под своим инпутом с каким-либо классом или id. Потом впиши его айдишник в коде валидации. И там же редактируй текст.

[ParaBellum577]

Там где text('The field is required.'); - это твой еррор месенж

[ParaBellum577]

Вот эта форма на рабочем примере

[Darkness]

ParaBellum577, Да , спасибо, я уже разобрался , да и добавил тут немного еще кое-чего, спасибо!