表单验证不起作用,并阻止表单提交
Form Validation not working and keeping form from submitting
我有一个用来发送文本的表单。它一直工作到我添加验证代码。现在,表单不会提交,并且验证根本不起作用。我在文件中有jQuery和验证库。
我没有收到任何错误。当我点击提交时,它什么都不做。是否有人在我的验证代码或通用代码中看到导致此表单无法提交和/或验证不起作用的任何内容?
<form action="" method="POST" id="text-form">
<label>Enter the number to send to
<input type="number" name="number" placeholder="Phone Number" class="block" id="number">
</label>
<label>Choose their phone service provider
<select class="block" id="carrier" name="carrier">
<option></option>
<option value="vtext.com">Verizon</option>
<option value="vmobl.com">Virgin Mobile</option>
<option value="sms.alltelwireless.com">Alltel</option>
<option value="txt.att.net">AT&T</option>
<option value="sms.myboostmobile.com">Boost Mobile</option>
<option value="text.republicwireless.com">Republic Wireless</option>
<option value="messaging.sprintpcs.com">Sprint</option>
<option value="tmomail.net">T-Mobile</option>
<option value="email.uscc.net">U.S. Cellular</option>
</select>
</label>
<textarea placeholder="Your Message" class="block" id="message" name="message"></textarea>
<input type="submit" value="Send Text" id="submit-text">
<p id="text-success">Your Message Sent Successfully!</p>
</form>
jQuery(document).ready(function() {
$("#submit-text").on("click", function(event) {
event.preventDefault();
var number = $("#number").val();
var carrier = $("#carrier").val();
var message = $("#message").val();
$("#text-form").validate({
onfocusout: true,
rules: {
number: {
required: true,
minlength: 2
},
carrier: {
required: true
},
message: {
required: true,
minlength: 2
}
},
messages: {
number: {
required: "Please enter the party's phone number.",
minlength: "The phone number seems a bit short, doesn't it?"
},
carrier: {
required: "Please choose their carrier"
},
message: {
required: "Please enter your message",
minlength: "Your message seems a bit short. Please enter at least 2 characters"
}
},
submitHandler: function(form) {
$.ajax({
url: "text-send.php",
type: "POST",
data: {
"number": number,
"carrier": carrier,
"message": message
},
success: function(data) {
//console.log(data); // data object will return the response when status code is 200
if (data == "Error!") {
alert("Unable to send email!");
alert(data);
} else {
$(".project-container").addClass("removeClass");
$("#text-success").show();
$(".light-gray-container").hide();
}
},
complete: function() {
$('body, html').animate({
scrollTop: $('#text-success').offset().top
}, 'slow');
},
error: function(xhr, textStatus, errorThrown) {
alert(textStatus + "|" + errorThrown);
//console.log("error"); //otherwise error if status code is other than 200.
}
});
}
})
});
});
试试这个
jQuery(document).ready(function() {
$("#text-form").validate({
onfocusout: true,
rules: {
number: {
required: true,
minlength: 2
},
carrier: {
required: true
},
message: {
required: true,
minlength: 2
}
},
messages: {
number: {
required: "Please enter the party's phone number.",
minlength: "The phone number seems a bit short, doesn't it?"
},
carrier: {
required: "Please choose their carrier"
},
message: {
required: "Please enter your message",
minlength: "Your message seems a bit short. Please enter at least 2 characters"
}
},
submitHandler: function(form) {
var number = $("#number").val();
var carrier = $("#carrier").val();
var message = $("#message").val();
$.ajax({
url: "text-send.php",
type: "POST",
data: {
"number": number,
"carrier": carrier,
"message": message
},
success: function(data) {
//console.log(data); // data object will return the response when status code is 200
if (data == "Error!") {
alert("Unable to send email!");
alert(data);
} else {
$(".project-container").addClass("removeClass");
$("#text-success").show();
$(".light-gray-container").hide();
}
},
complete: function() {
$('body, html').animate({
scrollTop: $('#text-success').offset().top
}, 'slow');
},
error: function(xhr, textStatus, errorThrown) {
alert(textStatus + "|" + errorThrown);
//console.log("error"); //otherwise error if status code is other than 200.
}
});
}
});
});
我认为您想更改处理点击事件
$("#submit-text").on("click", function(event) {
处理提交事件
$("#text-form").on("submit", function(event) {
相关文章:
- 如果ng单击附加到提交按钮,则表单未验证
- Magento表单验证,表单提交时没有有效字段
- 表单验证不起作用,并阻止表单提交
- 'Alajax' Jquery 简单表单提交.如果表单未经验证,如何防止提交
- 未执行Ajax隐藏表单提交验证
- 验证失败时阻止表单提交(Angular Material)
- jQuery验证插件停止表单提交,提交按钮获胜'不起作用
- angular js如何在提交一个表单时验证另一个表单
- 在表单提交中,在Codeigiiter验证之前先进行jquery检查
- 验证数组文件字段的表单提交
- 使用js表单验证器禁用html表单提交按钮
- 验证表单阻止表单提交
- AngularJS:在异步验证器完成之前阻止表单提交
- 引导验证不适用于表单提交
- 验证电子邮件时无法阻止表单提交
- JavaScript表单提交验证会干扰其他提交按钮
- HTML表单提交验证没有't为JS函数工作
- 仅将 jQuery 表单提交验证应用于 2 个提交按钮中的 1 个
- Redux表单提交验证不设置错误消息
- 表单提交验证动态下拉列表数