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

前端之家收集整理的这篇文章主要介绍了javascript – 带有表单验证插件的jQuery UI对话框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前正在使用 bassistance validation plugin表格.我正在使用一个弹出式模式对话框来存放需要验证的表单,但由于某种原因,它不是在调用我的表单…我的所有ID和引用都在工作,我仍然没有成功.

也许有人可以为我揭开光明.
这是我的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"); 
        } 
    }
});

解决方法

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

>将验证器附加到表单:

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

>单击模态表单的“保存”按钮时,提交表单(将触发验证程序):

buttons: {
  "Save": function() {
    $('#your-form-id').submit();
  },

>将提交逻辑移动到验证器submitHandler:

$('#your-form-id').validate({
  submitHandler: function(form) {
    // do stuff
  }
});
原文链接:https://www.f2er.com/jquery/156123.html

猜你在找的jQuery相关文章