1

我有一个 jquery 脚本，它使用 bootstrapvalidator （ http://bootstrapvalidator.com/ ）验证我的表单，然后如果验证成功（复选框选中，不为空等）它会进行 ajax 调用。

问题是当我尝试使用 ICheck 插件（http://fronteed.com/iCheck/）实现它时

不是对页面“proceed.php”进行ajax请求，而是将我重定向到它（这是一个带有json调用的php页面）。

所以基本上当我尝试使用 Icheck 插件实现我的 ajax 调用时，它会重定向而不是执行 ajax（有点失去 ajax 的目的！）

我是 jQuery 的新手，我很确定这是一个简单的语法错误，因此我们将不胜感激。

该网站可以在这里测试：http: //entendu.x10.mx

$(document).ready(function() {
    $("form")
        .bootstrapValidator({




        message: 'Pas valide',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitButtons: 'button[type="submit"]',

        fields: {
            nom: {
                message: 'Votre nom est invalide',
                validators: {
                    notEmpty: {
                        message: 'Le champ est obligatoire'
                    },
                    stringLength: {
                        min: 1,
                        max: 60,
                        message: 'Le champ doit être compris entre 6 et 60 caractères'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z]*$/,
                        message: 'Le champ ne doit comporter que des lettres'
                    }
                }
            },
            prenom: {
                message: 'Votre prénom est invalide',
                validators: {
                    notEmpty: {
                        message: 'Le champ est obligatoire'
                    },
                    stringLength: {
                        min: 1,
                        max: 60,
                        message: 'Le champ doit être compris entre 6 et 60 caractères'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z]*$/,
                        message: 'Le champ ne doit comporter que des lettres'
                    }
                }
            },
             matricule: {
                validators: {
                     notEmpty: {
                        message: 'Le champ est obligatoire'
                    },
                     integer: {
                       message: 'Votre matricule doit être composé de chiffres uniquement'
                   }                }
            },

            "date-dispo-from":{
                validators: {

                     notEmpty: {
                        message: 'Le champ est obligatoire'
                    },

                     date: {
                       message: 'La date doit être valide',
                       format: 'YYYY-MM-DD',
                       separator: '-'
                   }                
                 }
            },
             "date-dispo-to":{
                validators: {

                     notEmpty: {
                        message: 'Le champ est obligatoire'
                    },


                     date: {
                       message: 'La date doit être valide',
                       format: 'YYYY-MM-DD',
                       separator: '-'
                   }                
                 }
            },
             "dispo-travail-jours": {
                validators: {
                    notEmpty: {
                        message: 'Le champ est obligatoire'
                    },
                    integer: {
                        message: 'Le nombre doit être situé entre 0 et 20 jours'
                    }
                }

            },
            "check_date[]": {
                validators: {
                        choice: {
                             min: 8,
                             message: 'Veuillez sélectionner au minimum 8 jours. (1 fin de semaine SUR 2 et 1 jour par semaine)'
                    }
                }

            }

        }
    })
    .find('input[type="checkbox"]')
            // Init iCheck elements
            .iCheck({
                checkboxClass: 'icheckbox_flat-blue',
                radioClass: 'iradio_flat-blue'
            })
            // Called when the radios/checkboxes are changed
            .on('ifChanged', function(e) {
                // Get the field name
                var field = $(this).attr('name');
                $('form').bootstrapValidator('revalidateField', field);
            })
        .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            var postData = $('form').serialize();

        $.ajax(
        {
            url : 'process.php',
            type: "POST",
            data : postData,
            dataType: 'json',

            success:function(data, textStatus, jqXHR) 
            {
                    alert(postData);

                $("#result").show('slow');

            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                //if fails      
            }
        });
    });
});
4

1 回答 1

0

通过 AJAX 发送表单时，我确实遇到了完全相同的问题。

尝试隔离表单的 DOM 元素并删除 action 属性。

我的修复

<!-- Fig. A - The Form -->
<form action="do.php" method="POST" onsubmit="validate()">
    <input type="submit" />
</form>

假设如上的正常形式，onsubmit 属性调用一个函数并解释true为“做提交[导航到do.php，这不是我们想要的]”或false“什么都不做[我们真正想要的]”

假设您已经创建了 anew XHTTPRequest并已适当地设置了选项（jQuery 可能会为您执行此操作。）此函数调用该传输并停止您的窗口导航。

// Fig. B - The Javascript
function validate () {
    // Invoke the xhr's transmission in a timeout. Refer to your jQuery manual :)
    setTimeout(function () { xhr.send(); }, 1);
    return false; // This will cause the page to stop navigating.
}

由于 AJAX 通常是异步使用的，因此这不应该要求您对代码进行太多更改，因为您的 xhr 无论如何都会在不同的“线程”或回调中继续您的过程。这就是我的诀窍。我知道你也在混合两个支持库，所以我希望这对你来说是可以实现的。

于 2014-08-04T20:39:33.623 回答