logo标签列表

jQuery表单验证在Ajax提交前

jqueryajaxjquery-validatevalidation
53

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发送表单之前验证所有输入。我已经尝试了许多版本，但每次都会提交，即使表单没有完全填写。我所有的输入都是“required”类。有人能看出我做错了什么吗？

此外，我依赖于基于类的要求，因为我的输入名称是用PHP生成的，所以我无法确定我得到了什么名称[id]或输入类型。

我在“页面”中显示/隐藏问题。

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

JS：

function toggleVisibility(newSection) 
        {
            $(".section").not("#" + newSection).hide();
            $("#" + newSection).show();
        }
当您提交时会发生什么？ - Mantas Vaitkūnas
目前我只是回显所有的 $key => $value 对，即使我只填写了 1/4 的问题，它们仍然会不断地出现在我的屏幕上。 - Tom
在最新版本的jquery（v1.7.2）中，我找不到beforeSubmit作为$.ajax的有效选项。您可能希望使用最新版本的jquery。话虽如此，Darin的答案是正确的。话虽如此，如果您无法执行他建议的操作，则应将beforeSubmit的最后一行替换为Fliespl提供的代码。您需要检查.validate()的返回值，并相应地继续或取消ajax请求。 - Amith George
尝试使用fliespl行，但仍然只是提交。问题中的代码已更新。 - Tom
13个回答
116

你可以使用 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插件会在通过验证后调用提交处理程序。

但是我仍然可以在验证之前序列化#answers，或者将其放在$.ajax之前吗？ - Tom
#answers 是您的结果 div。如果您想要在 AJAX 请求中发送表单输入字段的值，请使用 .serialize() 方法，就像我的答案中所示：data: $(form).serialize() => 在提交处理程序内部。 - Darin Dimitrov
你认为将表单分成几个div，并在用户通过表单时隐藏/显示它们，这样做会影响我无法让这段代码正常工作吗？ - Tom
一如既往地准确，+1 - Suhail Mumtaz Awan
准确无误² 哈哈 +1 - Zkk
请问您能否详细解释一下.ajaxSubmit的用法？当我使用它代替$.ajax时，常规提交仍然会发生。如何避免这种情况发生？ - Eugen Konkov
21

首先，您不需要显式添加classRules，因为jquery.validate插件会自动检测required。因此，您可以使用以下代码：

  1. 在表单提交时，阻止默认行为
  2. 如果表单无效，请停止执行。
  3. 否则，如果有效，请发送ajax请求。
$('#form').submit(function (e) {
  e.preventDefault();
  var $form = $(this);

  // check if the input is valid using a 'valid' property
  if (!$form.valid) return false;

  $.ajax({
    type: 'POST',
    url: 'add.php',
    data: $('#form').serialize(),
    success: function (response) {
      $('#answers').html(response);
    },
  });
});
检查一下你的浏览器日志是否有错误，你使用的是哪个浏览器？ - amd
我正在使用Google Chrome，但是我在那里找不到任何错误。我会再试一次这段代码。 - Tom
现在根本无法提交，这应该放在$(document).ready(function(){中对吗？ - Tom
是的，它应该在文档准备就绪块中，你是否已经为你的表单添加了一个ID？你的表单必须具有<form id='form'>... <input type=submit value=submit></form>。 - amd
它也改变了获取方法，不知道为什么O_o。 - Tom
显示剩余3条评论
7
> 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);
            }
        });
    }
});
这个答案对于初学者来说解释得非常清楚...谢谢！但是它也能验证文件附件吗？怎么做呢？ - Deepa MG
需要使用 jquery.form.js 吗？ - Eugen Konkov
7

您可以尝试执行以下操作：

if($("#form").validate()) {
 return true;
} else {
 return false;
}
我在将表单拆分成多个“页面”时更改了 display:none。您认为这可能会导致一些问题吗？ - Tom
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

我认为使用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);
                        }            
                    });
                }
            });
3
我认为首先应该验证表单，如果验证通过，然后再进行Ajax提交。不要忘记在脚本的结尾添加"return false"。
0

在检查表单是否有效之前，您需要触发表单验证。字段验证在您输入每个字段的数据后运行。表单验证是由提交事件在文档级别触发的。因此，在jquery验证整个表单之前，您的事件处理程序将被触发。但不要担心，这个问题有一个简单的解决方案。

您应该验证表单：

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

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

0

HTML表单：

<div class="w3-padding w3-flat-clouds">
         <p><label>Your Name:</label><input id = 'name' class="w3-input w3-border" type="text" name = 'enter-name' placeholder = "Enter your Name" required></p>
         <p><label>Your Email:</label><input id = 'e-mail' class="w3-input w3-border" type="text" name = 'enter-email' placeholder = "Enter your email" required></p>
         <p><label>Your Message:</label><textarea id = 'message' style = 'height: 80px;' class="w3-input w3-border" name = 'enter-message' placeholder = "Enter your message..." required></textarea></p>
         <button class = 'w3-button w3-btn w3-black w3-hover-green' id = 'sub-btn'>submit</button>
      </div>

AJAX：

   $(document).ready(() => {
        $('#sub-btn').click(() => {
            var nameInsert = document.getElementById('name').value;
            var emailInsert = document.getElementById('e-mail').value;
            var messageInsert = document.getElementById('message').value;

            var atTheRate = emailInsert.indexOf("@");
            var dotPosition = emailInsert.lastIndexOf(".");
            if(atTheRate < 1 || dotPosition < 6)
            {
              alert(nameInsert + ' Please Provide Your Proper Email!');
              return false;      //Prevents your form to being submit.
            }
            else
            {
            $.ajax({  
                url: '/send-details',
                method: 'GET',
                data: {
                    nameInsert: nameInsert,
                    emailInsert: emailInsert,
                    messageInsert: messageInsert
                },
                success: (successObj) => {
                  var successResult = JSON.parse(successObj);
                    if(successResult)
                    {
                        console.log(successResult);
                        alert('Thank You ' + nameInsert + '! Your Message Received Successfully!');
                    }
                    else
                    {
                        console.log('Message Insertion failed!');
                        alert('Message Insertion failed!');
                    }
                }
            });
            return true;    //Allows you to submit.
          }
        });
   });
请在您的回答中添加一些解释。 - Lajos Arpad
0
$("#myformId").submit(function (event) {
    // submit modal form of create & edit 
    event.preventDefault();
    formObj = $(this);
        
    // check the form input is valid or not if not valid then return false;
    if (!formObj.validate().form()) return false;

    data = $(formObj).serializeArray();

    // do stuff with ajax or anything else what you wants 
});

说明：先验证表单，如果验证通过，则调用ajax请求，否则使用return false停止执行；

var validator = $（“#myform”）。validate（）;验证表单，如果有效返回true，否则返回false。所以我们只需要检查if (!formObj.validate().form())

更多细节请参见此处的文档。

我分享了validate函数的自定义选项。

$(function () {
    $('form.needs-validation').each(function() {   // <- selects every <form> on page which contains .needs-validation class
        var validator = $(this).validate({
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
});

有关如何自定义JQuery验证的更多详细信息请参见此处

要自定义默认验证消息，请参见下面的答案URL，这对我非常有帮助

  1. 更改默认错误消息
  2. 如何在JQuery Validate错误消息中包含字段标签
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接