我的修复

Question

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

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

实现它时

而不是对页面执行ajax请求＆＃34; proceed.php＆＃34;它将我重定向到它（这是一个带有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      
            }
        });
    });
});

Answer 1

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

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

我的修复

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

假设上面有一个普通的表单，onsubmit属性会调用一个函数并将true解释为＆＃39;提交[导航到 do.php ，这不是＆＃39;我们想要什么]＆＃39;或false＆＃39;什么都不做[我们真正想要的]＆＃39;

假设您已经创建了new 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在另一个线程中继续你的程序时，这不应该要求你更改代码。或者回调。这就是我的诀窍。我知道你也有点混合两个支持库，所以我希望你可以实现这一点。

jQuery ajax重定向而不是ajaxing

1 个答案:

我的修复