How to override jQuery Validation Plugin messages with default broswer alert

Question

I am running accross a situation here.

I have a form that fits in the design in such a way that I can't update de DOM inside the FORM to display validation messages.

So, I am wondering how I could replace custom jQuery Validation Plugin DOM messages with default browser alerts assuming the following code as example.

$("form").validate({
    rules:{
        myName:{
            required: true, minlength: 2
        },
        myEmail:{
            required: true, email: true
        },
        myMessage:{
            required: true, minlength: 10
        }
    },
    messages:{
        myName:{
            required: "Type you name",
            minLength: "Your name must be at least 2 characters long"
        },
        myEmail:{
            required: "Type you e-mail address",
            email: "Type a valid e-mail address"
        },
        myMessage:{
            required: "Type your message",
            minLength: Your message must be at least 2 characters long"
        }
    }
});

Thanks in advance!

Please explain what you mean by "default browser alerts". – Sparky Feb 10 '13 at 15:48 — Sparky, Feb 10 '13 at 15:48

score 3 · Answer 1 · edited May 23 '17 at 12:15

Your last custom message was missing the opening quotation mark, ".
Your custom messages should contain parameter placeholders, {0}, that are automatically replaced by the value of your rule.
You also misspelled the minlength rule within the custom messages option by using a capital L.

Try this code instead:

$("form").validate({
    rules:{
        myName:{
            required: true,
            minlength: 2
        },
        myEmail:{
            required: true,
            email: true
        },
        myMessage:{
            required: true,
            minlength: 10
        }
    },
    messages:{
        myName:{
            required: "Type your name",
            minlength: "Your name must be at least {0} characters long"
        },
        myEmail:{
            required: "Type your e-mail address",
            email: "Type a valid e-mail address"
        },
        myMessage:{
            required: "Type your message",
            minlength: "Your message must be at least {0} characters long"
        }
    }
});

Demo: http://jsfiddle.net/3JTNh/

Quote OP: "I am wondering how I could replace custom jQuery Validation Plugin DOM messages with default browser alerts"

Your question is very unclear, but the way to dynamically change your messages would be to dynamically change your rules by using the rules('add') method, and only specify the message(s) to change... Working Demo: http://jsfiddle.net/vkF9r/

* removed *

EDIT:

As per comments, the OP was originally asking for a JavaScript alert() which can be done using the errorPlacement callback function like this. Since error is an object, you use error.text() to only use its message.

    onkeyup: false,
    errorPlacement: function (error, element) {
        alert(error.text());
    },

I recommend setting onkeyup to false in order to negate a repeated alert on every keystroke. If you are using Safari, do not try this demo or you'll get stuck in an infinite loop (one shortcoming of using alert() in this case) http://jsfiddle.net/kxwYd/

BTW: I do not recommend ever using the antiquated JavaScript alert() within any website design.

Better/Recommended:

For a more modern user experience, you should instead integrate this with a jQuery modal or tooltip plugin like Tooltipster.

Working Example: http://jsfiddle.net/SfanE/

The following code is from my other answer here...

First, initialize the Tooltipster plugin (with any options) on all specific form elements that will display errors:

$(document).ready(function () {

    // initialize tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false, // allow multiple tips to be open at a time
        position: 'right'  // display the tips to the right of the element
    });

});

Second, use Tooltipster's advanced options along with the success: and errorPlacement: callback functions built into the Validate plugin to automatically show and hide the tooltips as follows:

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).data('tooltipsterContent', $(error).text());
            $(element).data('plugin_tooltipster').showTooltip();
        },
        success: function (label, element) {
            $(element).data('plugin_tooltipster').hideTooltip();
        }
    });

});

thanks for the time you spent, and thank you for the tips. Howerver, the code is still not working the way it is needed. When I mean "default browsers alert" I mean I don't want to append HTML to my page, I want an alert to be triggered alert('Message here'). It is ridiculous such a plugin being unable to trigger alerts without a flip flop option! — Gilberto Albino, Feb 10 '13 at 17:27
@GilbertoAlbino, that's because using `alert()`'s is no way to do a modern website with jQuery. Use a jQuery tooltip or modal plugin instead. See [the demo](http://jsfiddle.net/SfanE/) on this [SO answer](http://stackoverflow.com/a/14741689/594235) for an example. — Sparky, Feb 10 '13 at 17:36
Yes, the tooltip idea was exactly what I was trying to do right now. Thanks for advancing that for me! — Gilberto Albino, Feb 10 '13 at 17:49
@GilbertoAlbino, I've updated my answer with both a way to use an `alert()` (not recommended) and the preferred way with a jQuery tooltip plugin. Please accept my answer since it solved your question. Thanks. — Sparky, Feb 10 '13 at 18:04
thank you very much... but if using alert() I need to focus() the element after alert is closed... I will stay with tooltipster — Gilberto Albino, Feb 10 '13 at 20:50
@GilbertoAlbino, Yes , I agree... Tooltipster is the best way to go. However, as you can see by reading my answer, I've shown you how to do what you originally asked for **PLUS I also show you a better option with Tooltipster**, exactly like you want. You wouldn't have even known about how to use Tooltipster with this if not for my answer/comments/suggestions. There's no good reason not to click "accept" on this answer — Sparky, Feb 10 '13 at 21:17
@Sparky in errorPlacement Function alert Erorr message display only one at the submit time is it possible? — Ashish Mehta, Jun 19 '13 at 05:15

score 1 · Answer 2 · answered Feb 12 '13 at 16:46

Building off what Sparky suggested, if you prefer not to include a tooltip plugin, you can emulate that behaviour pretty closely using jQuery UI and a bit of CSS.

CSS:

label.error {
    background-color:white;
    color:red;
    position:absolute;
    border: 1px black solid;
    padding: 10px;
    box-shadow: 5px 5px 2px #888;
    z-index:1;
}

jQuery:

$('#myform').validate({
    errorPlacement: function (error, element) {
        error.insertAfter(element).position({
            my: 'left center',
            at: 'right center',
            of: element,
            offset: '5 0'
        });

    },
   //the rest of your validate options
});

Example here: http://jsfiddle.net/SfanE/1/

How to override jQuery Validation Plugin messages with default broswer alert

2 Answers2