SharePoint 2010: Custom Validation in List Form for US Phone Number

Recently I had hard time in validating the a filed for a phone number in a custom list form. The OOB ASP.NET RegEx validator can be used but somehow in SharePoint 2010 even if the RegEx expression is correct, it does not validate the correctly formated number. Therefore I decided to use the custom validator.

1. Before you go ahead and use the validator, you should have the ID of the control you wish to validate. The best way I have figured out so far is:
    a. Browse to the custom new form in browser and go to view source
    b. Locate the control and copy the portion of the control name (not the ID) aftre the ff value of control. For example if the name of the control is ctl00$m$g_7864a235_2177_4ad9_bb8e_c9c86a8b6b4f$ff61$ctl00$ctl00$TextField then you should copy only the text aftre the ff (form field) text including ff. so the form name that you will use for this example will be ff61$ctl00$ctl00$TextField

2. You can simply insert the custom ASP.NET validator from ASP.NET tools sectionwhile you are in design view of the custom form:

3. Put correct statement in error message property of the validator.
4. Paste this name (ff61$ctl00$ctl00$TextField in our example) in the ControlToValidate property of the custom validator.
5. Put the name of the javascript function (where you will be performing the validation.) in the ClientValidationFunction property of custom validator.
6. Go to the Code of your form and put the java script function in the PlaceHolderAdditionalPageHead area.
Sample Code:

        function ValidateCallerPhoneNumber(source, arguments)
{
var phoneNumberPattern = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
arguments.IsValid = phoneNumberPattern.test(arguments.Value);
return;
}

To understand the RegEx, please read this.

And you are all set.On run time, the custom validator will fire this java script function and supply the required parameters and get the IsValid back from function and show the error message in case validation fails.

SharePoint 2010 Custom List Form: Issues with MultiTab UI

If you want not to use InfoPath Form for some reason and want to customize the List Form using DVWP, which is still a good option in case you want more control on the UI of the form, you will come accross a few issues specially if you are using the JQuery tabs (MultiTab form). To get the JQuery tabs to work, you have to download JQuery UI and then upload in a Script Library (A doc library), as you were doing on SharePoint 2007. Then you have to refer them on the custom form like this:

[This should go in the PlaceHolderAdditionalPageHead]

<link rel="stylesheet" href="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/themes/base/jquery.ui.all.css">
<script src="/ScriptLib/jquery-1.5.1.js"></script>
<script src="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/ui/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="/ScriptLib/jquery-ui-1.8.11.custom/development-bundle/demos/demos.css">

Once done, you code the form HTML to have tabs as explained here.

But you are not done. If you have any DateTime control on your form, they will look very small and if you look at the view source, you would find that the font size is 0 for the Date Picker control.

Therefore, you have to override the settings of CSS like this:


         <style>

.ms-dtinput{
   font-size:11px!important;
}

</style>

Note: I recently learned that the issue was with one of the CSS and better way of handling would be to correct that CSS. I was using JQuery UI (tabs) and one of the CSS I was using was jquery.ui.theme.css. In this CSS, here is the code snippet that should be changed:


/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }

The font-size part should be removed and this wil fis the issue and the consumer component will inherit the font size from main CSS (in my case core.css).

Then there is another issue if you many any HTML change in the form and save it, assuming that you made your custom form default, aftre changing the HTML, though it still shows as default form, it does not work and you will see the OOB form when aftre you change any HTML in the form and save it. SO you have to set OOB form default and set the custom form default again. I am assuming that either I am missing some setting some where (and the chances for that is remote) or it is a bug.