It is possible to add your own custom validation rules into Wisepops signup 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, such as: "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 the following 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.