jQuery Validation plugin doesn't work in jQuery UI modal window

Question

I'm trying to validate a form within a jQuery UI modal box, but it looks like jQuery Validation doesn't want to work with modal windows or I don't really know where to put this validation code.

That function $("#create_form").validate worked fine when I used it within $document.ready(.

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Modal form</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />


    <script>

$(function() {

     $( "#dialog-form" ).dialog({
         autoOpen: false,
         height: 500,
         width:  400,
         modal: true,

         buttons: {

            Submit: function() { 

                $("#create_form").validate({

                    //submitHandler: function(form) {
                    //  doAjaxPost();
                    //},

                    rules:{
                        name:{
                            required: true,
                            minlength: 3,
                            maxlength: 16,
                        },
                        password:{
                            required: true,
                            minlength: 3,
                            maxlength: 16,
                        }, 

                   },
                   messages:{
                        name:{
                            required: "Login - is a mandatory field",
                            minlength: "Name should contain minimum {0} symbols",
                            maxlength: "Maximum symbols - {0}",
                        },
                        password:{
                            required: "Password - is a mandatory field",
                            minlength: "Password should contain minimum {0} symbols",
                            maxlength: "Password should contain maximum {0} symbols",
                        },

                   },

                });

                //$( this ).dialog( "close" );
            },

            Cancel: function() {
                $( this ).dialog( "close" );
            }
         },
         //close: function() {
         //allFields.val( "" ).removeClass( "ui-state-error" );
         //}
 });

     $( "#create-user" )
     .button()
     .click(function() {
     $( "#dialog-form" ).dialog( "open" );
     });

});

</script>

</head>
<body>

<!-- Create user form -->
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form id="create_form">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>


<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">Create new user</button>
</body>
</html>

Is the form present on the page when it loads? Or is it "created" when the user triggers the pop-up? — adamdehaven
– adamdehaven, Commented Mar 4, 2013 at 14:14
A pop-up window is created by pressing this button <button id="create-user">Create new user</button> And I want to validate user's input on Submit click — gabriel angelos
– gabriel angelos, Commented Mar 4, 2013 at 14:17

Sparky · Accepted Answer · 2013-03-04 15:56:06Z

I see you've put .validate() inside of the submit button for the dialog box.

.validate() is the code that initializes the plugin. You are supposed to put it only inside a DOM ready, not much different than any other jQuery plugin. Even you already stated, "function $("#create_form").validate worked fine when I used it within $document.ready"

Put it back within the DOM ready where it belongs. I simply added a line $("#create_form").submit() to the Submit button code inside the modal box and it's working fine.

WORKING DEMO: http://jsfiddle.net/7bA8M/

$(document).ready(function() {

    $("#create_form").validate({
        /*submitHandler: function(form) {
            doAjaxPost();
        },*/
        rules: {
            name: {
                required: true,
                minlength: 3,
                maxlength: 16
            },
            password: {
                required: true,
                minlength: 3,
                maxlength: 16
            }
        },
        messages: {
            name: {
                required: "Login - is a mandatory field",
                minlength: "Name should contain minimum {0} symbols",
                maxlength: "Maximum symbols - {0}"
            },
            password: {
                required: "Password - is a mandatory field",
                minlength: "Password should contain minimum {0} symbols",
                maxlength: "Password should contain maximum {0} symbols"
            }
        }
    });

    $("#dialog-form").dialog({
        autoOpen: false,
        height: 500,
        width: 400,
        modal: true,
        buttons: {
            Submit: function () {
                $("#create_form").submit();
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $("#create-user").button().click(function () {
        $("#dialog-form").dialog("open");
    });

});

adamdehaven · Accepted Answer · 2013-03-04 14:41:26Z

-1

You need to include all of your JS before the closing body tag in order for your document.ready() functions to fire.

Here's an example: http://jsfiddle.net/ZgGZ3/3/

edited Mar 4, 2013 at 14:41

answered Mar 4, 2013 at 14:22

adamdehaven

5,92010 gold badges64 silver badges84 bronze badges

6 Comments

gabriel angelos Over a year ago

this makes my form visible at the beginning and pop-up window doesn't work at all. Validation still doesn't work

adamdehaven Over a year ago

You need to put all of your Javascript before the closing body tag. I updated your code.

gabriel angelos Over a year ago

I copied your javascript code only and my validation still doesn't work

adamdehaven Over a year ago

Is the JS loaded at the bottom of the document, with your custom function loaded AFTER all the other JS? Do you have a link to the actual page? It's hard to tell what's going on without being able to see all of your code.

gabriel angelos Over a year ago

I think that's sort of bug, man. Anyway, thanks for your support. I'm using ordinary Javascript validation now

|

Collectives™ on Stack Overflow

jQuery Validation plugin doesn't work in jQuery UI modal window

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related