How to prevent jQuery Validate from overwriting custom error message in predefined label

Question

I am trying to get jQuery Validate to display an element with my predefined error-message. But what it does is that it replaces the predefined message with it's default value. The reason tjhat it is important for me to work is that from the backend it should be possible to translate the error-messages in an undefined number of languages.

A html snippet

<select name="brand[]" id="brand_select" class="full-width" min="1">
    <option value="0"><?php echo __r('Brand','order')?> *</option>
    <?php foreach ($brands as $id => $brand): ?>
        <option value="<?php echo $brand->id?>" <?php echo select(__val($form_data,'brand',$n),$brand->id)?>><?php echo $brand->brand?></option>
    <?php endforeach; ?>
</select>
<label class="error" id="brand_select-error" for="brand_select"><?php echo __r('This field is required!!','validation')?></label>
<?php if ($bodytypes): ?>
    <select name="bodytype[]" class="full-width" min="1">
        <option value="0"><?php echo __r('Body type','order')?> *</option>
        <?php foreach ($bodytypes as $id => $bodytype): ?>
            <option value="<?php $bodytype->id?>" <?php echo select(__val($form_data,'bodytype',$n),$bodytype->id)?>><?php echo $bodytype->body_type?></option>
        <?php endforeach; ?>
    </select>
    <label class="error"><?php echo __r('This field is required','validation')?></label>
<?php endif; ?>
<input class="full-width" type="text" name="first_regdate[]" placeholder="<?php echo __r('First registration date','order')?> *" value="<?php echo __val($form_data,'first_regdate',0)?>" required/>
<label class="error"><?php echo __r('This field is required','validation')?></label>

The jQuery

$('#order_form_step_1').validate({
    errorElement: "label",
    errorPlacement: function(error,element) {
        return true;
    },
    invalidHandler: function(event, validator) {
        // 'this' refers to the form
        var errors = validator.numberOfInvalids();

        if (errors) {
            $("div.error").show();
        } else {
            $("div.error").hide();
        }

    }
});

But somehow, whatever message I fill in in the error-divs below the input fields, jQuery overwrites them.

Having different language-files or inline buildup of the validation code are not an option. I really need the predefined messages inside the HTML labels to show up, without jQuery overwriting them.

The jQuery Validate plugin creates and toggles its own message `label` elements. It's not designed to toggle your own labels. Typically, you create the custom messages using the `messages` option provided by the plugin. Why can't you simply put your PHP generated messages inside the JavaScript instead of the HTML? — Sparky, Aug 24 '14 at 17:20
Simply because I don't want to mix up JS and HTML. JS should be in an external file. — Bas Matthee, Aug 25 '14 at 19:17
Use the inline HTML attribute to set your custom message then: http://stackoverflow.com/a/16681452/594235 — Sparky, Aug 25 '14 at 19:39
Ouh...! Very nice! Didn't see that in the documentation.. Thanks!! — Bas Matthee, Aug 26 '14 at 14:24

score 1 · Accepted Answer · answered Aug 26 '14 at 14:49

I propose that you put your PHP that generates the custom messages into the inline attributes...

<input data-msg-required="<?php echo __r('This field is required','validation')?>" ...

That way, the jQuery Validate plugin can still handle the messages as normal.

How to prevent jQuery Validate from overwriting custom error message in predefined label

1 Answers1