Ajax无法与jquery validate插件一起使用 [英] Ajax not working with jquery validate plugin

问题描述

我的ajax成功/失败事件未触发.我正在使用jquery验证，并且在其中我正在使用ajax进行表单提交. 我的表单正在提交，但未按AJAX所述显示返回值(JSON数据).

My ajax success/failure event is not firing. I am using jquery validation and inside that i am using ajax for form submit. My forms are getting submitted but return value(JSON data) is not showing as described in AJAX.

我尝试使用alert()，但也没有触发.

I tried to use alert() but it is also not firing.

<script type="text/javascript">
$('document').ready(function()
{

    $("#alert-form").validate({
          ignore: '',
          messages: {
            select2Start: {
              required: "Please select your starting point.",

            }
          },

        //});
        submitHandler: function(form) {

                e.preventDefault;
                var btn = $('#publish');
                btn.button('loading');
                alert('valid form submission');

                $.ajax({
                    type: 'post',
                    url:$('form#alert-form').attr('action'),
                    cache: false,
                    dataType: 'json',
                    data: $('form#alert-form').serialize(),
                    beforeSend: function() { 
                        $("#validation-errors_alert").hide().empty(); 
                    },
                    success: function(data) {
                        if(data.success == false)
                            {
                                var arr = data.errors;
                                $.each(arr, function(index, value)
                                {
                                    if (value.length != 0)
                                    {
                                        $("#validation-errors_alert").append('<div class="alert alert-danger"><strong>'+ value +'</strong><div>');
                                    }
                                });
                                $("#validation-errors_alert").show();   
                                btn.button('reset');                            
                            }else{
                            //  alert("Job Alert Configured successfully.");
                                 $("#job_success_alert").append('<div class="alert alert-success"><strong>Alert Configured successfully.</strong><div>');
                            }
                    },
                    error: function(xhr, textStatus, thrownError) {
                    alert('Something went to wrong.Please Try again later...');
                        alert(thrownError);
                        btn.button('reset');

                    }
                });             
                return false;
        }
            });

        });

    </script>   

推荐答案

正如Barmer在他的第一句话中指出的那样，此代码存在多个问题...

As pointed out by Barmer in his first comment, there are several issues with this code...

 submitHandler: function(form) {
     e.preventDefault;
     ....

1. 变量e在此submitHandler函数中不存在.

您没有在.preventDefault()中加入括号.

在这种情况下，您不需要.preventDefault()，因为该插件已经阻止了默认提交.完全删除此行.

You don't need .preventDefault() in this context since the plugin is already blocking the default submit. Remove this line entirely.

注释:

为了获得良好的可读性，请不要将Allman与1TBS样式代码格式混合使用...始终保持一致.此外，最好完全避免在JavaScript中使用Allman .

For good readability, don't mix Allman with 1TBS style code formatting... just be consistent throughout. Additionally, it might be best to avoid using Allman in JavaScript altogether.

这篇关于Ajax无法与jquery validate插件一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！