Email field validation

Hi there,

To disallow special characters in the email field, you can create a custom field validation function following the official documentation available here: https://developer.ninjaforms.com/codex/client-side-field-validation/.

I have attempted to create a code block that will prevent the use of special characters in the email field. You can utilize the following code in your child theme’s JS file or with the “Simple Custom CSS and JS” free plugin available at “https://wordpress.org/plugins/custom-css-js/“.

// Create a new object for custom validation of Email field
var myCustomFieldController = Marionette.Object.extend({
    initialize: function() {
        // On the Form Submission's field validation...
        var submitChannel = Backbone.Radio.channel('submit');
        this.listenTo(submitChannel, 'validate:field', this.validateField);
        // on the Field's model value change...
        var fieldsChannel = Backbone.Radio.channel('fields');
        this.listenTo(fieldsChannel, 'change:modelValue', this.validateField);
    },
    validateField: function(model) {
        // Only validate email fields
        if ('email' != model.get('type')) return;
        
        var value = model.get('value');
        
        // Check if the field is required and empty
        if (model.get('required') && !value) {
            Backbone.Radio.channel('fields').request('add:error', model.get('id'), 'required-error', 'This field is required');
            return;
        }
        
        // Check for special characters
        if (value && !this.isValidEmail(value)) {
            Backbone.Radio.channel('fields').request('add:error', model.get('id'), 'invalid-email-error', 'Email address contains invalid characters');
        } else {
            Backbone.Radio.channel('fields').request('remove:error', model.get('id'), 'invalid-email-error');
        }
    },
    isValidEmail: function(email) {
        // This regex allows only letters, numbers, dots, and @ symbol
        var regex = /^[a-zA-Z0-9@.]+$/;
        return regex.test(email);
    }
});

// Run the code after Document Ready
jQuery(document).ready(function($) {
    // Instantiate our custom field's controller, defined above.
    new myCustomFieldController();
});

⚠️ Note: We are not affiliated with the suggested plugin. If the code is not working, we will not be able to help, as you know it requires custom coding, which is beyond our scope. I have tested it, and it worked fine on my own sandbox website.

Please keep in mind you can also reach out to our Customer Success team who are well-equipped to dive deeper into this issue with you. Plus, by logging this problem, it’ll help us keep track of it and ensure we’re working on a solution that’ll benefit not just you, but all of our users facing similar challenges.

You’re welcome, @elsazehra.

The issue you’re having is not due to the code. The email address has been set as the “UNIQUE FIELD” under Form → Advanced → Restrictions. Once you unset the email option from there, you can use the same email address to submit the form multiple times.

I could reproduce the issue, and it worked when I followed the same steps when the code was still activated.

Final output:

Give it a try, and let me know how that goes! 😄

Hi again,

I’ve tried to reproduce the issue, but it’s working fine on my end even after unsetting the email as a unique field. Here is the screen recording you can check from my end.

If you’re unable to make it work, ensure that caching and all other third-party plugins are deactivated and that the theme is changed to the default 2024 (https://wordpress.org/themes/twentytwentyfour/) to confirm that there are no conflicts with 3rd party plugins or theme.

If nothing works, please export the form from Ninja Forms → Import / Export, upload it to any cloud storage, and then send me the link to download and investigate it in the local sandbox.

Please also include the system report from Ninja Forms → Get Help (copy and paste it here). Thank you

Please keep in mind you can also reach out to our Customer Success team who are well-equipped to dive deeper into this issue with you. Plus, by logging this problem, it’ll help us keep track of it and ensure we’re working on a solution that’ll benefit not just you, but all of our users facing similar challenges.