I used this code (from SO) to disable asp.net Web Form button to disable button when clicked
$(document).ready(function () {
$('[id$=btnSave]').click(function () {
var button = this;
setTimeout(function () {
$(button).attr('disabled', 'disabled');
}, 100);
});
});
but when I add jQuery validation & JQuery Validation Groups for WebForms plugins to page,
$(document).ready(function () {
$("#form1").validateWebForm({
rules: {
myDate: {
customDate: true
},
nic: {
nicNo: true
}
}
});
...
<asp:TextBox ID="txtName" runat="server" CssClass="required" ></asp:TextBox>
It disables the button even when the inputs are not valid. How to avoid disabling the button if the inputs are not valid?
Try using the plugin's built-in .valid()
method to test the form before disabling the button and submitting. As per comments, I realize you're initializing the jQuery Validate plugin with another plugin, but the core concept below should work the same.
DEMO: http://jsfiddle.net/7HzZF/
jQuery:
$(document).ready(function() {
$('#myform').validate({
// rules & options
});
$('#button').on('click', function (e) {
e.preventDefault();
if ($('#myform').valid()) {
$('#myform').submit();
$(this).attr('disabled', 'disabled');
}
});
});
HTML:
<form id="myform">
....
<input id="button" type="submit" />
</form>
Alternatively, if your other plugin allows you to use the submitHandler
callback function, I strongly recommend using that instead.
http://jsfiddle.net/h34bJ/
It only fires on a valid form and it really clears up a lot of this redundant and superfluous event handling.
$(document).ready(function () {
$('#myform').validateWebForm({
// your rules,
submitHandler: function (form) {
$('#button').attr('disabled', 'disabled');
}
});
});