jQuery validate plugin not working in WordPress

I am looking to implement jQuery validate plugin to validate my custom form in WordPress, but the validation isn’t working and the form is submitted despite the errors.

Here’s what I have done correctly :

Read More
  1. jQuery has been called properly at the top.
  2. The validate plugin is in the footer and called properly as well.
  3. The HTML form elements are all okay and I have triple checked all my ‘name’ values.

The validate script is where I think the problem lies :

<script type="text/javascript">
    jQuery(document).ready(function($) {

        $('#wpcf7_298').validate({
            rules: {
                wordsno: {
                    required: true,
                    digits: true
                },

                dynamictext-419: {
                    required: true,
                    email: true
                },

                select-box: {
                    required: true,

                }
            },

            messages: {
                wordsno: "Please fill the field",
                dynamictext-419: "Please enter a valid email address.",
                select-box: "Please choose your order type."
            }
        })          

        $('#sbbutton').click(function() {
        $("#wpcf7_298").valid();});

        });

</script>

Related posts

Leave a Reply

1 comment

  1. Your keys to the validate method are wrong

    jQuery(document).ready(function($) {
    
        $('#wpcf7_298').validate({
            rules: {
                wordsno: {
                    required: true,
                    digits: true
                },
    
                'dynamictext-419': {
                    required: true,
                    email: true
                },
    
                'select-box': {
                    required: true,
    
                }
            },
    
            messages: {
                wordsno: "Please fill the field",
                'dynamictext-419': "Please enter a valid email address.",
                'select-box': "Please choose your order type."
            }
        }) 
    

    In a object, keys with non alpha numerical values like - has to be enclosed within single/double quotes.