jquery .validate() variable error message

Question

I am using multiple languages on this website and want to display the errors in the different languages. I was wondering if it is possible to use variables in the custom error messages.

Here is the snippet of the JavaScript code:

$('form').validate({
$.ajax({
    url: 'notification.php',
    dataType: 'json',
    success: function(data) {
        return notification = data;
    }
});
rules: {
    qty: {
        required:   true,
        digits:     true
    }
},
messages: {
    qty: {
        required:   notification['qty_error'],
        digits:     notification['qty_error2']
    }
},
invalidHandler: function () {
    alert(notification['error2']);
},
submitHandler: function(form) {
    $.ajax({
        url:    $('form').attr('action'),
        type:   'post',
        data: $('form').serialize(),
        success: function() {
            $.ajax({
                url: 'notification.php',
                dataType:'json',
                success: function(data) {
                    $('#notification .container').html('<div class="success" style="display: none;">'+ data.confirm1 + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
                    $('#notification .success').fadeIn('slow');
                }
            });

        }
    });
}
});

If not what is another way of doing it.

Sparky · Accepted Answer · 2013-08-22 19:16:53Z

You cannot place .ajax() inside of .validate() like you've done here...

$('form').validate({
    $.ajax({ ... });  // <-- remove this
    ...
});

Only the designated rules, options, and callback functions as per the jQuery Validate plugin documentation can ever go inside of .validate().

I see you've already included the same .ajax() code inside the submitHandler callback function. This is perfectly correct, so just remove the .ajax() as indicated above.

$('form').validate({
    // rules, options & callback functions
    ...
    submitHandler: function(form) {
        $.ajax({ ... });  // <-- ajax always belongs here
        return false;
    }
});

As far as your original question, yes, you can use variables in place of the messages.

$(document).ready(function() {

    var message_1 = "my custom message 1";

    $('#myform').validate({
        rules: {
            field1: {
                required: true
            }
        },
        messages: {
            field1: {
                required: message_1
            }
        }
    });

});

DEMO: http://jsfiddle.net/PWdke/

To change the messages dynamically (after the plugin is initialized) would require the .rules('add') method.

$(document).ready(function() {

    var message_1 = "my custom message 1",
        message_3 = "my custom message 3";

    $('#myform').validate({
        rules: {
            field1: {
                required: true
            }
        },
        messages: {
            field1: {
                required: message_1
            }
        }
    });

    // programatically over-ride initialized rules/messages below

    $('input[name="field1"]').rules('add', {
        required: true,
        messages: {
            required: message_3
        }
    });

});

DEMO: http://jsfiddle.net/PWdke/1/

Sparky · Accepted Answer · 2013-08-22 18:32:32Z

1

Your current script is syntactically incorrect, you can do something like

var validator = $('form').validate({
    rules: {
        qty: {
            required:   true,
            digits:     true
        }
    },
    messages: {
    },
    invalidHandler: function () {
        alert(notification['error2']);
    },
    submitHandler: function(form) {
        $.ajax({
            url:    $('form').attr('action'),
            type:   'post',
            data: $('form').serialize(),
            success: function() {
                $.ajax({
                    url: 'notification.php',
                    dataType:'json',
                    success: function(data) {
                        $('#notification .container').html('<div class="success" style="display: none;">'+ data.confirm1 + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
                        $('#notification .success').fadeIn('slow');
                    }
                });

            }
        });
    }
});
$.ajax({
    url: 'notification.php',
    dataType: 'json',
    success: function(data) {
        var notification = {
            qty: {
                required: data['qty_error'],
                    digits: notification['qty_error2']
            }
        };

        validator.settings.messages = notification
    }
});

edited Aug 22, 2013 at 18:32

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered Aug 22, 2013 at 17:23

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

4 Comments

Sparky Over a year ago

@koala_dev, please don't edit the code in somebody else's answer.

Sparky Over a year ago

Arun, putting the .ajax() by itself... won't this just cause an ajax submission immediately upon page load? He already has similar .ajax() inside his submitHandler callback function.

user2708296 Over a year ago

thanks all for the help but I still have one issue. Since the variables are stored originally in php and changed based on the language chosen how do i convert the php variables into javascript variables? This is why i used the Ajax at the start because I couldn't think of another way.

omma2289 Over a year ago

@Sparky Sorry, I just thought it was a little overlook that I could easily fix, won't do it again.

Roger Barreto · Accepted Answer · 2013-08-22 17:23:46Z

0

Syntax error at:

$('form').validate({
$.ajax({
    url: 'notification.php',
    dataType: 'json',
    success: function(data) {
        return notification = data;
    }
});

Separate your ajax from validate...

$.ajax({
    url: 'notification.php',
    dataType: 'json',
    success: function(data) {
        return notification = data;
    }
});

$('form').validate({
    /*rules: ... */
})

answered Aug 22, 2013 at 17:23

Roger Barreto

2,2841 gold badge19 silver badges24 bronze badges

1 Comment

Sparky Over a year ago

He doesn't need to "separate". .ajax() belongs inside the plugin's submitHandler callback function. Putting it alone will cause an ajax submission on page load.

Collectives™ on Stack Overflow

jquery .validate() variable error message

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related