jquery validation is not working with validate plugin

Question

1. validation is not working for last 3 fields.
2. In safari (version 5.1.7), plugin is not working for all fields.
3. why only mobile field are working?

HTML code

    <form method='post' name='reservation-form' id='reservation-form' action="php/mail.php">
         <label>NAME</label><input type='text' name='fullname' id='fullname' placeholder='Make a resevation in the name of...'/>
              <label>EMAIL</label>
         <input type='text' name='emailid' id='emailid' placeholder='Email address..'/>
                 <label style='margin-left: 40px;'>MOBILE</label>
<input type='text' name='mobno' id='mobno' placeholder='Mobile number...'/>
           <label>TABLE FOR</label>
           <input type='text' name='tableno' id='tableno' placeholder="3"/>
                <label style='margin-left: 16px;'>DATE</label>
         <input type='text' name='date' id='date' placeholder="3/01/2015"/>
                <label style='margin-left: 35px;'>TIME</label>
              <input type='text' name='time' id='time' placeholder="05:10PM" required/>
                    <input type='submit' name='submit' id='submit' value='RESERVE TABLE'/>
             </form>

Jquery code

   function validate(element) {
         $("#reservation-form").validate({
                rules: {
                        fullname: "required",
                        emailid: {
                                required: true,
                                email: true
                        },
                        mobno: {
                            required: true,
                            minlength: 10,
                            maxlength: 10,
                            phoneUS: true

                        },
                        tableno: {
                            required: true,
                            digits: true
                        },
                        date: {
                            required: true
                        },
                        time: {
                            required: true
                        }
                 },
                messages: {
                        fullname: "Please enter your fullname",
                        emailid: "Please enter a valid email address",
                        mobno: "Please enter a mobno",
                        tableno: "3",
                        date: "3/01/2015",
                        time: "05:10PM"
                },
             errorPlacement: function(error, element) { 

                console.log(element);
                 element.attr("placeholder",error.text());
             },
//             highlight: function(element, errClass, validClass) {
//         
//                $(element).addClass(errClass).removeClass('validClass');
//                $(element.form).$(find("#" + element.id)).closest('div').addClass('errClass');
//              },
//            unhighlight: function(element, errClass, validClass) {
//                $(element).removeClass(errClass).addClass('validClass');
//                $(element.form).$(find("#" + element.id)).closest('div').removeClass('errClass');
//            },

            submitHandler: function(form) {
              form.submit();
            }
        });// your validation stuff goes here
      }

        $(':input').bind("keyup change", function(event) {// validate signup form on keyup and submit
            if (event.keyCode === 9) {  
                validate(this);
            }
        });

        $('#submit').click(function() {
            validate(this);
        });

JSFIDDLE

Answer 1

1. Get rid of your validate function. $.validate should be called on document ready by itself, not on submit of the form.
2. in your submitHandler function, you don't need to submit the form, it will happen as long as you don't return false
3. Your idea to place error text in the placeholder is good... up until they enter something wrong, now your placeholder won't show and they won't get any feedback that they've entered the wrong information.
4. You have to include the additional-methods.js file if you want phoneUS to work.

5. The right way to validate an element is v.element(), so your keyup code should be this (I disagree with doing this at all, by the way):

   $(':input').bind("keyup change", function(event) {// validate signup form on keyup and submit
       if (event.keyCode === 9) {  
           v.element(this);//where v comes from the call to $.validate, i.e. var v = $.validate({...});
       }
   });
   

I cleaned up a few of those issues and updated your code here: http://jsfiddle.net/mz7humqt/2/