Wednesday, August 04, 2010

Using jQuery validation in a sharepoint web part

As we all know, a sharepoint page can only have one <form > tag in it. As anyone who wanted to use jQuery validation knows, the validation script needs to run on a form tag.
So how do I use the validation code in a sharepoint web part?

The answer is to run the script against the form that already exists in the page. For example, I had to write a web part with an email address field, and wanted to help the users by validating the text they entered is a valid email address on the client side (I also validate on the server side - just in case someone is running a browser with no script). This is the "Render" override code that I used:

       txtEmailAddress1.CssClass = "required email";
       if (SPContext.Current.FormContext.FormMode != Microsoft.SharePoint.WebControls.SPControlMode.Edit)
$().ready(function() {
    $(""#" + this.Page.Form.ClientID + @""").validate();

As you can see, I am adding a css class of type "required email" for the text box, and then telling the form on the page to validate using the jquery validation plug in. This of course assumes you added the references to the jquery scripts to the page...which you may want to do as part of the web part (override oninit, and registerclientscriptblock) or as part of the master page (if you expect a lot of web parts to use it).

As for the "if (SPContext.Current.FormContext.FormMode != Microsoft.SharePoint.WebControls.SPControlMode.Edit)" line - you have to be careful that your validation does not prevent you from editing the page. For example, if you remove that "if", you will not be able to change the properties of any web part on the page without first entering a valid email address in the textbox!

1 comment:

web design Perth said...

I tried this code and it is working fine. Thanks for sharing this one buddy.