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:
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:
This article is great!
I have used this tool outside of Sharepoint with success but i continue to struggle using the validator tool with Sharepoint. In fact i have yet to get it working. Your example was the first i’ve seen using Sharepoint.
I have followed your example but receive a javascript error. I believe it is tied to the plugin version. I am using jquery.validator v1.6. What version of the validator plugin are you using in this example? I recieve the following javascript error.
‘form’ is null or not an object
Any help will be appreciated.
Hi Rider!
Thanks for the feedback. The version of the jQuery validate plugin that I used for this exercise is 1.5.5. You can download version 1.5.5 from here:
http://www.asp.net/ajaxlibrary/CDNjQueryValidate155.ashx
Let me know if that works.
Thanks.
-Gabe
This is really sending me for a loop. I get the same error:
Line: 31
Char:1735
‘form’ is null or not an object
It seems the error is being thrown from within the js file. I have injected the code into a CEWP. I have inserted the code below the table.onetIDListForm element as you specified in the example, no dice. I think the hardest thing i’ve found is trying to trouble shoot the issue. Any suggestions on how i may debug?
Thanks for responding.
Rider,
It could be a simple jquery matching issue. In my code snippet, I reference “#aspnetForm” because that’s what the ID of the form I saw on the SharePoint ASPX page I was editing. Can you check that the form that SharePoint is using to collect input from user is really ID’ed as aspnetForm? If not, change accordingly.
If you need to debug, my experience with jquery is strip everything and slowly add jquery stuff back. I would suggest to revert the SharePoint ASPX page back to the original state. Then slowly add jQuery to the page. First, add the links to the JS file in the code. This should be no problem. Next, add the $(document).ready() function inside the ASPX code (or content editor Web part). The meat of $(document).ready() can be blank or a simple “alert(‘hi!’);”. If you do an alert on document.ready(), you know the page is setup correctly for the rest of the jQuery stuff.
From here, you can either test the masked-input function or validate-form function.
I’ve also use JS alert() statements to test the state of jquery/javascript objects. For example, if I want to make sure an object is not null (like in your case, browser is claiming it is null), I would alert me the value of the following expression:
alert($(“#aspnetForm”).length);
If the return value is 0, then the jquery object is not matching anything and it truly is null. I’d verify the element ID until I get it right.
I hope that helps.
-Gabe
hey Gabe,
What a great article! thank you so much… the only thing i could improve on is the irritating constant popup which occurs when you try to submit. We already know from the error label “Please enter a valid email address” that there is a problem. So to prevent the OK button from submitting i did:
function PreSaveAction(){
if (!$(“input[title=’Title’]”).valid()) {
return false;
}
return true;
}
Courtenay, thanks for the feedback! I thought lines 45 to 57 of the sample source code would prevent the clicking of OK button if not all data passes validation. I guess you found a way to force the post-back even if the data was invalid. Well, glad to hear you found a good solution to it.
Cheers!
-Gabe
Gabe,
I have to say thanks. This is exactly what I was looking for. However, I have 1 issue that I can’t get around and was hoping you had an idea. Putting this validation in my edit form is forcing the user to enter and email address and it will not allow them to go forward without a valid one. Is there a way I can ignore the validation if the e-mail is blank?
Thanks
Jimmy
Hi Jimmy,
Thanks for the feedback and sorry for the delayed response. All you have to do, on around line 46 of the code snippet is check first if the input box is empty. If it’s not empty, then you must validate. The modified line 46 (inside the blur() delegate) is:
if ($(“input[title=’E-mail Address’]”).val().length != 0) {
if (!$(“input[title=’E-mail Address’]”).valid()) {
this.focus();
}
}
You should probably check if Email Address “is not blank” on the OK button’s focus() delegate (line 53) as well.
Hi Gabe. Very nice article.
You can find here another solution for validation.
Hi Trofo, Thanks for the reply. Good article on your blog too! Sorry it took me a while to respond. I was “out” for a while.
-Gabe
Hello Gabe,
This is working great and I added it to a page that is also using the input-masking scripts from your other article.
One questions on the validation. I have noticed that once I Tab to or click on a field that is using the email validation I can not Tab or click out of the field until it is completed and valid. (Can’t leave blank?)
Is there a way to allow this, so if someone does NOT want to fill the email column out they can move on to another field?
Anyone monitoring this page?
Hi Stacy,
I’m sorry for the delayed response (project deadlines!). The reason you are “trapped” in that email field until you enter a valid email address is because of the blur() event-delegate function. You can completely remove the blur-event-delegate. Or, you can also force the focus on the email address field only if it’s not blank and invalid like below javascript:
$(“input[title=’E-mail Address’]”).blur(function() {
if ( ($(“input[title=’E-mail Address’]”).val().length > 0)
&& (!$(“input[title=’E-mail Address’]”).valid())) {
this.focus();
}
});
-Gabe