It is possible to add your own custom validation rules into WisePops sign-up forms through our JS Callbacks feature.

Let's say you want to only accept emails with the domain example.com, and reject other form submissions with a meaningful error message: "You must subscribe with an Example company email.”

Create a Callback for the Before form submit Event 

We are going to listen for the Before form submit event to add our custom code:

Write the Custom Validation

Now, let's add this code as the callback:

// Custom validation: email must includes @example.com
var emailField = event.target.elements['email'];
if (emailField) {
  if (!emailField.value.includes('@example.com')) {
    emailField.setCustomValidity('You must subscribe with an email of the Example company');
  } else {
    emailField.setCustomValidity('');
  }
}

We make use of the native HTMLObjectElement.setCustomValidity

Note that we reset the custom validity message to an empty string when the value is valid. This is important: if the first attempt failed but the second passes, we must remove the error message for the form to be accepted.

Keep in mind that front-end validation can be easily bypassed. You should consider this custom validation as a helper for your visitors, and use a back-end validation if you need it to be 100% reliable.

Want to see one of the most popular use cases? Check out our guide to forbid disposable emails

Did this answer your question?