jquery - Ajax提交之前的jQuery表单验证

Question

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 生成的，所以我永远无法确定我得到什么 name[id] 或输入类型。

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

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

JS：

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

score 112 · Accepted Answer

您可以使用该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插件将调用提交处理程序。

score 19 · Accepted Answer

首先，您不需要classRules显式添加，因为requiredjquery.validate 插件会自动检测到。所以你可以使用这个代码：

在表单提交时，您会阻止默认行为
如果表单无效，则停止执行。
否则，如果有效则发送 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);
    },
  });
});

score 7 · Accepted Answer

7

您可以尝试这样做：

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

于 2012-07-13T11:32:36.013 回答

score 7 · Accepted Answer

> 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);
            }
        });
    }
});

score 5 · Accepted Answer

这个特定的示例将只检查输入，但您可以对其进行调整，将类似这样的内容添加到您的 .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;
    };
},

score 4 · Accepted Answer

我认为带有 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);
                        }            
                    });
                }
            });

score 3 · Accepted Answer

我认为我首先验证表单，如果验证通过，那么我会发布 ajax 帖子。不要忘记在脚本末尾添加“return false”。

score 0 · Accepted Answer

function validateForm()
{
    var a=document.forms["Form"]["firstname"].value;
    var b=document.forms["Form"]["midname"].value;
    var c=document.forms["Form"]["lastname"].value;
    var d=document.forms["Form"]["tribe"].value;
    if (a==null || a=="",b==null || b=="",c==null || c=="",d==null || d=="")
    {
        alert("Please Fill All Required Field");
        return false;
    }
    else{

        $.ajax({
        type: 'post',
        url: 'add.php',
        data: $('form').serialize(),
        success: function () {
          alert('Patient added');
          document.getElementById("form").reset();
        }
      });

    }
}

  $(function () {

    $('form').on('submit', function (e) {
      e.preventDefault();

      validateForm();


    });
  });

score 0 · Accepted Answer

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

您应该验证表单：

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

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

score 0 · Accepted Answer

$("#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())

有关更多详细信息，请参阅此处的文档

我分享验证功能的自定义选项

$(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

score -1 · Accepted Answer

表单原生 JavaScriptcheckValidity函数足以触发HTML5验证

$(document).ready(function() {
    $('#urlSubmit').click(function() {
        if($('#urlForm')[0].checkValidity()) {
            alert("form submitting");
        }
    });
});

jquery - Ajax提交之前的jQuery表单验证

11 回答 11

Related

Reference