Validation with Jquery?

Hello!
wrote a script validate ,but can't deal with one problem.
When you click on the submit button the script needs to check if there are any mistakes in inutah and bring them as in the script above.
Tell me how to do it.

$(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а-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('the Name must contain more than 2 characters').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('Enter 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('Password must be longer than 5 characters').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('please Enter 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('the Name must contain more than 2 characters').slideDown("fast");
 $('.error-email').html('Enter email').slideDown("fast");
 $('.error-password').html('Password must be longer than 5 characters').slideDown("fast");
 $('.error-cvv').html('please Enter CVV').slideDown("fast");

 return false;
}
}

 }); // end submit

 }); // end script
June 10th 19 at 14:18
1 answer
June 10th 19 at 14:20
$('form').submit(function(){
//processing fields
//return true if the right of occupancy of the fields of the form and false in case of validation errors
});
I need to under the field with the error showed itself as an error in the script above - Rusty_Emard85 commented on June 10th 19 at 14:23
In such cases, is done for each field container (div for example), it is the field itself and the element that contains the error text. When an error occurs, then the container, add a class of some sort (e.g. has-error). Write css to display the error text only in the presence of this class in the container. That was a beautiful animations - better and more correct to use css3. - Monserrat commented on June 10th 19 at 14:26
Can still advise not to reinvent the wheel and use a ready-made solution, like bootstrap or semantic (I personally like more semantic) - https://semantic-ui.com/behaviors/form.html - Monserrat commented on June 10th 19 at 14:29
It's all I can and know.
I have a problem with how to get the error after pressing the submit only in those fields where it is - Rusty_Emard85 commented on June 10th 19 at 14:32
<form>
 <div class="field">
 <input type="text">
 <div class="errorText">Error filling</div>
</div>
<button>Send</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("a Very serious error fill");
}else{
$item.parent().removeClass("error");
}
});
});


Approximately - Monserrat commented on June 10th 19 at 14:35

Find more questions by tags JavaScriptjQuery