我在该表单中有一个表单，该表单有两个按钮和两个文本框，单击第一个按钮后，第一个文本框字段出现验证，单击第二个按钮后，第一个文本框的验证消失，但回发。
如何在重置 jquery 验证时防止回发。
<form id="form1" runat="server">
<div id="div1" class="form-horizontal">
<div class="form-group">
<div class="col-md-3">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<asp:Button ID="Button1" CssClass="submit btn btn-primary " runat="server" Text="Submit" />
</div>
</div>
</div>
<div id="div2" class="form-horizontal">
<div class="form-group">
<div class="col-md-3">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<asp:Button ID="Button2" CssClass="btn btn-primary" runat="server" Text="Submit" />
</div>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#Button1').click(function () {
$('#form1').validate({
errorClass: 'help-block animation-slideDown',
errorElement: 'div',
errorPlacement: function (error, e) {
e.parents('.form-group > div').append(error);
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
$(e).closest('.help-block').remove();
},
success: function (e) {
e.closest('.form-group').removeClass('has-success has-error');
e.closest('.help-block').remove();
},
rules: {
'TextBox1': {
required: true,
},
},
messages: {
'TextBox1': {
required: 'ProvideYourCurrentPassword',
},
},
});
$("#TextBox2").rules('remove');
});
$('#Button2').click(function () {
$('#form1').validate({
errorClass: 'help-block animation-slideDown',
errorElement: 'div',
errorPlacement: function (error, e) {
e.parents('.form-group > div').append(error);
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
$(e).closest('.help-block').remove();
},
success: function (e) {
e.closest('.form-group').removeClass('has-success has-error');
e.closest('.help-block').remove();
},
rules: {
'TextBox2': {
required: true,
},
},
messages: {
'TextBox2': {
required: 'ProvideYourCurrentPassword',
},
},
});
$("#TextBox1").rules('remove');
});
});
</script>
最佳答案
试试这个脚本，它可能对你有帮助。
<script>
$(document).ready(function () {
$('#form1').validate({
errorClass: 'help-block animation-slideDown',
errorElement: 'div',
errorPlacement: function (error, e) {
e.parents('.form-group > div').append(error);
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
$(e).closest('.help-block').remove();
},
success: function (e) {
e.closest('.form-group').removeClass('has-success has-error');
e.closest('.help-block').remove();
},
});
$('#Button1').click(function () {
$("#TextBox1").rules("add", { required: true, messages: { required: '<%=ValidationMessage.ProvideYourCurrentPassword%>' } });
$("#TextBox2").each(function () {
$(this).rules('remove');
});
});
$('#Button2').click(function () {
$("#TextBox2").each(function () {
$(this).rules('add', {
required: true
});
});
$("#TextBox1").each(function () {
$(this).rules('remove');
});
});
});
</script>
关于javascript - 在 ASP.NET 代码中通过 javascript 重置 Jquery 验证后停止回发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32887343/