SharePoint (2007 + 2010) Jquery presave action to validate items before you save it

What are you talking about?

A new feature in SharePoint 2010 is the validation option. I already blogged about it but I soon came to some limits.

You have 2 kinds of validation settings:
– on a column with the restriction that you cannot refer to other fields; great for when you want to check against a certain value
– on a list with the restriction that you can only create 1 validation; great for small lists with just a few columns and 1 validation check.

So, sometimes you want to add more validations to make sure that your SharePoint list follows your process. Easy things, but you want to do that in your form, not in a workflow.

What is it ?

For example, When my status is closed and the checkbox to keep the physical dossier is checked and the amount of time to keep it is not filled in, then prompt me about it. Next to that, when the status is open, and a value field is filled in, but no currency is chosen, prompt me about that too.

This is not possible in standard SharePoint. A piece of cake for Jquery !
When you want to save your item on an editform or newform, SharePoint calls the
So, how do we start it ?

Like any other Jquery script, you need to have the Jquery script page uploaded somewhere in your site (not mandatory, but it is useful).
Add a Content Editor Webpart on the page where you need the validation to happen; that will be your editform or newform somewhere.

The first part of the code is used to lookup the values.
For strings, dropdowns, dates, and so on you can use this:

var TxtField1 = $(":input[title='Field1']").val();

To see if a checkbox or Yes/No field is checked (returns 0 or 1):

var ChkField1 = $(":input[title='checkbox1']").attr('checked');

The second part of the script checks the validation that you put in there. If all is valid, it returns “true”. That means SharePoint can continue with saving the item to the database. If something is not valid, it returns the “false” value, which will halt the page.

The script

<script src="LINK TO YOUR JQUERY FILE" type="text/javascript">
  function PreSaveAction() {
    var txtcost = $(":input[title='Total Cost']").val();
    var txtmax = $(":input[title='Calculated maximum']").val();
    if(txtcost =="100" && txtmax > "500")
    {
        alert("Please fill in correct values");
        return false;
    }
    return true;
  }; 
</script>

Extra: focus on the field

The validation works fine. If something is not correctly filled in, you will be prompted to change the value.
But it would be better, especially in really long lists, to automatically jump to the item you need to change.

You can do that with the focus method:

var field1 = $(":input[title='Field1']");
field1.focus();

If you include that in the code, you will automatically jump to the correct field when something is wrong. Same example as above but with focus method implemented:

<script src="LINK TO YOUR JQUERY FILE" type="text/javascript">
  function PreSaveAction() {
    var txtcost = $(":input[title='Total Cost']").val();
    if(txtcost == "100"){
        alert("Please fill in cost");
        var costfocus = $(":input[title='Total Cost']");
        Costfocus.focus();
        return false;
    }
  return true;
  }
</script>

Extra: Check if a date is in the past or the future

If you need to check if a date was in the past, you can do so with following script. This is a good way to check if a contact date or meeting date was in the past and not in the future. If you turn around the “>” in a “<” you can check the opposite: a date has to be in the future.

<script src="LINK TO YOUR JQUERY FILE" type="text/javascript">
  function PreSaveAction() {
    /* Check if the contact was not in the future */
    var date1= $(":input[title='Contact date']").val();
    var arrDate1 = date1.split("/");
    var useDate1 = new Date(arrDate1[2], arrDate1[1]-1, arrDate1[0]);
    if(useDate1 > new Date()) {
      alert("Please choose a date lower then today");
      var fieldConc = $(":input[title='Contact date']");
      fieldConc.focus();
      return false;
    }
    return true;
  }
</script>