6

I'm using 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 then popup with error appears. This is correct. Then if the user clicks to the selectbox 'state' the popup with error still appears (is not possible choose correct value). The real example is available at janzitniak.info/temp/test.php

This is not acceptable. How could I resolve this problem?

The solution described at JQuery form validation with alert popup - alert still being shown with a valid submit didn't help me, maybe I didn't understand that correctly.

Community
  • 1
  • 1
JanZitniak
  • 187
  • 1
  • 3
  • 15
  • I couldn't reproduce your problem. Probably, you want to clrify what browser you are using – Alexander Feb 10 '13 at 19:03
  • Hi Alexander. Thanks for your response. Please test my form at www.janzitniak.info/temp/test.php The first step: plase submits the form then the popup with error shows. Then choose any item from selectbox – JanZitniak Feb 10 '13 at 19:11
  • You should **not** be using a JavaScript `alert()`. In Safari, your code will create an infinite loop. – Sparky Feb 10 '13 at 19:15

2 Answers2

9

Use the onclick: false option to prevent the error from triggering before the state is selected. Also, you only need to use .text() instead of .html() because the alert() will not need to use the 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: Do not use this code in Safari or you will be stuck in an infinite loop. It seems like the alert() in Safari fires the errorPlacement callback function a second time after clicking "ok" button.

For a more modern user experience, I recommend a jQuery modal or tooltip plugin instead.

See this answer as an example: https://stackoverflow.com/a/14741689/594235

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Sparky thanks for your professional answer and real example on your page! It works ... – JanZitniak Feb 10 '13 at 19:33
  • @user1578360, You're very welcome. Please reconsider your use of the antiquated `submit()` in favor of a more modern technology like jQuery. – Sparky Feb 10 '13 at 19:35
  • 1
    Down-voter should post a better answer himself or at least point out the problem here. – Sparky Nov 27 '13 at 17:18
  • @Rupali, I can't possibly know why this doesn't work for you. If you have a problem, then please post a new question. – Sparky Apr 05 '17 at 14:54
0

Some minor correction to stop infinite loop, use keyup: false as other option.

$(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());
    }
});
});
Jay Ram Singh
  • 1