Question

我希望这里的一位专家可以通过我一直在研究的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

Answer 1

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

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

使用AJAX保存时，jQuery模态表单验证无效

1 个答案: