how to stop error message repeat in jquery

Question

I have a form which enter a code and when I am enter a wrong code then error message is show see this

and when I am enter backspace then both error message show see this

So how I am stop this error message repeatation and show only once time

here is my code

$('#code_form').validate({ // initialize the plugin
    rules:
        {
            sms_code:
            {
                required: true,
                remote: {
                url: "ajaxfiles/code_check.php",
                type: "post"
             }
            }

        },
       messages:
        {
            sms_code:
            {
                required: 'Please enter code from sms code',
                remote: "Invalid code"
            }

        },
    submitHandler: function (form) {

            $(form).ajaxSubmit(
            {
                url: 'ajaxfiles/code_submit.php', 
                type: 'post',
                success: function(data)
                {

                    $("#code_form_div").hide();
                    $("#pswd_form_div").show();

                    $("#code_form").addClass('submited');
                }
            });
        },
        errorPlacement: function(error, element)
        {
            error.insertAfter(element.parent());
        }
});

Answer 1

You can make it simple. The invalid code you can check in code_check.php and display the ajax response on main page. Remove remote validation and change below code in submit handler and put a div with id success for display the result.

success: function (html){$('#sucess').html(html);}

Answer 2

You can try this way.

JS

$('#code_form').validate({ // initialize the plugin
    rules:
        {
            sms_code:
            {
                required: true,
                remote: {
                url: "ajaxfiles/code_check.php",
                type: "post"
             }
            }

        },
       errorLabelContainer: '#errors',
       messages:
        {
            sms_code:
            {
                required: 'Please enter code from sms code',
                remote: "Invalid code"
            }

        },
    submitHandler: function (form) {

            $(form).ajaxSubmit(
            {
                url: 'ajaxfiles/code_submit.php', 
                type: 'post',
                success: function(data)
                {

                    $("#code_form_div").hide();
                    $("#pswd_form_div").show();

                    $("#code_form").addClass('submited');
                }
            });
        }
});

HTML

<div id="errors"></div>
<form>
    ...
</form>

Here is a Document for errorLabelContainer