Field validation problem with ajax

Question

personal made a validation via ajax on my form of website that when the user does not fill in the field and tries to submit the form it takes the inputs and adds a red border until then ta right but when the fields are filled and it sends the form the borders do not disappear wanted that they disappear when the user fills the fields or when send the form it just leaves the this red tag follows a screen print of one of my form and the code I made:

this is what it looks like when I send it without filling it out

after I fill and send it continues with the edges and the message I added behind the modal you will be able to see that by sending it continues like this:

JS:

//Contact Us
$(".send-form").click(function (e) {
    e.preventDefault();

    var data = $('form').serializeArray();

    var cont = 0;
    $("#form .input-contact").each(function(){
        if($(this).val() == "")
        {
            $(".required-fields-contact").show();
            $(this).css({"border" : "1px solid #F00", "padding": "2px"});
            cont++;
        }
    });
    if(cont != 0)
    {
        return false;
    }

    //Ajax post data to server
    $('.loaderImage').show();
    $.ajax({
        type: 'POST',
        url: '/contato',
        data: data,
        dataType: 'json',
        success: function (data) {
            $('#modal-success').modal('show');
            $('.loaderImage').hide();
            $('form').trigger("reset");
        },
        error: function (data) {
            //console.log(data);
        }
    });
});

NOTE: Site link is at the beginning of the question if you want to test

Answer 1

Why not use a script already ready? So much simpler. It will do all the checking of when the field is or is not according to the rules. Index the https://jqueryvalidation.org/

Anyway, if you want to keep the solution current, your code should eliminate the markup you’ve added, more or less like this:

success: function (data) {
    $('#modal-success').modal('show');
    $('.loaderImage').hide();
    $('form').trigger("reset");

    $(".required-fields-contact").hide();        
    $("#form .input-contact").each(function(){
        $(this).removeAttr("style");
    });
},

However, I would recommend you to create a class to flag the error and then remove it:

$("#form .input-contact").each(function(){
    if($(this).val() == "")
    {
        $(".required-fields-contact").show();
        $(this).addClass("error");
        cont++;
    }
});

and:

success: function (data) {
    $('#modal-success').modal('show');
    $('.loaderImage').hide();
    $('form').trigger("reset");

    $(".required-fields-contact").hide();    
    $("#form .input-contact").each(function(){
        $(this).removeClass("error");
    });
},