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-->

Answer 1

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;
                            }
                        });