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();
}
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首先，您不需要显式添加
classRulesrequired$('#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);
},
});
});
你可以尝试这样做：
if($("#form").validate()) {
return true;
} else {
return false;
}
> 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);
}
});
}
});
这个具体示例将仅检查输入，但您可以对其进行调整，将类似的内容添加到您的 .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;
};
},
我认为带有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);
}
});
}
});
我认为我首先验证表单，如果验证通过，那么我会进行ajax发布。不要忘记在脚本末尾添加“return false”。
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();
});
});
在检查表单是否有效之前，您需要触发表单验证。在每个字段中输入数据后，字段验证将运行。表单验证由提交事件触发，但在文档级别。因此，您的事件处理程序在 jquery 验证整个表单之前被触发。但不用担心，有一个简单的解决方案可以解决所有这些问题。
您应该验证表格：
if ($(this).validate().form()) {
// do ajax stuff
}
https://jqueryvalidation.org/Validator.form/#validator-form()
$("#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();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，这对我非常有帮助
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>
阿贾克斯：
$(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.
}
});
});
如果使用“jquery-validate”验证插件，那么您需要了解一些细节。 1.插件订阅的表单事件有《click》、《focusin》、《focusout》、《keyup》、《submit》。 也就是说，他监视表单 - 并相应地监视“提交”事件。 因此，插件无论如何都会监视表单，没有必要编写额外的脚本。
2.如果表单是通过ajax加载的，则插件无法初始化，即初始化时表单还没有DOM。 所以一个简单的解决方案是将初始化放在“click”事件中。
<script type="text/javascript">
$(document).on('click','.cart-wrapper', function(){
$('.cart-checkout-form').validate({
rules: {
name: {
required: true,
minlength: 2
},
},
messages: {
name: {
required: "Enter your name",
minlength: "Your name must have at least 2 characters."
},
},
});
});
</script><div class="cart-wrapper">
<form class="cart-checkout-form">
<input type="text"
class="form-control"
name="name"
placeholder="Name"
value=""
required />
<input type="text"
class="form-control phone-field"
name="phone"
value=""
placeholder="+7(___)___-__-__"
data-rule-required="true"
data-rule-minlength="10"
data-msg="Enter your phone number"
required />
<input type="submit" value="Checkout">
</form>
</div>形成原生 JavaScript
checkValidityHTML5$(document).ready(function() {
$('#urlSubmit').click(function() {
if($('#urlForm')[0].checkValidity()) {
alert("form submitting");
}
});
});