Question

我正在尝试使用jquery-validate插件来验证bootstrap-dialog内的表单。 “必需”规则不会阻止我提交带有空文本字段的表单。但是，“数字”规则有效，因此意味着正确初始化验证。我在这里错过了什么？感谢。

以下是我如何显示bootstrap对话框以及如何初始化验证。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>App Title</title>
        <link type="text/css" rel="stylesheet" href="<c:url value="/css/bootstrap/3.0.3/bootstrap.min.css" />"></link>
        <script src="<c:url value="/js/jquery/1.10.2/jquery-1.10.2.min.js" />"></script>
        <script src="<c:url value="/js/jquery-ui/1.10.4/jquery-ui.min.js" />"></script>
        <script src="<c:url value="/js/bootstrap/3.0.3/bootstrap.min.js" />"></script>
        <script src="<c:url value="/js/bootstrap-dialog//bootstrap-dialog.min.js" />"></script>
        <link type="text/css" rel="stylesheet" href="<c:url value="/css/style.css" />"></link>
        <link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery-ui/1.10.4/jquery-ui.min.css" />"></link>
        <link type="text/css" rel="stylesheet" href="<c:url value="/css/bootstrap-dialog/bootstrap-dialog.min.css" />"></link>
        <script src="<c:url value="/js/jquery-validation/1.11.1/jquery.validate.min.js" />"></script>
        <script type="text/javascript">

    function wireValidationEvent($form)
    {
        $form.validate({
            errorElement: 'span',
            errorClass: 'help-block',
            wrapper: "div",
            rules: {
                name: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: "Please enter the name properly."
                }
            },
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            success: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            }
        });
    }                       

    function showModalDialog(url)
    {
        var get = $.get(url, '');
        get.done(function(data) {
            // Note that data contains just a form without any button.
            // The form is dynamically injected into the body of the modal dialog. That's why wireValidationEvent() is called each time when a form is injected.
            // When Save button is clicked, the form will be submitted using jquery.
            BootstrapDialog.show({
                title: 'Update Form',
                closable: true,
                autodestroy: true,
                onshow: function(dialogRef){
                    var $body = dialogRef.getModalBody();
                    $body.append(data.trim());

                    var $formObj = $body.find('#formOfReligion');
                    if ($formObj)
                    {
                        // TODO bug: required validation rule doesn't work here
                        wireValidationEvent($formObj);
                    }
                    else
                    {
                        alert('formOfReligion is missing');
                    }
                },
                buttons: [{
                    label: 'Save',
                    action: function(dialog) {
                        var formObj = $('#formOfReligion'); 
                        if (formObj && formObj.length > 0)
                        {
                            var form = formObj[0];          

                            var post = $.post(form.action, formObj.serialize());
                            post.done(function( data ) {
                                // succeeded
                                dialog.close();


                                $('#frmQuery').submit();
                            });
                            post.fail(function( data ) {
                                // failed
                            });
                        }           
                    }
                }, {
                    label: 'Cancel',
                    action: function(dialog) {
                        dialog.close();
                    }
                }]
            });
        });

        return true;
    }
        </script>

这是模态对话框的样子。

<div class="modal-backdrop fade in"></div>
<div id="bea044b7-a0cb-48df-8b57-6cbdedac9bdf" class="modal fade bootstrap-dialog type-primary size-normal in" tabindex="-1" style="display: block;" aria-hidden="false">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <div class="bootstrap-dialog-header">
                <div class="bootstrap-dialog-title">Update Form</div>
                <div class="bootstrap-dialog-close-button" style="display: block;">
                <button class="close">×</button>
            </div>
        </div>
    </div>
<div class="modal-body">
    <div class="bootstrap-dialog-body">
        <div class="bootstrap-dialog-message"></div>
    </div>
    <form id="formOfReligion" class="form-horizontal" role="form" method="POST" action="/prs/protected/test" novalidate="novalidate">
        <fieldset>
            <div class="form-group">
                <div>
                    <label class="control-label" for="name">Name</label>
                </div>
                <div>
                    <input id="id" type="hidden" value="6" name="id">
                    <input id="name" class="form-control" type="text" value="test" autofocus="autofocus" name="name">
                </div>
            </div>
        </fieldset>
    </form>
</div>
<div class="modal-footer">
    <div class="bootstrap-dialog-footer">
    <div class="bootstrap-dialog-footer-buttons">
        <button id="667d578f-490e-4d08-a8c1-1013b60c3394" class="btn btn-default">Save</button>
        <button id="8b647389-edce-4f64-af8e-64521e865dcf" class="btn btn-default">Cancel</button>
    </div>
</div>

Answer 1

<input id="id" type="hidden" value="6" name="id">
<input id="name" class="form-control" type="text" value="test" autofocus="autofocus" name="name">

value上有"test" input的硬编码，因此required规则已经满足，用户无需输入任何内容。

BTW ：我认为您在这里没有一个好的命名系统：id="id"，name="id"，id="name"和name="name"。它不是语义的，不可扩展的，并且可能令人困惑。

jquery-validate规则（必需）不起作用

1 个答案: