remove red border if field not in the object when the user resubmit

i'm working on a form validation function using jquery and every thing is fine, just i want to know how can i remove input red borders when the user correct the form and resubmit again since i use ajax.

my function use two parameters the first one is the notification title, and the second one is an object contain the input name and the error message, like that

{"inputName":"Input Error Message"}

and this is the function

function _formValidation(errorTitle, errorMessage){

var errorRender = '';

$.each(errorMessage, function(i, item){
    $("[name='"+i+"']").css('border', '1px solid red');
    errorRender += '<li>'+item+'</li>';
});

return _showNotification(errorTitle, errorRender);
}

1 answer

  • answered 2019-04-15 06:09 Solomon Tam

    A better way to do this is to put css class to your input field when there is any validation error. So that you can remove it using css selector next time.

    For exmaple:

    CSS:

    .validation-error{
        border: 1px solid red;
    }
    

    Call this when user submit the form

    $('.validation-error').removeClass('validation-error');
    

    Update your formValidation function to add CSS class instead of adding inline style:

    function _formValidation(errorTitle, errorMessage){
    
    var errorRender = '';
    
    $.each(errorMessage, function(i, item){
        $("[name='"+i+"']").addClass('validation-error');
        errorRender += '<li>'+item+'</li>';
    });
    
    return _showNotification(errorTitle, errorRender);
    }