jQuery +对话框表单验证 [英] jQuery + Dialog Form Validation

问题描述

我有一个jQuery Dialog表单，在提交时我正在尝试验证字段。我正在使用 jQuery Validation插件进行验证。在这方面我遇到了一个问题，验证函数没有被调用。

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

有人可以告诉我这里我做错了什么。我也尝试将验证放入 $（document）.ready（function（）{} ，但没有成功。

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.

这是html代码：

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

以下是页面来源：

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

推荐答案

感谢帮助人员，我找到了另一种方式进行验证，觉得这很简单。

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

这篇关于jQuery +对话框表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！