jQuery + Dialog Form Validation

Question

I have a jQuery Dialog form and on submit I'm trying to validate the fields. I'm using jQuery Validation plugin to validate. In this I'm facing an issue, the validate function is not being called.

I'm posting some snippet of my code:

$("#register-dialog-form").dialog({
    autoOpen: false,
    height: 350,
    width: 450,
    modal: true,
    buttons: {
        'Register': function() {
            $("#registerFrm").validate({
                rules: {
                    accountid: "required",
                    name: {
                        required: true,
                        minlength: 5
                    },
                    username: {
                        required: true,
                        minlength: 5
                    },
                    password: {
                        required: true,
                        minlength: 5
                    }
                },
                messages: {
                    firstname: "Please enter your firstname",
                    accountid: "Please enter the lastname",
                    name: "Please enter a user friendly name",
                    username: {
                        required: "Please enter a username",
                        minlength: jQuery.format("Enter at least {0} characters")
                    },
                    password: {
                        required: "Please provide a password",
                        minlength: jQuery.format("Password must be at least {0} characters long")
                    }
                }
            });

            //******************
            //TODO: Need to submit my form here
            //******************

            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        //$('registerFrm').clearForm();
    }
});

Can someone please tell me what I'm doing wrong here. I've also tried to put the validation into $(document).ready(function() {}, but without success.

Here is the html code:

<div id="register-dialog-form" title="Register Account - Master" align="center" style="display: none">
            <s:form name="registerFrm" id="registerFrm" action="registermaster" method="POST">

                <table width="90%" border="0" class="ui-widget">
                    <tr>
                        <td>
                            <s:textfield label="Account Id" name="accountid" id="accountid" cssClass="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <s:textfield label="Name" name="name" id="name" cssClass="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <s:textfield label="Username" name="username" id="username" cssClass="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <s:password label="Password" name="password" id="password" cssClass="text ui-widget-content ui-corner-all" />
                        </td>
                    </tr>
                </table>
            </s:form>
        </div><!--End of RegisterAcc form-->

Here is the Page source:

    <div id="register-dialog-form" title="Register Account - Master" align="center" style="display: none">

<form id="registerFrm" name="registerFrm" onsubmit="return true;" action="registermaster.action" method="POST"><table class="wwFormTable">

                    <table width="90%" border="0" class="ui-widget">
                        <tr>
                            <td>
                                <tr>
    <td class="tdLabel"><label for="accountid" class="label">Account Id:</label></td>

    <td
><input type="text" name="accountid" value="" id="accountid" class="text ui-widget-content ui-corner-all"/></td>
</tr>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <tr>
    <td class="tdLabel"><label for="name" class="label">Name:</label></td>

    <td
><input type="text" name="name" value="" id="name" class="text ui-widget-content ui-corner-all"/></td>
</tr>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <tr>
    <td class="tdLabel"><label for="username" class="label">Username:</label></td>

    <td
><input type="text" name="username" value="" id="username" class="text ui-widget-content ui-corner-all"/></td>
</tr>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <tr>
    <td class="tdLabel"><label for="password" class="label">Password:</label></td>

    <td
><input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all"/></td>
</tr>

                            </td>
                        </tr>
                    </table>
                </table></form>




            </div><!--End of RegisterAcc form-->

Could you also add the html of the register-dialog-form and the contained registerFrm? That might help people to figure out the problem. — Thomas
– Thomas, Commented Apr 28, 2010 at 11:38

BalusC · Accepted Answer · 2010-04-28 15:28:36Z

0

JSP/Struts2/etc are server side techonologies which runs at the server machine, generates a bunch of HTML and sends it over network to the client side. Javascript/jQuery runs at the client machine on the other side of the network, knows nothing about the server side code which generated it, it only sees the pure HTML DOM tree. Rightclick page in webbrowser and choose View Source. This all is also exactly what JS/jQuery sees. There's no single line of JSP/Struts2 code. The cause of the problem must be spottable there in the HTML source. The following Struts2 line for example

<s:form id="registerFrm">

may for example not necessarily generate a

<form id="registerFrm">

but maybe a

<form id="somePrefix_registerFrm_orSomeSuffix">

This is of course not available in jQuery by $('#registerFrm'). You'll need to update the JS/jQuery code to use exactly the generated ID, i.e. $('#somePrefix_registerFrm_orSomeSuffix').

Summarized: don't look at the server side JSP/Struts2/whateverMVCframework code, but at its generated HTML output whenever writing JS/jQuery code.

edited Apr 28, 2010 at 15:28

answered Apr 28, 2010 at 13:40

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Vivek Over a year ago

@BalusC, I don't have any generatedID in my code after I run it. The form name is the same, I've checked it.

Damovisa Over a year ago

What about the names of the other controls? Are they the same on the server side as the client side? Can you post the resulting html (view source)?

Vivek Over a year ago

@Damovisa, I've pasted the source as viewed in Firefox. And why do I need to worry about the server-side, I'm just looking at UI / Client side validation. Either ways the functionality works fine, all I want is to resolve this UI validation.

Damovisa Over a year ago

@Panther - I was only asking about server side because it looked like that was the html you pasted originally - <s:textfield> rather than what would be rendered. Looks to be the same names though, so there goes that theory... I'll look some more.

BalusC Over a year ago

OK, then I don't know anymore. The only cause for this behaviour is that the script is executed before the document is loaded and calling it in $(document).ready() should fix it, but you said that you already tried it. All I can suggest is to install Firebug and debug the JS.

|

Vivek · Accepted Answer · 2010-05-07 13:56:47Z

Thanks for the help folks, I found another way to do the validation, felt this was simple.

var $inputs = $('#registerFrm :input:visible');
                    var inputCount = $('#registerFrm :input:visible').length;

                    $inputs.each(function() {
                            if ($(this).val() == null || $(this).val() == '' || $(this).val() == 0) {
                                $(this).focus();
                                $(this).css("background", "#F3DAFC");
                                return false;
                            } else if ($(this).val() != null) {
                                $(this).css("background", "white");
                                --inputCount;
                            }
                        });

Georgios · Accepted Answer · 2013-09-10 14:12:43Z

I had the same issue using jQuery Dialog plugin (http://jqueryui.com/dialog/) with jQuery Validator plugin(http://jqueryvalidation.org/). The problem is that the jQuery-UI dialog does not append to the form, it appends just before </body>, so the elements to validate are outside the <form></form> section.

To solve this issue i add the "open" attribute on the Dialog initialization. Inside this attribute i add a function that wraps my Dialog div element inside a form element and then initialize the validator.

Also, i add the "close" attribute on the Dialog initialization. Inside this attribute i add a function that unwraps the form i wrapped on the open event and resets the validator.

A simple example,

<script type="text/javascript">
var validator;
$(document).ready(function () {
    $("#dialog-id").dialog({
    autoOpen: false,
    resizable: true,
    width: 450,
    modal: true,
    // Open event => wraps the Dialog source and validate the form.
    open: function (type, data) {
        $(this).wrap("<form id=\"form-id\" action=\"./\"></form>");
        validator = $("#form-id").validate();
    },
    // Close event => unwraps the Dialog source and reset the form to be ready for the next open!
    close: function (type, data) {
        validator.resetForm();
        $(this).unwrap();
    },
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        },
        "Create": function () {
            validator.form();
        }
    }
});
</script>

Some html for the above javascript,

<div id="dialog-id" title="Thematic Section">
    <div class="form_description">
        Create a thematic section for a conference type.
    </div>
    <ul style="list-style-type:none;">
        <li>
            <label class="description" for="conferencetype_id">Conference Type:</label>
            <div>
                <select id="conferencetype_id" name="conferencetype_id" style="width:150px;"> 
                    <option value="1" selected="selected">Type-1</option> 
                    <option value="2" selected="selected">Type-2</option>
                    </select>
            </div> 
        </li>
        <li>
            <label class="description" for="title">Title:</label>
            <div>
                <input id="title" name="title" type="text" maxlength="100" value="" style="width:350px;" required/> 
            </div> 
        </li>
    </ul>
</div>

Collectives™ on Stack Overflow

jQuery + Dialog Form Validation

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related