Jquery 如何对不是提交类型而是按钮类型且没有表单的按钮单击事件调用验证?
我一直在努力解决这个问题,我知道只要按钮的类型是submit,就可以在表单中启动验证。但是我在视图上还有一些其他选项卡,当我使用submit时,它会导致一个posback并返回到第一个选项卡。我不希望发生这种情况,因此我将验证放在一个函数中,并将按钮类型更改为按钮,删除表单标记,并尝试在按钮单击事件上调用验证函数,但它没有触发。这是否可以不使用表单标记 我的代码是Jquery 如何对不是提交类型而是按钮类型且没有表单的按钮单击事件调用验证?,jquery,asp.net-mvc,validation,bootstrapvalidator,Jquery,Asp.net Mvc,Validation,Bootstrapvalidator,我一直在努力解决这个问题,我知道只要按钮的类型是submit,就可以在表单中启动验证。但是我在视图上还有一些其他选项卡,当我使用submit时,它会导致一个posback并返回到第一个选项卡。我不希望发生这种情况,因此我将验证放在一个函数中,并将按钮类型更改为按钮,删除表单标记,并尝试在按钮单击事件上调用验证函数,但它没有触发。这是否可以不使用表单标记 我的代码是 $(document).ready(function () { $("#btnUpdateModerator").c
$(document).ready(function () {
$("#btnUpdateModerator").click(function () {
ValidateIt();
});
ValidateIt();
});
function ValidateIt() {
var validator = $("#Users").bootstrapValidator({
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields: {
DealerUsername: {
message: "Username is required",
validators: {
notEmpty: {
message: "Please Provide Username"
}
}
},
email: {
message: "Email address is required",
validators: {
notEmpty: {
message: "Please provide Email address"
},
emailAddress: {
message: "Email address was invalid"
}
}
},
password: {
validators: {
notEmpty: {
message: "Password is required"
},
stringLength: {
min: 6,
message: "Password must be at least 6 characters long"
},
different: {
field: "email",
message: "Email and Password cannot match"
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: "Confirm Password is required"
},
identical: {
field: "password",
message: "Password and Confirmation Password must match"
}
}
},
department: {
validators: {
notEmpty: {
message: "Department is Required"
}
}
}
}
});
}
我相信bootstrap validator会将自身绑定到表单的submit()方法,所以将其移动到函数中实际上并没有帮助。但是,您可以截取表单的提交方法,并且在需要提交之前不允许表单提交
$("#myForm").submit(function(e){
e.preventDefault(); // <-- prevents the form from submitting
// do stuff
this.submit() // <-- send it through
});
$(“#myForm”).submit(函数(e){
e、 preventDefault();//我认为您需要保留表单元素,但是将按钮类型设置为“button”而不是“submit”。然后您可以使用引导验证程序的“validate”方法手动验证表单
假设表单元素具有“用户”的id
,您应该能够将代码更改为:
$(document).ready(function () {
$("#btnUpdateModerator").click(function () {
$('#Users').bootstrapValidator('validate');
});
ValidateIt();
});
注意:编写的ValidateIt()
函数不会验证表单,它会在表单上设置验证器
注:我认为API文档位于以下位置:
关于进行ajax调用的评论后更新:
如果您希望在单击按钮时进行ajax调用,但仅当表单有效时,我相信您会执行以下操作:
$("#btnUpdateModerator").click(function () {
$('#Users').bootstrapValidator('validate');
if ($('#Users').bootstrapValidator('isValid')) {
// Make the ajax call here.
}
});
另一种书写方式是:
$("#btnUpdateModerator").click(function () {
var validator = $('#Users').data('bootstrapValidator');
validator.validate();
if (validator.isValid()) {
// Make the ajax call here.
}
});
如果没有表单元素,那么$(“#用户”)引用的是什么元素
?@JohnS,是的。#用户是一个div,但这仍然会导致回发,如果我在另一个选项卡中,则在提交后会返回到第一个选项卡。这类问题提出了另一个问题,我将使用ajax调用将数据传递到数据库,是否仍会调用字段是否经过验证?感谢您坚持t通过我的讨论,非常感谢。第二个是我能够工作的。谢谢,你救了我的命。嗨,我们不能提交一个表单吗?验证工作正常,但是当点击提交时,提交按钮被禁用,表单没有提交