ASP.NET form validation - highlight fields with JS/DHTML

Question

Hello,

I have an issue that's been bugging me this morning. I'm building an ASP.NET webforms app that has many input forms and I'm trying to standardise how I manage validation. I would like to use the built-in validators (RequiredFieldValidator, Regex etc). My html requirements are:

Before validation:

<div class="formLine">
   <label for="fieldID">Form Label</label>
   <input type="text" id="fieldID" />
</div>

After validation (in case of error):

<div class="formLine formError">
<label for="fieldID">Form Label</label>
<input type="text" id="fieldID" />
<span class="errorMessage">Please enter some value</span>
</div>

The additional span is fine, this is achieved with the ASP.NET validation controls. My problem is adding the formError class to the containing <div>.

I'm comfortable using jQuery/DHTML to add this class, but just don't know where to hook it in. Is it possible to monitor DOM changes with jQuery - for example fire an event handler whenever a span is added as a child of <div class="formLine">?

Does anyone else have any good suggestions for dealing with this?

Thanks for reading.

Answer 1

EDIT: After clarification

You could write a custom function that is called by the onClick client side event. Because you are using ASP.Net validation controls you should be able to call the function ValidatorValidate(val) where val is the validator. You could then check the contents of the validators SPAN tag for your validation error and update your div tag accordingly.

Note: I'm no expert on client side validation but this should work in principal.

Further info on MSDN.

---

You need to declare your div as runat="server" with an id tag so you can reference it in server side code then in page load do a test for Page.IsValid which will return false if one of your validators fails to vaildate.

You can then set the class property on your div programatically. Something like:

<div class="formLine" id="divForm" runat="server">   
  <label for="fieldID">Form Label</label>   
  <input type="text" id="fieldID" />
</div>

Code-Behind (VB)

If Not Page.IsValid Then
  divForm.Attributes.Remove("class")
  divForm.Attributes.Add("class", "formLine formError")
End If

Answer 2

i'm assuming you're looking for a way to do this on the client side, without postback.

when you use asp.net validation controls on your webform you'll notice that a script reference to WebUIValidation.js is rendered on your page. peeking into that file offers some useful info. there's a global variable in that file named Page_IsValid. whenever validation fails, that variable is set to false.

EDIT: the WebUIValidation.js script reference was prior to .net 2.0, so you can't look at that file anymore. however, the Page_IsValid variable is still there and can be used by hooking into a form submit handler. something like this

// verified that this works
$(document).ready(function() {
    $('#form1').bind('submit', function(e) {
        if (!Page_IsValid)
            $('#yourDiv').addClass('error');
    });
});