Search code examples
javascriptjqueryjquery-validation-engine

How to overwrite a default message for a default validator?

One of the legacy applications where I work is using Inline Form Validation Engine 2.6.2 aka jQuery Validation Engine. I need to set a custom message for a default validator. Here is all I have tried without success it just does not work since the default message still showing up.

Here is the HTML:

<input type="checkbox" name="agreement" value="1" id="agreement_0" class="validate[minCheckbox[1]]">
<input type="checkbox" name="agreement" value="1" id="agreement_1" class="validate[minCheckbox[1]]">

And the Javascript/jQuery:

// Use the data-errormessage-range-underflow attribute on the inputs
// Ex:
<input type="checkbox" name="agreement" value="1" id="agreement_0" class="validate[minCheckbox[1]]" data-errormessage-range-underflow="custom error msg">

// Use the default data-* attributes and the -range-underflow
// Ex:
<input  type="checkbox" 
        name="agreement" 
        value="1" 
        id="agreement_0" 
        class="validate[minCheckbox[1]]" 
        data-errormessage-range-underflow="custom error msg"
        data-errormessage-custom-error="custom error msg"
        data-errormessage="custom error msg"
>

// Initialize the object with a custom message
// Ex:
<input  type="checkbox" 
        name="agreement" 
        value="1" 
        id="agreement_0" 
        class="validate[minCheckbox[1]] someclass" 
        data-errormessage-range-underflow="custom error msg"
        data-errormessage-custom-error="custom error msg"
        data-errormessage="custom error msg"
>

$("#theform").validationEngine({'custom_error_messages' : {
        '.someclass': {
            'range-underflow': {
                'message': "custom error message"
            }
        }
    }
});

// Use the title attribute and add the custom message there
<input type="checkbox" 
       name="agreement" 
       value="1" 
       id="agreement_1" 
       class="validate[minCheckbox[1]]" 
       title="custom msg">

None of them worked for me, instead of shown the custom message the default ones is shown:

enter image description here

Does any knows how to achieve this? It's driving me crazy!

Solution

  • The newer kind of configuration, based on data attributes, replaces the one that is based on the class attribute, so you must go all the way, and use the data-validation-engine attribute for that purpose:

    $("form").validationEngine();
    body { margin: 20px }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.2/languages/jquery.validationEngine-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.2/jquery.validationEngine.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.2/validationEngine.jquery.min.css">

<form>
    Confirm you have read and agree:<br>
    <input type="checkbox" name="agreement" value="1"
           data-validation-engine="validate[minCheckbox[1]]" 
           data-errormessage-range-underflow="Custom error msg">
    I have read and agree<br>
    <button>Submit</button>
</form>