我有一个简单的表单，它使用jquery和一个servlet。 jquery 对 servlet 进行 ajax 调用，servlet 进行一些服务器端计算，然后通过 jQuery 在同一页面上显示结果。 我不希望表单执行默认提交（并转到 servlet），因为我想保持在同一页面上并动态显示结果。它完全按照我想要的方式工作：
.HTML：
<form name="form1" action="FormHandler1" method="POST" class="stats-form">
<input class="stats-input" id="number0" type="text" name="number0">
<input id="number1" type="text" name="number1">
<input id="number2" type="text" name="number2">
<input id="number3" type="text" name="number3">
<input type="submit" value="Calculate" class="calculate-stats" name="stats-submit">
</form>
j查询：
form.submit (function(event) {
$.ajax({
type: form.attr("method"), // use method specified in form attributes
url: form.attr("action"), // use action specified in form attributes (servlet)
data: form.serialize(), // encodes set of form elements as string for submission
success: function(data) {
// get response form servlet and display on page via jquery
}
});
event.preventDefault(); // stop form from redirecting to java servlet page
});
现在，我想添加表单验证，因为 servlet 需要十进制数字来完成它的计算。 应只允许用户输入数字，而不能允许用户输入其他字符。 为此，我采用了流行的jQuery验证插件。
验证按预期工作，但要对 servlet 进行 ajax 调用，我必须使用 jQuery Validation 提供的 submitHandler，而不是上面显示的 jQuery submit 方法。 当我使用验证提交处理程序时，将执行表单在提交时的默认操作，转到servlet页面而不是停留在同一页面上以在jQuery中动态显示我的结果。 我必须向 formHandler 传递一个表单，而不是像以前那样传递一个事件，这允许我阻止默认操作。 唯一的选择是返回 false，但它不起作用。 在过去的两天里，我一直在试图弄清楚这一点，并且几乎耗尽了我的谷歌。 这是让我悲伤的新代码：
form.validate({
rules: {
number0: ruleSet,
number1: ruleSet,
number2: ruleSet,
number3: ruleSet,
},
submitHandler: function (form) {
$.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success: function () {
// get response from servlet and display on page via jQuery
}
});
return false; // required to block normal submit ajax used
}
});
任何帮助将不胜感激，我想使用这个简洁的jQuery表单验证，但我可能只是从头开始编写自己的jQuery验证，以便我可以使用我已经使用的表单提交方法。
当提交事件触发时，阻止表单提交为时已晚。您应该绑定到提交按钮上的单击事件，并使用 event.preventDefault（） 阻止它提交。如果您的验证例程成功完成，则可以使用 $.serialize（） 和 $.submit（） 手动提交表单。
您可以将event作为submitHandler的第二个参数，并且可以自己执行preventDefault。
submitHandler: function (form, event) {
event.preventDefault();
// your remaining code goes below this.
}
为了解决此问题，我在我的表单提交处理程序中单独验证表单。 我只是在表单提交中检查有效性，仅在 true 时才执行 ajax 调用。这允许处理提交事件的操作（preventDefault（）），无论是否进行了 ajax 调用。
form.validate({
rules: {
number0: ruleSet,
number1: ruleSet,
number2: ruleSet,
number3: ruleSet,
}
});
form.submit (function(event) {
if (form.valid())
{
$.ajax({
type: form.attr("method"), // use method specified in form attributes
url: form.attr("action"), // use action specified in form attributes
data: form.serialize(), // encodes set of form elements as string for submission
success: function(data) {
// get response from servlet and display on page via jQuery
}
});
}
event.preventDefault(); // stop form from redirecting to java servlet page
});
$('#post_form_jason_data').click(function() {
$('#myform').validate({
rules: {
txtwtrt: {
required: true
// email: true
},
tax_name: {
required: true,
minlength: 5
},
tax_rate: {
required: true
//minlength: 5
}
}
});
alert('insert the value');
if (('#myform').valid()){
$.ajax({
url: "swt_tax_add.html",
type: 'POST',
data : $('#myform').serialize(),
success: function(msg) {
window.location.href='swt_tax/?st=1';
$('#message').html(msg);
}
});
}
return false;
});
我知道
很多人已经回答了，但我会在2020年展示我的整个代码
$(document).ready(function () {
$("#PaymentModeForm").validate({
rules: {
"f_cheque_mode_display": {
required: true,
},
"f_cheque_infavour": {
required: true,
},
"f_cheque_payablein": {
required: true,
},
"f_cheque_address": {
required: true,
},
"f_cheque_mobileno": {
required: true,
},
"f_bank_mode_display": {
required: true,
},
"f_bank_beneficiary": {
required: true,
},
"f_bank_acc": {
required: true,
},
"f_bank_bankname": {
required: true,
},
"f_bank_branchname": {
required: true,
},
"f_bank_ifsc": {
required: true,
},
"f_cod_mode_display": {
required: true,
},
"f_cod_mode_charges": {
required: true,
},
"f_razorpay_mode_display": {
required: true,
},
"f_razorpay_key": {
required: true,
},
"f_razorpay_secret": {
required: true,
}
},
messages: {
"f_cheque_mode_display": {
required: "Enter Payment mode display on website"
},
"f_cheque_infavour": {
required: "Enter Infavour Of",
},
"f_cheque_payablein": {
required: "Enter Payble In",
},
"f_cheque_address": {
required: "Enter Courier Address",
},
"f_cheque_mobileno": {
required: "Enter Mobile No",
},
"f_bank_mode_display": {
required: "Enter Payment mode display on website"
},
"f_bank_beneficiary": {
required: "Enter Beneficiary Name",
},
"f_bank_acc": {
required: "Enter A/C No",
},
"f_bank_bankname": {
required: "Enter Bank Name",
},
"f_bank_branchname": {
required: "Enter Branch Name",
},
"f_bank_ifsc": {
required: "Enter IFSC Code",
},
"f_cod_mode_display": {
required: "Enter Payment mode display on website",
},
"f_cod_mode_charges": {
required: "Enter COD Charges",
},
"f_razorpay_mode_display": {
required: "Enter Payment mode display on website",
},
"f_razorpay_key": {
required: "Enter Key Id",
},
"f_razorpay_secret": {
required: "Enter Secret Key",
}
},
submitHandler: function (form, e) {
e.preventDefault();
var form = $(this);
var url = "/PaymentModeSubmit";
$.ajax({
type: "POST",
url: url,
data: $("#PaymentModeForm").serialize(),
success: function(data)
{
alert(data);
}
});
return false;
}
});
return
});