jQuery +对话框表单验证

Question

我有一个jQuery对话框表单，提交后我正在尝试验证字段。 我正在使用jQuery Validation插件进行验证。 在此我面临一个问题，未调用validate函数。

我正在发布一些代码片段：

$("#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() {} ，但没有成功。

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

这是Page的来源：

    <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

使用jQuery对话框插件（ http://jqueryui.com/dialog/ ）和jQuery Validator插件（ http://jqueryvalidation.org/ ）时，我遇到了同样的问题。 问题在于jQuery-UI对话框没有追加到表单，而是追加在</ body>之前，因此要验证的元素不在<form> </ form>部分之外。

为了解决此问题，我在Dialog初始化上添加了“ open”属性。 在此属性内，我添加了一个函数，该函数将Dialog div元素包装在一个form元素内，然后初始化验证程序。

另外，我在Dialog初始化上添加“ close”属性。 在此属性内，我添加了一个函数，该函数解开包裹在open事件上的表单并重置验证程序。

一个简单的例子

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

上述javascript的一些html，

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

Answer 2

JSP / Struts2 / etc是在服务器计算机上运行的服务器端技术，生成一堆HTML并将其通过网络发送到客户端。 Javascript / jQuery在网络另一端的客户端计算机上运行，​​对生成它的服务器端代码一无所知，它只看到纯HTML DOM树。 右键单击Web浏览器中的页面，然后选择“ 查看源代码” 。 这也正是JS / jQuery所看到的。 JSP / Struts2代码没有一行。 问题的原因必须在HTML源代码中可以找到。 以下Struts2行为例

<s:form id="registerFrm">

例如可能不一定会产生

<form id="registerFrm">

但是也许

<form id="somePrefix_registerFrm_orSomeSuffix">

当然$('#registerFrm')在jQuery中不可用。 您需要更新JS / jQuery代码以完全使用生成的ID，即$('#somePrefix_registerFrm_orSomeSuffix') 。

总结：不要看服务器端JSP / Struts2 / whateverMVCframework代码，而是看它在编写JS / jQuery代码时生成的HTML输出。

Answer 3

感谢大家的帮助，我发现了另一种进行验证的方法，感觉很简单。

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