Can't make jquery validate.js works

Question

I'm trying to validate the contact form of my bootstrap website but I can't make it work. If I use the code from this demo it works but with my code I can't make it works.. When I click in the submit button it refresh de page and don't show any message of error.

Here's my code:

<form class="form-horizontal" id="contact_form">

                    <div class="form-group control-group">
                        <label for="contact_name" class="col-sm-4 control-label">NAME: </label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control contact-focus" id="contact_name" placeholder="Your name *">
                            </div>
                    </div>

                    <div class="form-group control-group">
                        <label for="contact_email" class="col-sm-4 control-label">EMAIL: </label>
                            <div class="col-sm-8">
                                <input type="email" class="form-control contact-focus" id="contact_email" placeholder="email@example.com *">
                            </div>
                    </div>

                    <div class="form-group control-group">
                        <label for="contact_company" class="col-sm-4 control-label">COMPANY: </label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control contact-focus" id="contact_company" placeholder="Company name">
                            </div>
                    </div>

                    <div class="form-group control-group">
                        <label for="contact_contact" class="col-sm-4 control-label">CONTACT: </label>
                            <div class="col-sm-8">
                                <input type="tel" class="form-control contact-focus" id="contact_contact" placeholder="Your number">
                            </div>
                    </div>


                    <div class="form-group control-group">
                        <label for="contact_message" class="col-sm-4 control-label">MESSAGE: </label>
                            <div class="col-sm-8">
                                <textarea class="form-control fixed_textarea contact-focus" id="contact_message" placeholder="What do you want to say to us ? *" rows="8"></textarea>
                            </div>
                    </div>

                     <div class="form-group control-group">
                        <div class="col-sm-offset-4 col-sm-8">
                            <input type="submit" class="btn btn-default" value="Send Message" />

                        </div>  
                    </div>



                </form>

JS:

$('#contact_form').validate({

    rules:{
        contact_name:{
            required:true,
            minlength:2
        },
        contact_email:{
            required:true,
            email:true
        },
        contact_message:{
            required:true,
            minlength:20
        }
    },

    messages:{
        contact_name:{
            required:"Please insert your name",
            minlength:"Your name must contain at least 2 characters"
        },
        contact_email:{
            required:"Please Insert Your Email Address",
            email:"Please Insert a Valid Email Address"
        },
        contact_message:{
            required:"Please Write Your Message",
            minlenght: "Your Message must contain at least 20 characters"
        }
    }


});

Answer 1

add a name attribute to your inputs, and give it the value of its id. Such as

 <input type="text" ``` id="contact_name" ``` name="contact_name">

I think the validator selects the inputs by its name and not its id.