【问题标题】:jQuery Modal Form Validation not working when saving with AJAX使用 AJAX 保存时,jQuery 模态表单验证不起作用
【发布时间】:2012-06-05 12:16:47
【问题描述】:

我希望这里的一位专家可以用我一直在研究的 jQuery 对话框脚本为我指明正确的方向..

我的问题:通过 $.ajax() 保存时,我无法使用我的对话窗口进行验证。如果我不通过 AJAX 保存并提交表单,我的脚本就可以正常工作:

例如。 $( this ).find('form#mws-validate-event').submit();

如果有人有时间查看我在下面留下的代码并帮助验证部分,我将不胜感激。我在stackoverflow上搜索了高低,但还没有找到解决方案。

谢谢。

        $("#mws-addform-dialog").dialog({
                autoOpen: false, 
                title: "My Form / Add New", 
                modal: true, 
                width: "480",
            //working validation (NO AJAX)
            //buttons: [{
            //      text: "Submit", 
            //      click: function() {
            //          $( this ).find('form#mws-validate-event').submit();
            //      }}] 
            buttons: {
            "Submit": function() {

            },
            'Save': function() {

                $.ajax({
                    type : 'POST',
                    url : 'ajax.php?action=addnew',
                    data : $('#mws-validate-event').serialize(),
                    beforeSubmit : function (){
                        // Validate data before submit?? anyone??
                        //$( this ).find('form#mws-validate-event').submit();
                    },
                    success : function(data) {
                        // Show OK message
                        $('#mws-validate-event').find('.mws-form-message').html(data);
                        alert('ok');
                    },
                    error: function(error){
                        // Show error message
                        alert('error');
                    }
                });

            },
            'Cancel': function() {

                $(this).dialog("close");

            }
          } 
        });

        $("#mws-addform-dialog-btn").bind("click", function(event) {
            $("#mws-addform-dialog").dialog("option", {modal: true}).dialog("open");
            event.preventDefault();
        });
        //- modal form

        // validate form        
        $("#mws-validate-event").validate({
        //ignore: ".ignore",
            rules: {
                spinner: {
                    required: true, 
                    max: 5
                }

            }, 
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    var message = errors == 1
                    ? 'You missed 1 field. It has been highlighted'
                    : 'You missed ' + errors + ' fields. They have been highlighted';
                    $("#mws-validate-error").html(message).show();
                } else {
                    $("#mws-validate-error").hide();
                    }
            }
        });
        //- validate form 

【问题讨论】:

    标签: jquery ajax validation dialog


    【解决方案1】:

    您是否尝试过使用 jquery 验证器进行验证?它为您完成大部分验证工作,并且易于使用。

    http://bassistance.de/jquery-plugins/jquery-plugin-validation/
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-06-27
      • 2015-06-22
      • 2013-11-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多