Validate form fields in Elementor

Renzo Zamora — Thu, 03 Jun 2021 23:59:08 +0000

Elementor Pro is always a good option if you want to have an almost complete suite to design a website and have basic functionalities for basic needs of the process.

One of the most important widgets is the forms widget or also called Elementor Forms.

Elementor Forms allows us to generate forms quite fast and functional for different needs, also the "Actions after submit" (actions after pressing the submit button) are quite useful and best of all that can be combined, ie you can add a person to a mailing list, send a message to the administrator and another to the one who sent the form, send a webhook to Zapier or other similar service and at the end redirect the user to a thank you page.

However, there is a problem if you want to make a form for serious use. There are no really useful validations in them.

How? Elementor only has basic frontend validation using matches and required on the fields. Someone using the Element Inspector of any browser can modify the code and submit any information without being validated accordingly.

Some people also opt for pure Javascript or jQuery libraries to validate the forms, but that gives another problem which is to add an additional weight to the one that already has Elementor and its libraries. And disabling Javascript all those validations go down the drain.

Is there a solution?

Yes, the validations by backend. By doing it this way, the end user, even if he uses the inspector or disables javascript, the data will still be validated.

Elementor Forms has hooks that allow backend validation and return error messages in real time via Ajax.

How to implement it?

You must create a plugin or edit the functions.php file of your theme (I recommend working with a child theme) to add these validations.

Ok, but what is the code?

You have it below:

Email validation

The validation that comes by default in Elementor basically looks for an at (@) and a dot (.), which does not help much to have valid emails.

Placing the following code you will have a much more accurate validation:

add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) {
    if ( !filter_var(  $field['value'], FILTER_VALIDATE_EMAIL ) ) {
        $ajax_handler->add_error( $field['id'], 'Please enter a valid email.' );
    }
}, 10, 3 );

Validation by field ID

Each field in Elementor Forms has an ID that we can customize. Thanks to this, we can make a general validation in all the forms of our site where the fields have the same ID.

First, we will add this function that allows us to get a field by the ID entered.

// This function allows to obtain a field by ID, if it does not exist it returns FALSE.
function rnz_elementor_get_field( $id, $record )
{
    $fields = $record->get_field( [
        'id' => $id,
    ] );

    if ( empty( $fields ) ) {
        return false;
    }

    return current( $fields );
}

As a second step, we create the function where we will validate the fields. This is referential, you can modify it to your needs.

function rnz_elementor_forms_validation( $record, $ajax_handler ) {

    // Validate that the privacy policy field is checked.
    // This is useful for when you want to add custom notifications.
    if( $field = rnz_elementor_get_field( 'accept_terms', $record ) )
    {
        if( $field['value'] != 'on' ){
            $ajax_handler->add_error( $field['id'], 'You must accept the policies to submit the form.' );
        }
    }

    // Remove spaces before and after the text, if any, and verify that it is not an empty entry.
    if( $field = rnz_elementor_get_field( 'name', $record ) )
    {
        if( $field['required'] == 'yes' ){
            if( empty( trim($field['value']) ) ){ // Check if it is empty
                $ajax_handler->add_error( $field['id'], 'Please enter your name.' );
            } else if( 3 >= strlen(trim($field['value'])) ){
                $ajax_handler->add_error( $field['id'], 'Your name must have at least 3 digits.' );
            }
        }
    }

    if( $field = rnz_elementor_get_field( 'age', $record ) )
    {
        if( $field['required'] == 'yes' ){
            if( empty( trim($field['value']) ) ){
                $ajax_handler->add_error( $field['id'], 'Please enter your age.' );
            } else if( filter_validate( trim($field['value']), FILTER_VALIDATE_INT )  ){
                $ajax_handler->add_error( $field['id'], 'Only numbers for your age are accepted.' );
            }
        }
    }

}

Finally, we must add the action to make it all work.