Wednesday, January 21, 2009 7:58 AM
If you've ever tried to manipulate the ASP.NET validation controls via JavaScript, you should by now know how painful it is. Ok, so how did I come to the "painful" conclusion, at my job I was tasked with partial validation, meaning if certain criteria is met, only a partial part of the page should be validated without post back.
To be exact, it comes down to a very common concept that you see around if you've ever placed an order online using a credit card, who hasn't? At the point were you are asking for billing and shipping information, there is usually a flag, usually a check box, that you can toggle to indicate that your billing information is the same as your shipping information. At my job's web site, we have both address inputs visible at the same time with validation controls on both, therefore, my employer wanted to completely disable the ship to address controls if the check box that states "same as billing" is checked and I was like "oh, that's going to be easy!" - it is never easy!
Ok, so I proceeded along, on checked, I first used prototype to transfer all the content from the billing to the shipping and then disable all the controls by adding the disable attribute using the following script.
var elements = $(detailsPanelId).select('input[type="text"]', 'select', 'input[type="radio"]');
if($(sameBoxId).checked){
// disable all inputs
for(var i = 0; i < elements.length; i++){
$(elements[i]).setAttribute('disabled', 'disabled');
}
}
Ok, that being said, I was excited and I went off testing but with little surprise, I hit a wall. Problem here is when I submitted the form, all the validation controls on the ship to side failed and threw errors and we don't want that and with great dumbness, I went "doooh", disabled controls are not submitted with a form, therefore, the validation controls will assume that they are empty and throw exceptions.
Next step was to find out how I can programmatically via JavaScript disable the validation controls and I found a buzillion articles and postings talking about using the "ValidatorEnable" functions which off course did not work for me for some obscure reason which I wasn't going to dig into.
Moving on - what else? I did some more research to see if Microsoft has any smart property that will help me do just what I want to do and viola! I found the "SubmitDisabledControls" property of the ASP.NET form. This is all brand new to ASP.NET 2.0 so don't try it on anything older like classic asp :). By adding that function to the form, I noticed that I now have an addition script added to the page that looks like this.
<script type="text/javascript">
<!--
function WebForm_OnSubmit() {
WebForm_ReEnableControls();
return true;
}
// -->
</script>
Did that work? Nope! well I'll take that back, it did work but not completely, it was unable to submit some type of controls especially RadioButtonList, well no time to go figure out why, which could lead to any number of reasons including the data source object or the selected index property, or RadioButtonList does not support disable, etc..
Final touch, I decided it was safer for me to enable the controls myself by removing the disable attributes by doing just the opposite. Here is the snippet that I used.
$(buttonId).observe('click', function(){
EnableAll(detailsPanelId);
});
// OR
$(formId).observe('submit', function(){
EnableAll(detailsPanelId);
});
The script above shows how you can do just that using the button on click event or form on submit event, its probably safer the use the form submit event, since the submit button click event makes it visible to slow browsers, so the user will actually see the controls become enabled for a brief second before the form post, either way, you should only use one way and that's which ever suites your scenario.
function EnableAll(detailsPanelId){
var elements = $(detailsPanelId).select('input[type="text"]', 'select', 'input[type="radio"]');
// enable all inputs
for(var i = 0; i < elements.length; i++){
if($(elements[i]).hasAttribute('disabled')){
$(elements[i]).removeAttribute('disabled', 'disabled');
}
}
}
Ignore the detailsPanelId, that simply looks for all the controls within that div tag, so we don't go running off disabling other unwanted controls. Anyway, that's the solution - it works like a charm! Comment or send me an email if you have any questions.