Валидация на Jquery?

Question

[UncleDenn]

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

$(document).ready(function () {

     $('#name, #email, #password, #cvv').unbind().blur(function() {

         var id = $(this).attr('id');
         var val = $(this).val();
         console.log(id);

       switch(id) {
            //name
            case 'name':
               
               var rv_name = /^[a-zA-Zа-яА-Я]+$/; 
               
               if(val.length > 2 && val != '' && rv_name.test(val)) {
                    $(this).addClass('not_error');
                    $('#check-name').animate({'opacity': '1'},400);
                   
                   if($('.error-name').css("display") == "block" && $(this).hasClass('error')) {
                        $(this).removeClass('error');
                        $('.error-name').slideUp("fast");
                   }
               } else {
                   $(this).addClass('error');
                   if ($('#check-name').css("opacity") == "1" && $(this).hasClass('not_error')) {
                      $(this).removeClass('not_error');
                      $('#check-name').animate({'opacity': '0'},400);
                   }
                  $('.error-name').html('Имя должно содержать более 2х символов').slideDown("fast");
               }

               
            break;

           // email
           case 'email':
               
               var rv_email = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
               
               if(val != '' && rv_email.test(val)) {
                    $(this).addClass('not_error');
                    $('#check-email').animate({'opacity': '1'},400);
                   
                   if($('.error-email').css("display") == "block" && $(this).hasClass('error')) {
                        $(this).removeClass('error');
                        $('.error-email').slideUp("fast");
                   }
               } else {
                   $(this).addClass('error');
                   if ($('#check-email').css("opacity") == "1" && $(this).hasClass('not_error')) {
                      $(this).removeClass('not_error');
                      $('#check-email').animate({'opacity': '0'},400);
                   }
                  $('.error-email').html('Введите email').slideDown("fast");
               }
               
           break;

          // password
          case 'password':
              if(val.length >= 5 && val != '') {
                  
                   $(this).addClass('not_error');
                   $('#check-password').animate({'opacity': '1'},400);   
                  
                  if($('.error-password').css("display") == "block" && $(this).hasClass('error')) {
                        $(this).removeClass('error');
                        $('.error-password').slideUp("fast");
                   }
               } else {
                   $(this).addClass('error');
                   if ($('#check-password').css("opacity") == "1" && $(this).hasClass('not_error')) {
                      $(this).removeClass('not_error');
                      $('#check-password').animate({'opacity': '0'},400);
                   }
                  $('.error-password').html('Пароль должен быть длинее 5 символов').slideDown("fast");
              }
               
          break;
               
         // cvv       
         case 'cvv':
              if(val.length >= 3 && val != '') {
                  
                   $(this).addClass('not_error');
                   $('#check-cvv').animate({'opacity': '1'},400); 
                  
                  if($('.error-cvv').css("display") == "block" && $(this).hasClass('error')) {
                        $(this).removeClass('error');
                        $('.error-cvv').slideUp("fast");
                   }
               } else {
                   $(this).addClass('error');
                   if ($('#check-cvv').css("opacity") == "1" && $(this).hasClass('not_error')) {
                      $(this).removeClass('not_error');
                      $('#check-cvv').animate({'opacity': '0'},400);
                   }
                  $('.error-cvv').html('Введите CVV').slideDown("fast");
              }
               
          break;

       } // end switch

     }); // end blur

 $('#send').click(function(e){
     if($('.not_error').length == 4)
     {
      location.reload() 
     } else {

         if($('#name, #email, #password, #cvv').hasClass('error') || $('#name, #email, #password, #cvv').val().length == 0) {
             $('.error-name').html('Имя должно содержать более 2х символов').slideDown("fast");
                               $('.error-email').html('Введите email').slideDown("fast");
                               $('.error-password').html('Пароль должен быть длинее 5 символов').slideDown("fast");
                               $('.error-cvv').html('Введите CVV').slideDown("fast");
         
        return false;
    }
     }

   }); // end submit

  }); // end script

Comments

[ой всё]

какая дикая свалка

Answer 1

[Александр Крупнов]

$('form').submit(function(){
//обработка полей
//возвращаем true при правильной заполненности полей формы и false в случае ошибки валидации
});

Comments

[UncleDenn]

Мне нужно чтобы под полем с ошибкой показывало саму ошибку как в скрипте выше

[Александр Крупнов]

UncleDenn, В таких случаях делается для каждого поля контейнер (например div), в нем само поле и элемент, который содержит текст ошибки. Когда возникает ошибка, то у контейнера, добавляется класс какой нибудь (например has-error). В css прописываем, чтобы отображать текст ошибки только при наличии данного класса у контейнера. Чтобы были красивые анимации - лучше и правильнее использовать css3.

[Александр Крупнов]

Еще могу посоветовать не изобретать велосипед и использовать готовое решение, типа bootstrap или semantic (мне лично нравится больше semantic) - https://semantic-ui.com/behaviors/form.html

[UncleDenn]

Это все я умею и знаю.
У меня проблем с тем как вывести ошибку после нажатия submit только в тех полях где она есть

[Александр Крупнов]

<form>
   <div class="field">
      <input type="text">
      <div class="errorText">Ошибка заполнения</div>
   </div>
   <button>Отправить</button>
</form>

.errorText{
   display:none;
}
.field.error .errorText{
   display:block;
}

$("form").submit(function(){
   $("input").each(function($item){
      $item = $($item);
      if(checkError($item)){
         $item.parent().addClass("error");
         $item.parent().find(".errorText").html("Очень серьезная ошибка заполнения");
      }else{
         $item.parent().removeClass("error");
      }
   });
});

Примерно так