通过 ASP.NET 代码中的 javascript 重置 Jquery 验证后停止回发
Stop postback after reseting Jquery validation by javascript in ASP.NET Code
我在该表单中有一个表单,该表单有两个按钮和两个文本框,单击第一个按钮后,第一个文本框字段出现验证,单击第二个按钮后,第一个文本框的验证消失,但 post 返回。
如何在重置 jquery 验证时防止 post 返回。
<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>
Post 你的 Jquery 里面的代码 Sys.Application.add_load
$(function(){
Sys.Application.add_load(function () {
// your Java script Code here
});
});
试试这个脚本,它可能对你有帮助。
<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>
我在该表单中有一个表单,该表单有两个按钮和两个文本框,单击第一个按钮后,第一个文本框字段出现验证,单击第二个按钮后,第一个文本框的验证消失,但 post 返回。
如何在重置 jquery 验证时防止 post 返回。
<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>
Post 你的 Jquery 里面的代码 Sys.Application.add_load
$(function(){
Sys.Application.add_load(function () {
// your Java script Code here
});
});
试试这个脚本,它可能对你有帮助。
<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>