How can I show error messages in order for jquery validation engine?

Question

HTML

<form id="formVa" method="post" style="margin-top:100px; margin-left:100px;">
    <label>
        Email
    <input name="user_email" value="" type="text" 
        data-validation-engine="validate[required,custom[email]]" 
        data-errormessage-value-missing="Required Field" 
        data-errormessage-custom-error="Invalid Mail" />
    </label>
    <label>
        Name
    <input name="user_name" value="" type="text" 
        data-validation-engine="validate[required]" 
        data-errormessage-value-missing="Required Field" />
    </label>
    <button type="submit">Submit</button>
</form>

JS

$('#formVa').validationEngine(
    'attach', {
        promptPosition : 'topRight:-90,15',
        scroll: false,
        autoHidePrompt: true,
        autoHideDelay: 2500,
        fadeDuration: 0.3,
        focusFirstField : false
    }
);

Code example

I use jquery validation engine for my forms and I want to show error messages in order. For example if email field is empty, show "Required Field" error message and if the user typed anything and email is incorrect, show "Invalid Mail" error message. But it show all messages together as below.

But I want it in order How can I do this?

Answer 1

Theres a property you can set to show only one error per field

    maxErrorsPerField: 1

So you can do something like this

$('#formVa').validationEngine(
    'attach', {
        promptPosition : 'topRight:-90,15',
        scroll: false,
        autoHidePrompt: true,
        autoHideDelay: 2500,
        fadeDuration: 0.3,
        focusFirstField : false,
        maxErrorsPerField: 1
    }
);

FIDDLE