Apply JQuery & Validation plugin in SP2010 list form

It is 2017 Jan and unfortunately I still need to work on SP2010… (cry) I found there are lesser and lesser knowledge about it. I have a hard time to find the tips so let me write one for reference.

Here is the requirement: I need to prepare a form for every staff. They have to input their email address and phone type. So I am going to use OOTB (out-of-the-box) function “Survey" to achieve my job.

The problem is validation. There is a question “Phone Type". Choose among iPhone/Android/Others. If the 3rd radio is chosen, user must fill the “please specific phone type" text field. I found no way to achieve this by OOTB validation column. So I decide to use JQuery + Validation plugin to do it.

Here is a brief summary on my work:
1. Create a Survey list
2. Using SharePoint Designer 2010, create a new custom form. Open and edit it in advanced mode.
3. Upload the needed JS and Validation plugin library files.
4. Insert the JavaScript in the page inline.

In my previous article, I tested newer version JQuery dose not work well with SP2010. I have to use v1.12.4. For Validation plugin, I choose the latest version available which is v1.15.0.

After you download and unzip the package, look for the library files and upload to your server. (You can also upload to your site collection library) I created a “JQuery" subfolder here:
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\
so that the JavaScript library reference will be:
/_layouts/jquery/jquery-1.12.4.min.js
/_layouts/jquery/plugins/jquery.validate.min.js
Notice that if you have more than 1 WFE (web front end) server you need to upload the same files to all WFE in same path.

Here is the code for step 4. After you open the form (maybe call it newform2.aspx?) by “edit in advanced mode". Look for <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
then insert the reference like below:

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
/_layouts/jquery/jquery-1.12.4.min.js
/_layouts/jquery/plugins/jquery.validate.min.js
<SharePoint:UIVersionedContent UIVersion="4″ runat="server"><ContentTemplate>
<SharePoint:CssRegistration Name="forms.css" runat="server"/>
</ContentTemplate></SharePoint:UIVersionedContent>
</asp:Content>

Then insert below script:

$().ready(function() {
// alert(“JQuery loaded");
$(“#ID_of_submit_button").attr(“Value","Submit");
jQuery.validator.addMethod(“validEmail", function(value, element)
{
if(value == “)
return true;
var temp1;
temp1 = true;
var ind = value.indexOf(‘@’);
var str2=value.substr(ind+1);
var str3=str2.substr(0,str2.indexOf(‘.’));
if(str3.lastIndexOf(‘-‘)==(str3.length-1)||(str3.indexOf(‘-‘)!=str3.lastIndexOf(‘-‘)))
return false;
var str1=value.substr(0,ind);
if((str1.lastIndexOf(‘_’)==(str1.length-1))||(str1.lastIndexOf(‘.’)==(str1.length-1))||(str1.lastIndexOf(‘-‘)==(str1.length-1)))
return false;
str = /(^[a-zA-Z0-9]+[\._-]{0,1})+([a-zA-Z0-9]+[_]{0,1})*@([a-zA-Z0-9]+[-]{0,1})+(\.[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,3})$/;
temp1 = str.test(value);
return temp1;
}, “Please enter valid email.");

var emailInput = $(“input[title=’Email address Required Field’]");
var TxtPhoneType = $(“input[title=’Please input phone type’]");
var validator = $(“#aspnetForm").validate({
onfocusout: false,
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
validator.errorList[0].element.focus();
}
}
});
$(emailInput).rules(“add", {
validEmail: true,
required: true,
messages: {
validEmail: “Please enter a valid email“,
required: “Email is required"
}
});
$(TxtPhoneType).rules(“add", {
required: function(){return $(“#radio_ID_of_others").is(“:checked");},
messages: {
required: “Please input phone type if Others is chosen"
}
});
});

function PreSaveAction(){
return $(“#aspnetForm").valid();

};

Save and test it.