Clever Geek Handbook

JQuery Confirm plugin with warning popup - still appears - user cannot select correct value in select box

I am using the following code:

$().ready(function() {
    $('#state_form').validate({
        rules: {
            state: "required"
        },
        messages: {
            state: 
            {
                required: "The State is required!"
            }
        },          
        errorPlacement: function(error, element) {
            alert(error.html());
        }
    });
});

but if the user submits the form, an error popup appears. It's right. Then, if the user clicks the "select" button, an error popup appears (unable to select the correct value). A real example is available at janzitniak.info/temp/test.php

This is unacceptable. How can I solve this problem?

The solution described in jQuery form validation with warning popup warning shown with valid submission didn't work for me, maybe I didn't get it right.

+3


source to share


2 answers


Use the option onclick: false

to prevent the error from being triggered before the state is selected. Also, you need to use .text()

instead .html()

, because alert()

you won't need to use HTML anyway.

$(document).ready(function () {
    $('#state_form').validate({
        onclick: false, // <-- add this option
        rules: {
            state: "required"
        },
        messages: {
            state: {
                required: "The State is required!"
            }
        },
        errorPlacement: function (error, element) {
            alert(error.text());
        }
    });
});

Demo: http://jsfiddle.net/U6N3R/

CAUTION . Don't use this code in Safari or you are stuck in an infinite loop. It looks like alert()

Safari triggers the callback function a errorPlacement

second time after clicking "ok".



For a more modern UI, I recommend using jQuery modal or plugtip.

See this answer for an example: fooobar.com/questions/290140 / ...

+7


source


Some small correction to stop an infinite loop, use keyup: false as another parameter.



$(document).ready(function () {
$('#state_form').validate({
    onclick: false, 
    onkeyup: false,
    rules: {
        state: "required"
    },
    messages: {
        state: {
            required: "The State is required!"
        }
    },
    errorPlacement: function (error, element) {
        alert(error.text());
    }
});
});
0


source






More articles: