Open modal when jQuery validation remote fails

Question

I'm using the jQuery validation plugin, and it works great.

I want to be able to both display a message and trigger a modal (alert() in the example) whenever the remote ajax fails. I can't figure out how to do both. Now, it triggers the alert() as expected, but also appends the error message "Please fix this field", which should be my own custom error message.

Here's what I've got:

$("#adresse-form").validate({

        errorElement: "span",

        rules: {

            navn: {
                required: true,
                minlength: 5,
                maxlength: 25
            },
            tlf: {
                required: true,
                digits: true,
                minlength: 8,
                remote: {
                    url: "/ajax/check_tlf",
                    type: "post"
                }
            }
        },

        messages: {

            navn: "Field Name is required",
            tlf: {
                required: "Field tlf is required!",
                remote: function () { // i want to add the message aswell, not just the alert

                    alert("failed - tlf is already taken!");
                }
            }

        },
        submitHandler: function(form) {
            doSomethingGreatOnSuccess();
        },

        errorPlacement: function (error, element) {
            error.appendTo(element.parent());
        }

    });

score 2 · Answer 1 · edited Feb 08 '13 at 23:35

2

I never knew that a message could be a function, normally a message is a string. However, as you have demonstrated, a message can be a function. The reason that you are not getting a message displayed is that if a message is a function, it must return a string.

rules : {...}
messages: 
{
    tlf: 
    {
        required: "Field tlf is required!",
        remote: function (val) 
        {
           alert("failed - " + val + " is already taken!");
           return "remote validation failed";
        }
    }
}

edited Feb 08 '13 at 23:35

Sparky

98,165
25
199
285

answered Feb 08 '13 at 14:41

politus

5,996
1
33
42

Although, you may want to construct a jsFiddle and test this out first... I got my browser stuck in an infinite loop using this code. http://jsfiddle.net/zDxgA/ – Sparky Feb 08 '13 at 14:51
So far I'm only seeing it in Safari... clicking "OK" on the `alert()` triggers a new `alert()`... infinitely. You can't get out of the loop. Therefore, on second thought, I would not recommend using a function inside of a `message`; at least not with an `alert()`. – Sparky Feb 08 '13 at 15:05
It's not supposed to be an alert, but instead trigger a modal/popup with some information. Would that change anything? As it is right now, in Chrome the alert() only works once, until the page is reloaded. – nielsstampe Feb 08 '13 at 15:07
`remote: function (val) { $('#myModal').reveal(); return "remote validation failed"; }` The returned string works everytime, but the .reveal() only fires the first time, after the page is loaded. Can't figure out why. – nielsstampe Feb 08 '13 at 15:09
@nielsiano, please construct a jsFiddle demo which includes the modal. – Sparky Feb 08 '13 at 15:17

Sparky · Answer 2 · 2013-02-08T15:48:03.727

2

Quote OP comment: "The returned string works everytime, but the .reveal() only fires the first time, after the page is loaded."

I think you're only getting the modal one time because the Validate plugin only constructs the message one time (then uses hide/show). If you want it fired off every time, try the highlight callback function instead. Use in conjunction with onkeyup and onfocusout set to false.

onkeyup: false,
onfocusout: false,
highlight: function(element, errorClass) {
   if ($(element).attr('name') === 'remotefieldname') {
       $('#myModal').reveal();
   }
}

Demo: http://jsfiddle.net/NFRvT/1/

edited Feb 08 '13 at 15:48

answered Feb 08 '13 at 15:20

Sparky

98,165
25
199
285

It still only fires the alert() or reveal() once pr. pageload, both locally and on the jsfiddle example. – nielsstampe Feb 08 '13 at 15:28
@nielsiano, see my edit. `highlight` will fire off every time but I'm getting it stuck in an infinite loop with Safari again. Maybe it will work better with your modal. – Sparky Feb 08 '13 at 15:34
I really appreciate your effort. Now it triggers everytime, but keeps doing it, even if the second input is correct and shouldn't trigger the error. Same with modal or alert. – nielsstampe Feb 08 '13 at 15:37
@nielsiano, Have you tried disabling `onkeyup` and `onfocusout` so that the validation only triggers on the submit event? http://jsfiddle.net/exs5c/1/ – Sparky Feb 08 '13 at 15:44
That works, but I would rather not disable onkeyup and onfocusout, I like those features. Is there any other way around this? How about using addmethod and creating the ajax call and message inside that? Would that be doable? – nielsstampe Feb 08 '13 at 16:07
@nielsiano, I don't think so. `addMethod` creates a rule that returns a boolean. Looking back at your comment about the second field triggering it... If the first field remains invalid, it's going to get re-fired because of the `onkeyup` event on any field. – Sparky Feb 08 '13 at 16:14
I've answered below. That's how I got it to work using the addMethod. – nielsstampe Feb 08 '13 at 16:55

score 1 · Accepted Answer · edited May 23 '17 at 11:48

Here is how I got it working:

jQuery.validator.addMethod("avail",function(value,element){
    var isSuccess = true;

    $.ajax({
        url: "/avail",
        type: 'POST',
        data: { tlf: value },
        async: false,
        success: function (msg) {
            isSuccess = msg === "true" ? true : false;
            if (!isSuccess) {
                $('#myModal').reveal();
            }
        }
    });
    // return isSuccess;
});

And in the rules:

tlf: {
                required: true,
                digits: true,
                minlength: 8,
                avail: true
            }

And the messages:

tlf: {
                required: 'Must enter phone number',
                avail: 'Phone number is already taken!'
            },

To anyone with similar problems, I found quite alot of help here: https://stackoverflow.com/a/2628442/839716

Open modal when jQuery validation remote fails

3 Answers3

Linked