Question 166398 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I change WPForms default validation messages in WordPress?

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 🙂

Tags:

2

Answers


  1. 0

    To change the default HTML5 validation warnings you can use setCustomValidity() within the invalid event, like this:

    $('.wpf-vergi-no input').prop({
  min: 1000000000,
  max: 9999999999
}).on('invalid', e => {
  let input = e.target;
  input.setCustomValidity("");
  if (!input.validity.valid) {
    input.setCustomValidity("Your custom message here");
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="wpf-vergi-no">
  <input type="number" value="0" />
  <button type="submit">Submit</button>
</form>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search