小编典典

jQuery +对话框表单验证

jsp

我有一个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-->

阅读 249

收藏
2020-06-10

共1个答案

小编典典

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

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;
                            }
                        });
2020-06-10