In my previous post, I talked about input-masking to help ensure the quality of the inputs from the user. Information such as phone numbers and ZIP code can be masked because format is anticipated well in advanced. There are certain types of inputs though that are tough or impossible to mask. Take the email address for example: masking is not applicable (or cumbersome) to implement because there are so many formats that you can apply to an email address, the lengths are variable, and some special characters can be inserted anywhere before the @ sign.
Some classes of data are best validated using regular expressions (or regex). Email address is typically validated using regex. Another field or data-element similar to email address in the way you validate it is the URL (Web sites, etc.)
The OOTB SharePoint forms for the lists (NewForm.aspx and EditForm.aspx) will validate many things. For example, you can make a field be a required field and the OOTB forms will make sure the user input something. Also, when you specify a SharePoint column to be of type “something other than text” (types such “Numbers” and “Dates”) SharePoint will enforce validations on those fields as well. What’s the problem with email addresses and URLs in OOTB SP forms? They are treated as text and the values’ correctness are not enforced. Here’s an example:
An invalid email address allowed to be saved in SharePoint
You can type in “asdf” on the email address field and it will be okay for the form. That’s not right! So let’s “tweak” the SharePoint forms to make them validate email address.
For this solution, we again use jQuery JavaScript library like the input-masking exercise. We will also need the validation plugin. Upload the validation plug-in into a “scripts” library in your SharePoint site.
Next, open-up the SharePoint Site and edit the list’s NewForm.aspx or EditForm.aspx in SharePoint Designer. In this example, we are editing the Contacts List EditForm.aspx. You want to look for the table element whose ID is onetIDListForm. Insert the following code just below the table.onetIDListForm element (notice that we’re simply extending the source code from the previous post):
<script src="../../scripts/jquery-1.3.2.js"></script>
<!-- jquery plugin for input-masking... -->
<script src="../../scripts/jquery.maskedinput-1.2.2.min.js"></script>
<!-- jquery plugin for validation... -->
<script src="../../scripts/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Apply input-masks to "phone number" fields and ZIP
$("input[title='Business Phone']").mask("(999) 999-9999");
$("input[title='Home Phone']").mask("(999) 999-9999");
$("input[title='Mobile Phone']").mask("(999) 999-9999");
$("input[title='ZIP/Postal Code']").mask("99999");
/*--- Lines from this point onwards: validation of the email address field ---*/
// Apply the "validation plugin"
$("#aspnetForm").validate({
submitHandler: function(form) {
}
});
// Since it's hard to match input/field by ID value, use the validation plugin's "rules()" method
// Here, we apply the "email rule" to the input whose title is "E-mail Address"
$("input[title='E-mail Address']").rules(
"add",
{ email: true,
messages: {
email: "Please enter a valid email address."
}
}
);
// We add jquery's blur() event to the email-address field so that the form
// will keep the focus on the field until the user has corrected the problem
$("input[title='E-mail Address']").blur(function() {
if (!$("input[title='E-mail Address']").valid()) {
this.focus();
}
});
// Finally, prevent the user from clicking OK if the email address is invalid
$("input[value='OK']").focus(function(){
if (!$("input[title='E-mail Address']").valid()) {
alert("Please enter a valid email address.");
$("input[title='E-mail Address']").focus();
}
});
});
</script>
After the code snippet is inserted into the form, the SharePoint Contact form will now ensure that the inputs conform to the email address field:
Email address now validated
