Jquery Validation not working inside Dialog

Question

I am popping up a JQuery dialog which has a form inside.

<div class="addcalevent">
    <form name="caleventform" id="caleventform" method="get" action="" accept-charset="utf-8">
        <div>
            <label>Title</label>
            <input type="text" id="txtcaltitle" name="title"  />
        </div>
       <button id="savecalevent"  >save</button>
</form>
</div>

When i popup the dialog, i am initializing the Jquery validation plugin.

    $(".addcalevent").dialog(
    {
        height: 300,
        width: 546
    }
    );
 $('#caleventform').validate({
        rules: {
            title: {
                required: true,
            }
        },
        messages: {
            title: {
                required: "pls enter user name"
            }
        }
    });

Ob button click .valid() always returns true.

$('.addcalevent').on('click', "#savecalevent", function (event) {
    if (!$('#caleventform').valid()) {
        return;
    }
});

What am i doing wrong ? I am using Jquery version 1.10.2 and Validate version 1.11.0, Does the validation works only with a "Submit" button ?

Thanks !

This what i am using for plugin.. <script type="text/javascript" src="ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/…> — user636525
– user636525, Commented Dec 1, 2013 at 18:03
@Bhadra .valid is always returning true when i evaluate. One thing i just noticed, when i put required="required" in the html, .valid() is working ! — user636525
– user636525, Commented Dec 1, 2013 at 18:05
Putting the HTML validation attribute required="required" into your code should have absolutely no effect since you already have the required rule properly declared within the .validate() method. I have no idea how you're examining .valid() but it's working fine for me here: jsfiddle.net/g65g6 — Sparky
– Sparky, Commented Dec 2, 2013 at 21:30

Sparky · Accepted Answer · 2013-12-02 21:26:35Z

I put your code into a jsFiddle and it clearly shows that .valid() working properly. It returns false when there are errors and true when the form is valid.

DEMO: http://jsfiddle.net/g65g6/

However, you should use the submitHandler callback function whenever you want to do something after clicking the button of a valid form. Use the invalidHandler callback to do something when the form is not valid. Use the .valid() method within a click handler for special cases where the button is not recognized as a submit button, or for programatically triggering/checking validity.

$(document).ready(function () {

    $(".addcalevent").dialog({
        height: 300,
        width: 546
    });

    $('#caleventform').validate({
        rules: {
            title: {
                required: true,
            }
        },
        messages: {
            title: {
                required: "pls enter user name"
            }
        },
        submitHandler: function(form) { // optional callback
            // fires on button click when form is valid
            // do any ajax here
            return false;
        },
        invalidHandler: function() { // optional callback
            // fires on button click when form is not valid
        }
    });

});

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

Documentation for all callback functions and options.

Ryley · Accepted Answer · 2013-12-02 16:46:17Z

1

If you want to do things when the form is valid, use the submitHandler option of Validate.

$("#caleventform").validate({
    rules: {
        title: {
            required: true
        }
    },
    submitHandler: function () {
        console.log('successful submit');
        $('.addcalevent').dialog('close');
        return false;
    }
});

See it working here: http://jsfiddle.net/ryleyb/N5kjc/

answered Dec 2, 2013 at 16:46

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Collectives™ on Stack Overflow

Jquery Validation not working inside Dialog

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related