How to change WPForms default validation messages?

I’m not good at Javascript and searched the forum but couldn’t find an answer. I have a WordPress site and using the WPForms plugin. I have a number type input in my form. I want to validate the max 11 character number entry in that input. I searched WPForms documents and found that code and inserted it to template’s function.php file:

function wpf_vergi_no() {
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $('.wpf-vergi-no input').attr({'min':1000000000, 'max':9999999999}); // Define number limits
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_vergi_no', 9999999999 );

Validation message

It’s working and showing a validation message but I want to customize that message. Anyone can help me with this?

Thanks 🙂

Answer

You can override the message using wpformsReady and $.validator check the below code.

function wpf_custom_validation_messages(){
    ?>
    <script type="text/javascript">
        (function($) {
            var WPF_Custom_Validation = {
                /**
                 * Start the engine.
                 *
                 * @since 1.0.0
                 */
                init: function() {
                    $( document ).on( 'wpformsReady', WPF_Custom_Validation.customMessages );
                },

                /**
                 * Custom validation rules.
                 *
                 * @since 1.0.0
                 */
                customMessages: function() {

                    // Only load if jQuery validation library exists
                    if (typeof $.fn.validate !== 'undefined') { 
                        $.validator.messages.min = 'Custom message for min.';
                        $.validator.messages.max = 'Custom message for max.';
                    }

                },
            }
            WPF_Custom_Validation.init();
        })(jQuery);
    </script>
    <?php
}

add_action( 'wp_footer', 'wpf_custom_validation_messages', 10, 1 );

Here is the list of default messages.

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." ),
    step: $.validator.format( "Please enter a multiple of {0}." )
}

Tested and works.

enter image description here