Javascript 带有表单验证插件的jQuery UI对话框

我目前正在使用用于我的表单的。我正在使用一个弹出模式对话框来存放一个需要验证的表单，但由于某些原因，它没有调用我的表单。。。我所有的身份证和证明都有效，但我仍然没有成功

也许有人能给我点启示。 这是我的Javascript代码

$("#addEventDialog").dialog("open");

$("#addEventDialog").dialog({
    title: 'Add Event',
    modal: true,
    buttons: {
        "Save": function() {
            $("#interestForm").validate({
                submitHandler: function(form) {
                    $("#calendarWidget2").ajaxSubmit({
                        target: "#calendarResponse",
                        dataType: 'json',
                        beforeSubmit: function () {
                            $('input[type=submit]').attr("disabled", true);
                            $("#calendarResponse").show('slow');
                        },
                        success: function(response, event) {
                            if(response.status == true) {
                                $('input[type=submit]').attr("disabled", false);
                                $("#calendarResponse").delay(5000).fadeOut('slow');

                                //If the widget says it's okay to refresh, refresh otherwise, consider it done
                                if(response.refreshEvents == '1') {
                                    $("#calendar").fullCalendar("refetchEvents");
                                }
                                // Close the dialog box when it has saved successfully
                                $("#addEventDialog").dialog("destroy");
                                // Update the page with the reponse from the server
                                $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />");
                            } else {
                                $("#calendarWidget2").validate();
                                $("#calendarResponse").append("ERROR: "+ response.status +"<br />");    
                            }
                        },
                        error: function() {
                            alert("Oops... Looks like we're having some difficulties.");    
                        }
                    });
                }
            });
        },
        "Cancel": function() { 
            $(this).dialog("close"); 
        } 
    }
});

$（“addEventDialog”）。对话框（“打开”）；
$（“#addEventDialog”）。对话框({
标题：“添加事件”，
莫代尔：是的，
按钮：{
“保存”：函数（）{
$（“#利息形式”）.validate({
submitHandler:函数（表单）{
$（“#calendarWidget2”）.ajaxSubmit({
目标：“日历响应”，
数据类型：“json”，
提交前：函数（）{
$（'input[type=submit]'）.attr（“disabled”，true）；
$（“#calendarResponse”）.show（'slow'）；
},
成功：功能（响应、事件）{
if（response.status==true）{
$（'input[type=submit]'）.attr（“disabled”，false）；
$（“#calendarResponse”）。延迟（5000）。淡出（“慢”）；
//如果小部件说刷新是可以的，否则刷新，考虑它完成了。
如果（response.refreshEvents==“1”）{
$（“#日历”）。完整日历（“参考事件”）；
}
//保存成功后关闭对话框
$（“#addEventDialog”）。对话框（“销毁”）；
//使用来自服务器的响应更新页面
$（“#calendarResponse”）.append（“成功添加：“+response.title+”
”）；
}否则{
$（“#calendarWidget2”）.validate（）；
$（“#calendarResponse”）.append（“错误：+response.status+”
）；
}
},
错误：函数（）{
警惕（“哦……看起来我们遇到了一些困难。”）；
}
});
}
});
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
} 
}
});

验证程序

验证

功能只是设置验证，而不是触发验证。提交表单或写入字段时，会自动触发。尝试将验证代码添加到

打开事件中：

$("#addEventDialog").dialog("open");
            $("#addEventDialog").dialog({
                open: function() {
                    $("#interestForm").validate({
                        ...
                    });
                }, ...

试试这样的。将表单验证的内容放在对话框脚本之外，否则我想开放回调也可以

 buttons : {
       "Cancel" : function() {
            $(this).dialog('close');
        },
        "Submit" : function() {
            var isValid = $("#yourForm").valid();
            if(isValid) {
                var formData = $("#yourForm")serialize();
                // pass formData to an ajax call to submit form.

            }
           return false;
        }
 },

我通过3个步骤解决了类似的问题：

将验证程序附加到表单：

$('#your-form-id').validate();


单击模式表单的“保存”按钮后，提交表单（将触发验证程序）：


将提交逻辑移动到验证程序提交程序：

$('#your-form-id').validate({
  submitHandler: function(form) {
    // do stuff
  }
});


我知道这个问题很老了。但是当我在寻找这个特殊的问题时，这个问题首先出现了。所以我认为这可能会帮助其他人。终于实现了这一目标

请参见
我在使用jQuery对话框插件（）和jQuery验证器插件（）时遇到了同样的问题。问题是jQueryUI对话框没有附加到表单，它只是在表单之前附加，所以要验证的元素在该部分之外

为了解决这个问题，我在对话框初始化中添加了“open”属性。在这个属性中，我添加了一个函数，该函数将我的Dialog div元素包装在表单元素中，然后初始化验证器

另外，我在对话框初始化中添加了“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>


var验证器；
$（文档）.ready（函数（）{
$（“#对话框id”）.dialog({
自动打开：错误，
可调整大小：正确，
宽度：450，
莫代尔：是的，
//Open event=>包装对话框源代码并验证表单。
打开：功能（类型、数据）{
$（this.wrap（“”）；
验证程序=$（“#表单id”）.validate（）；
},
//关闭事件=>打开对话框源并重置窗体以准备下次打开！
关闭：功能（类型、数据）{
validator.resetForm（）；
$（this.unwrap（）；
},
按钮：{
“取消”：函数（）{
$（此）.dialog（“关闭”）；
},
“创建”：函数（）{
form（）；
}
}
});

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


为会议类型创建主题部分。


会议类型：
1型
2型


标题：


谢谢它帮助了我很多：）！！也谢谢它帮助了我：）很好！另一个选项是使用jquery on（）方法侦听对话框的dialogopen事件：
$（“”）。on（“dialogopen”，函数（事件，ui）{$（“#interestForm”）.validate（）；
<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>