1. Home
  2. page-builder
  3. Page templates
  4. JavaScript page hooks for page submit, validations and errors

JavaScript page hooks for page submit, validations and errors

This article is suitable for developers

A strength of the Engaging Networks platform is the extent to which clients are able to completely customize web pages. In offering a flexible and open framework for developers to implement custom JavaScript and styling, clients have built truly unique and amazing pages to be built.

This will always be a priority for us.

With recent mandated requirements from the PSD2 directive (a more robust process for processing credit card transactions), our engineers adjusted the way we validate the pages we host for you.

Now, when a form is submitted, we use event.preventDefault() to stop the submit, however, we run the validation (and other processes) asynchronously, using promises. After that, if everything is validated, then the page is submitted.

After these changes were introduced in our last release, some clients had to update custom code in their pages. As we don’t know what custom code has been written by clients it’s not possible for us to assess what impact front-end changes might have on pages. We decided to come up with a different way for clients to integrate custom code.

Three new ‘page hooks’ have been added to our code to help standardize ‘event interception’ and to help custom scripts to follow a more formal methodology.

The new page hooks are enOnValidate, enOnSubmit and enOnError and will be available from Tuesday, 24th 2019.

These three new functions have been placed in global scope (i.e on the window object) and when present, our page Javascript will call them during the submission process.

Function Description
enOnValidate Called during validation – any validation fails will prevent the page submitting. A function that can return true to allow processing to continue, return false to prevent processing, or return a Promise that will only allow the processing to continue once the Promise is resolved.
enOnSubmit Called when validation has successfully completed and the page is about to be submitted. A function that can return true to allow processing to continue, return false to prevent processing, or return a Promise that will only allow the processing to continue once the Promise is resolved.
enOnError Called when the client side validation fails. The return value is ignored.

For enOnValidate and enOnSubmit, both callbacks work the same – they are a function that can return true to allow processing to continue, return false to prevent processing, or return a Promise that will only allow the processing to continue once the Promise is resolved.

enOnSubmit examples

Basic example to prevent submit:

window.enOnSubmit = function(){
  // client code
  ...
  return false; // return false to prevent submit
}

Example using promises to prevent submit

window.enOnSubmit = function(){
  // handle async code with promises
  return new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve() // will allow submit when timeout runs in 1000ms
    }, 1000)
  })
}

enOnValidate examples

Example of custom validation

window.enOnValidate = function(){
  if(!checkCustomValidationFunction()){
    alert('validation failed');
    return false; //validation failed so return false to prevent submission
  }
  return true; // validation was ok so return true
}

Example of AJAX validation

// $.ajax returns a promise so this will halt page processing if the ajax call fails
window.enOnValidate = function(){
  return $.ajax('/url/to/call') 
}

enOnError examples

enOnError is a hook that is called when the client side validation fails. Like enOnSubmit and enOnValidate, it should be set on the window object so it is in global scope.

The return value is ignored.

Example of ‘on Error’

window.enOnError = function(){
  alert('Validation failed')
}

We hope that the new page hooks help in development. We would love to know how these are used and comments for improvements.

Updated on January 28, 2020

Was this article helpful?

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support