Wednesday, June 24, 2015

How to do email validation in a Nintex Form using JQuery

Custom validations can be achieved quite easily by writing client side code in JQuery in a Nintex Form. There can be a requirement to check all mandatory fields are filled in the form or an email provided is a valid email or a number entered by user is only numeric. SharePoint allows this OOTB by defining the type of field, required or not required attribute of field but those validations happen server side on a Nintex Form. Lot of times we need to have a client side validation to inform the user then and there regarding wrong input. For example if an email needs to be validated using JQuery here are the steps to achieve this in a Nintex Form.

In Nintex Form designer drag the email field to the form from the list columns. In the control settings of the email field go to Advanced section and select "Store Client ID in JavaScript variable" as "Yes" and assign name as "txtEmail" as shown in below screenshot.


After specifying the control client JavaScript variable include the Form.js script file in the form Settings -> Advanced -> Custom JavaScript Includes

/SiteAssets/jquery-1.8.3.min.js
/SiteAssets/Form.js

Add a label control at the top of the form and set the properties of the control as shown in screenshot below. This label control will display the error message to the end user.



Set the button properties of the submit button of the form to following as shown in the screenshot so that the Validate function is called on the click of the button.

Form.js

function CheckEmailAddressIsValid(emailId) {

    var pattern = new RegExp(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/);
    return pattern.test(emailId);
};

function Validate()
{
if($('#'+txtTitle).val() == ''){
  $('.lblErrorMessage').text("Please provide title.");
  $('.lblErrorMessage').css('color', 'red');
  $('.lblErrorMessage').css('font-size', 'small');
  $('.lblErrorMessage').css('font-weight', 'bold');
  $('#'+txtTitle).css('background-color', '#FF9999');
           $('#'+txtTitle).focus();
  return false;
}
else
{
$('#'+txtTitle).css('background-color', '#FFFFFF');
}

var emailAddress = $('#'+txtEmail).val();
      if (emailAddress.trim() == '') 
      {
       $('.lblErrorMessage').text("Please provide email address.");
       $('.lblErrorMessage').css('color', 'red');
       $('.lblErrorMessage').css('font-size', 'small');
       $('.lblErrorMessage').css('font-weight', 'bold');
  
       $('#'+txtEmail).css('background-color', '#FF9999');
       $('#'+txtEmail).focus();
       return false;
   }
   else
   {
if (!CheckEmailAddressIsValid(emailAddress.trim())) {
$('.lblErrorMessage').text("Please provide a valid email address.");
$('.lblErrorMessage').css('color', 'red');
$('.lblErrorMessage').css('font-size', 'small');
$('.lblErrorMessage').css('font-weight', 'bold');
$('#'+txtEmail).css('background-color', '#FF9999');
$('#'+txtEmail).focus();
return false;
   }
  $('#'+txtEmail).css('background-color', '#FFFFFF');
   }
}

Here is the output of validation applied for email address on the Nintex Form

We can do any custom validation using this approach like numeric only, date validations or any other kind of validation.

Happy coding!

2 comments:

MattR said...

What you have above is nearly what I want to do, what I am wanting to do it send an email to the person whom is selected in the people picker. I cant do this in SP2013 as we aren't using a compatible version of MS exchange (2010) so I am limited to do it in nintex.

I am happy to add in some code if people can walk me through it.

thanks

Manish K said...

Hi Matt,

You can achieve this through getting the login id of the user from people picker and then using Nintex form userprofileLookup function to fetch the email address of the user.

You cannot directly send an email from client side. As an alternate approach you can have a REST service taking email address and body as parameters and send email using server side code.

Thanks and Regards,
Manish