SharePoint Form Validation Using JavaScript + jQuery

SharePoint forms are usually very simple in terms of validation. The only out-of-the-box feature is to make a field required. While this is useful, sometimes businesses want more control over what users should and should not enter into a form. Fortunately, it is easy to write our own code to extend the validation of a SharePoint form.

SharePoint Form Background

When the save button is pressed on a SharePoint form, the PreSaveItem function is called. That function is as follows:

function PreSaveItem() {
	a: ;return "function" == typeof PreSaveAction ? PreSaveAction() : true
}

This code will return the result of PreSaveAction (if it is defined). Thus, writing our own function called PreSaveAction will cause SharePoint to run our code (when the user attempts to save a form). We will return "true" in this new function to approve the form for submission, or "false" if we discover any errors.

Example Code

The example code below is a template you can use and customize for your own needs.

//When the user clicks 'Save', SharePoint will run this function
function PreSaveAction(){
	//Returning true will cause the form to be submitted, false will prevent form submission
	var result = true;
	
	//Clear out existing error messages
	$('.errorMessage').remove();
	
	//Select the input of a text field
	var textField = GetFieldByDisplayName("Example Text Field");
	
	//Check if the input is empty
	if (textField && !textField.val().trim()){
		result = false;
		//Write a message indicating to the user that the field is empty
		WriteErrorMessage(textField, "You can''t leave this blank.");
	}
	
	//Select the textarea of a multi-line text field
	var multiLineTextField = GetFieldByDisplayName("Example Multi Line Text Field");
	
	//Check if textarea contains invalid characters
	if (multiLineTextField.val() && /^[a-zA-Z0-9- ]*$/.test(multiLineTextField.val().trim() == false){
		result = false;
		//Write a message indicating to the user that the field contains a invalid characters
		WriteErrorMessage(textField, "You cannot use special characters in this field.");
	}
	
	var dateField = GetFieldByDisplayName("Example Date Field");
	if (dateField){
		//Get date object from input value
		var dateFieldValue = new Date(dateField.val());
		
		//Check if date input is invalid
		if (isNaN(dateFieldValue.getDate())){
			result = false;
			WriteErrorMessage(dateField, "Invalid date.");
		}
		
		//Check if date field is in the future
		if (dateFieldValue && dateFieldValue > new Date()){
			result = false;
			WriteErrorMessage(dateField, "You cannot select a future date.");
		}
	}
	return result;
}

//Append an error message to a field       
function WriteErrorMessage(inputElement, message){
	var errorMessageMarkup = '' + message + '
';
	$(inputElement).parent().append(errorMessageMarkup);
}

//Gets a jQuery object that represents a field element
function GetFieldByDisplayName(fieldName){
	var field = $('input[title="' + fieldName + '"], [title="' + fieldName + ' Required Field"]');
	if (!field){
		field = $('textarea[title="' + fieldName + '"], [title="' + fieldName + ' Required Field"]');
	}
	return field;
}

Deployment

For steps on attaching our custom code to a form, please refer to my SharePoint Javascript tutorial.

Learn more about DMC's SharePoint services.