How to remove the classes after validation feedback forms jQuery?

Hello, help please with a task!
There is a feedback form with jQuery & Jquery Validation?
When you change form, you receive illumination, that is spelled out in the CSS styles for error classes & valid added Jquery Validation. However after removing all characters from the field error classes & valid not disappear.
How can I fix it? After sending deleted, everything is OK!
5e99c69eacdf0480410736.jpeg

$(document).ready(function() {
 $('[data-submit]').on('click', function(e) {
e.preventDefault();
$(this).parent('form').submit();
})
$.validator.addMethod(
"regex",
 function(value, element, regexp) {
 var re = new RegExp(regexp);
 return this.optional(element) || re.test(value);
},
 "Please check your input."
);

 // The validation function and display messages
 valEl function(el) {

el.validate({
 rules: {
 tel: {
 required: true,
 regex: '^([\+]+)*[0-9\x20\x28\x29\-]{5,20}$'
},
 name: {
 required: true
},
 email: {
 required: true,
 email: true
}
},
 messages: {
 tel: {
 required: 'required Field',
 regex: 'your Phone may contain symbols + - ()'
},
 name: {
 required: 'required Field',
},
 email: {
 required: 'required Field',
 email: 'Invalid format E-mail'
}
},

 // Start checking id="" forms
 submitHandler: function(form) {
$('#loader').fadeIn();
 var $form = $(form);
 var $formId = $(form).attr('id');
 switch ($formId) {
 // If form id="goToNewPage" - doing:
 case 'goToNewPage':
$.ajax({
 type: 'POST',
 url: $form.attr('action'),
 data: $form.serialize(),
})
 .always(function(response) {
 //link to the thank you page redirect
 location.href = 'https://';
 //send goals in Y. the Metric and Google Analytics
 ga('send', 'event', 'masterklass7', 'register');
yaCounter27714603.reachGoal('lm17lead');
});
break;
 // If form id="popupResult" - doing:
 case 'popupResult':
$.ajax({
 type: 'POST',
 url: $form.attr('action'),
 data: $form.serialize(),
})
 .always(function(response) {
 setTimeout(function() {
$('#loader').fadeOut();
 }, 800);
 setTimeout(function() {
$('#overlay').fadeIn();
$form.trigger('reset');
 $('input, textarea').removeClass('error valid');
 //line to allegiane goals in Y. the Metric and Google Analytics
 }, 1100);
 $('#overlay').on('click', function(e) {
$(this).fadeOut();
});
});
 if($('*').is('#myModal')) {
$('#myModal').arcticmodal('close');
};
break;
}
 return false;
}
})
}

 // Triggers the validation forms, if they have a class .js-form
 $('.js-form').each(function() {
valEl($(this));
});

});
April 19th 20 at 12:34
2 answers
April 19th 20 at 12:36
Solution
1. Very strange to pull the whole libo in the project to make validation forms when there is a native validationwhere you can do the same thing in a few lines of code.
2. You need to frame the handler to change the text field.
$(':input').on('input keyup change paste', function(){
 if($(this).hasClass('error')) {
$(this).removeClass('error');
}
});
$(':input').on('blur', function(){
 if($(this).val() == ") {
$(this).removeClass('error');
}
});
Thank you very much, it works! - Maurine60 commented on April 19th 20 at 12:39
April 19th 20 at 12:38
freelance
Thank you, very helpful! - Maurine60 commented on April 19th 20 at 12:41

Find more questions by tags HTMLjQueryCSS