在Ajax提交之前进行jQuery表单验证

时间:2012-07-13 11:28:27

标签: jquery ajax jquery-validate validation

JavaScript位:

$(document).ready(function()
    {
            $('#form').submit(function(e)
            {     

                e.preventDefault();
                var $form = $(this);

                // check if the input is valid
                if(! $form.valid()) return false;
                    $.ajax(
                    {
                    type:'POST',
                    url:'add.php',
                    data:$('#form').serialize(),
                    success:function(response)
                    {
                        $("#answers").html(response);
                    }
                });     

            })
    });

HTML位:

    <input type="text" name="answer[1]" class="required" />
    <input type="text" name="answer[2]" class="required" />

所以这是我试图使用的代码。我的想法是在我用Ajax发送表单之前验证我的所有输入。我现在已经尝试了很多版本,但每次我最终都提交,即使表格没有完全填写。我的所有输入都是“必需”类。谁能看到我做错了什么?

另外,我依赖基于类的要求,因为我的输入名称是用php生成的,所以我永远无法确定我得到的名称[id]或输入类型。

当我在“页面”中浏览时,我会显示/隐藏问题。

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>

JS:

function toggleVisibility(newSection) 
        {
            $(".section").not("#" + newSection).hide();
            $("#" + newSection).show();
        } 

9 个答案:

答案 0 :(得分:85)

您可以使用submitHandler选项。基本上将$.ajax调用放在此处理程序中,即使用验证设置逻辑将其反转。

$('#form').validate({

    ... your validation rules come here,

    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            data: $(form).serialize(),
            success: function(response) {
                $('#answers').html(response);
            }            
        });
    }
});

如果验证已通过,jQuery.validate插件将调用提交处理程序。

答案 1 :(得分:13)

首先,您不需要显式添加classRules,因为jquery.validate插件会自动检测到required。 所以你可以使用这段代码:

  1. 在表单提交上,您可以阻止默认行为
  2. 如果表单无效则停止执行。
  3. 如果有效,则发送ajax请求。

    $('#form').submit(    function(e){     
    
                e.preventDefault();
                var $form = $(this);
    
              // check if the input is valid
                if(! $form.valid()) return false;
    
               $.ajax({
                    type: 'POST',
                    url: 'add.php',
                    data: $('#form').serialize(),
                    success: function(response) {
                        $("#answers").html(response);
                    }
    
                });
            });
    

答案 2 :(得分:6)

您可以尝试:

if($("#form").validate()) {
 return true;
} else {
 return false;
}

答案 3 :(得分:5)

这个具体的例子只是检查输入,但是你可以调整它,然后在你的.ajax函数中添加这样的东西:

beforeSend: function() {                    
    $empty = $('form#yourForm').find("input").filter(function() {
        return this.value === "";
    });
    if($empty.length) {
        alert('You must fill out all fields in order to submit a change');
        return false;
    }else{
        return true;
    };
},

答案 4 :(得分:3)

我认为我首先验证表单,如果验证将通过,我会发布ajax帖子。别忘了在脚本末尾添加“return false”。

答案 5 :(得分:3)

我认为使用jquery验证的submitHandler是很好的解决方案。请从这段代码中了解一下。灵感来自@Darin Dimitrov

$('.calculate').validate({

                submitHandler: function(form) {
                    $.ajax({
                        url: 'response.php',
                        type: 'POST',
                        data: $(form).serialize(),
                        success: function(response) {
                            $('#'+form.id+' .ht-response-data').html(response);
                        }            
                    });
                }
            });

答案 6 :(得分:3)

> Required JS for jquery form validation
> ## jquery-1.7.1.min.js ##
> ## jquery.validate.min.js ##
> ## jquery.form.js ##

$("form#data").validate({
    rules: {
        first: {
                required: true,
            },
        middle: {
            required: true,
        },          
        image: {
            required: true,
        },
    },
    messages: {
        first: {
                required: "Please enter first",
            },
        middle: {
            required: "Please enter middle",
        },          
        image: {
            required: "Please Select logo",
        },
    },
    submitHandler: function(form) {
        var formData = new FormData($("#image")[0]);
        $(form).ajaxSubmit({
            url:"action.php",
            type:"post",
            success: function(data,status){
              alert(data);
            }
        });
    }
});

答案 7 :(得分:1)

var="item"

答案 8 :(得分:1)

您需要先触发表单验证,然后再检查其是否有效。在每个字段中输入数据后,将执行字段验证。表单验证由Submit事件触发,但在文档级别。因此,您的事件处理程序会在jquery验证整个表单之前被触发。但是,不用担心,所有这些都有一个简单的解决方案。

您应验证表单:

if ($(this).validate().form()) {
  // do ajax stuff
}

https://jqueryvalidation.org/Validator.form/#validator-form()