Hello,
I noticed that in the “email” field of the registration form a certain validation was performed but for example “jean@dean” is accepted, is it possible to have a stronger validation so that this kind of example is considered invalid.
For example, we’d like something that follows a pattern similar to “<>@<>.<>" so jean@dean would not be accepted.
Thank you,
Hi, you can add this custom code to the page head to achieve your goal.
I’ll actually do the same, I didn’t notice that the sign-up form allows malformed emails…
Assuming that your form is called “sign-up-form”, this code will look at the contents of the email input element and will enable or disable the submit button depending on the test of the email text.
Of course change the regexp used to test the email to your liking, but in this case it will reject emails without a complete domain component.
You can also display a message the same way softr already does by adding or setting proper element on the page where I set the color or state of the button.
This can be of course improved by using the theme colors, not hardcoded colors and by adding a slight delay to the dom loaded event as sometimes it seems the input cannot be found, there’s a race condition somewhere.
<script>
console.log("adding dom event listener");
document.addEventListener('DOMContentLoaded', function() {
console.log("DOM LOADED!");
console.log('adding email events listener');
document.querySelector('input[id^="sign-up-form-email"]').addEventListener('input', function() {
console.log(`Content: ${this.value}`);
const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value);
this.closest('form').querySelector('button[type="submit"], input[type="submit"]').disabled = !emailOk;
this.closest('form').querySelector('button[type="submit"], input[type="submit"]').style['backgroundColor'] = emailOk ? '#3D7EF4' : 'gray';
});
});
console.log("Custom code done.");
</script>
