The onSubmit client script is similar to the onLoad script. Unlike the onChange script, when creating the onSubmit client script, we do not need to specify the field as it is triggered when the form is submitted. Other properties, such as table, view, and type, must be set similar to the onLoad and onChange client scripts.

When creating the onSubmit client script, to compare Start Date and Return Date, we will leave the Global checkbox checked to ensure this script is executed for all views of the Booking Request table/form.

In Studio, open a new Client Script record form, as shown in the following screenshot, and populate the form fields with the following values:

• Name: Compare start and return date
• Table: Booking Request
• UI Type: Desktop
• Type: onSubmit
• Active: Checked
• Inherited: Unchecked
• Global: Checked

The code to be executed needs to be populated in the Script field, as shown in the following screenshot:

Here is the entire code that we are using to compare the Start Date and Return Date client scripts:

function onSubmit() { 
var end = g_form.getValue("u_return_date");   
var start = g_form.getValue("u_start_date"); 
  var format = "yyyy-MM-dd"; 
  varisEndBeforeStart = compareDates(start, format, end, format); 
  if ( isEndBeforeStart ) { 
  g_form.addInfoMessage('The return date must be after start date.' ); 
  return false; //stop form submission 
    } 
} 

The compareDates function is available in the client code whenever the date or date time field is available in the form as part of the calendar.js JavaScript code included by the ServiceNow platform.

It accepts four parameters, namely Start, Start Date format, End, and End Date format. The format we are going to pass to the script is based on the date format we see when we select a date either in the Start Date or Return field. The compareDates function will return 1 if the Return Date is not after the Start Date. It returns 0 if the Return Date is after the Start Date and -1 if either date format is incorrect.

The g_form.addInfoMessage function will add a descriptive information message to the form in order to inform the end user that the Return Date must be after the Start Date, as shown here:

We can also use the g_form.showErrorBox function to show the following error message the specific field - in this case, Return Date:

g_form.showErrorBox("u_return_date", "Must be after start date."); 
So the final code for the compare start and return date client script will look like: 
functiononSubmit() { 
var end = g_form.getValue("u_return_date");   
  var start = g_form.getValue("u_start_date"); 
  var format = "yyyy-MM-dd"; 
  varisEndBeforeStart= compareDates(start, format, end, format); 
  if ( isEndBeforeStart ) { 
  g_form.showErrorBox("u_return_date", "Must be after start date."); 
  return false; //stop form submission 
    } 
} 

The end user will be presented with a message right here, the Return Date field as shown here:

Similarly, now let us ensure the Start Date selected by the end user is after the current date. The entire code we will use in our client script is mentioned here:

function onSubmit() { 
var end = g_form.getValue("u_return_date");   
  var start = g_form.getValue("u_start_date"); 
  var format = "yyyy-MM-dd"; //format used in ServiceNow date fields 
   
  var d = new Date(); 
varcurr= d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate(); //format for current date will be yyyy-M-dd 
   
  varreturnval= true; //default return variable 
   
  //hide any existing error messages 
  g_form.hideAllFieldMsgs("error"); 
   
  //check if start date is before current date 
  varisStartBeforeCurr= compareDates(curr, "yyyy-M-dd", start, format); 
  if ( isStartBeforeCurr ) { 
  g_form.showErrorBox("u_start_date", "Must be after current date."); 
  returnval=false; //flag form submission 
    } 
   
  varisEndBeforeStart= compareDates(start, format, end, format); 
  if ( isEndBeforeStart ) { 
  g_form.showErrorBox("u_return_date", "Must be after start date."); 
  returnval=false; //flag form submission 
    } 
  return returnval; 
} 

As shown here, the end user will now be presented with an error message if the Start Date is before the current date, and similarly, if the Return Date is before the Start Date, an error message will be shown. The form will submit successfully if both dates are correct. That is, if the Start Date is after the current date and the Return Date is after the Start Date:

Now we have covered the client script, our first client-side script in the ServiceNow platform. Let us now learn about other types of client-side scripts available in the platform.