Hello Readers,
It has been a while since my last post and
I apologize for the delay! Today I
wanted to talk about how to use jQuery and JavaScript to validate field values
in SP forms. This example will be
extremely simple, but hopefully it will help cover the basics, as well as spark
some ideas on how you might want to validate entries on your forms. You will need to add this script to the new
& display form.aspx pages with either with a content editor or script
editor web part.
If you are just getting started with JavaScript
and jQuery I would highly recommend
reading through Mark Rackley’s A
Dummies Guide to SharePoint and jQuery-Getting & Setting SharePoint Form
Fields which is a fantastic blog series as well as Marc Anderson’s Blog which
is loaded with great content. Both of
their sites run through all of the selectors i.e. when to use select, input,
etc. so I will not be covering that in this post.
For my example today I have a simple custom
list with the following fields:
Title: (single line of text) (input
field)
Candidate Hired: (combo box dropdown
N/A, No, Yes) (select field)
Candidate Start Date: (date & time
control)
I want to an alert to pop up letting the
user know that they accidentally left the Start Date blank when Candidate Hired =
“Yes” & the Candidate Start Date was left blank. If we were going to rely on this script for
validation we would want to put in other conditions to handle scenarios such as
having a start date without selecting yes, but for the sake of simplicity we will
keep it very basic.
To
Do This We Will Need:
·
A reference to the jQuery
library
o
We can reference the library
either with a CDN (content delivery network) or by downloading the library and
storing it somewhere on our SharePoint site and linking to it there.
o
If you download the library I
would recommend saving the file with a title of jQuery and adding an additional
field to the library with the version number.
This is a good practice since if you have multiple scripts linked to the
jQuery library, they won’t break when a new version is uploaded and the file
name changes.
·
This Script
<script
type="text/javascript" src="LINK TO jQuery Location"></script>
<script type="text/javascript"
language="javascript">
function PreSaveAction() {
drop = $("select[title='Candidate
Hired']").val();
date =
$("input[title='Candidate Start Date']").val();
if (drop ==="Yes" &&
date===""){
alert("You Shall Not Pass, Fix The
Date!");
return false;
}
return true;
}
</script>
How
Does The Script Work?
Essentially what this script does is to
check to make sure that the Candidate Start Date is not left blank if the user
indicated they were hired before they can save the form. We are obtaining the values based on the form’s
display names **Not Internal Names!!** and then checking those values before the
form can be saved. If the form matches
our criteria of Hired = yes & Start Date = “”, then our script will pull a
Galdalf when the user tries to submit the item with a “YOU SHALL NOT PASS”
until the form has been fixed.
In order to repurpose the script you could
swap out the display names and use it as is or you could use it as a template
to start writing your own validation scripts.
Although some validation can be done via the column validation and list
validation in SharePoint, I always run into scenarios where a simple script
enhances the user’s experience as well as ensures the inputted data is
correct. An example of this would be to
use JavaScript to create an input mask for form fields or to ensure that an
email address field actually contains @ & .com.
Well again this script is super basic, but
I hope that this sparks some thoughts on where your forms could be enhanced and
how you can use jQuery and JavaScript to get it done!
Best Regards,
Dan
Dan
