Jquery Validation form , not getting custom messages -

i using jquery validation form , starngely why not getting custom messages

could please let me know why not getting custom messages

this fiddle

http://jsfiddle.net/qpvsy/287/

$('#stockform').validate({     rules: {         txtsymbol: {             required: true         },         startdate: {             required: true         },         enddate: {             required: true         }     },     messages: {         txtsymbol: {             required: 'symbol required'         },         startdate: {             required: 'startdate required',         },         enddate: {             required: 'enddate required'         }     } }); 

you need remove required attribute form fields, otherwise go through html5 validation. validate plugin working when submit event fires, submit event fire after html5 validation success

var yqlurl = "http://query.yahooapis.com/v1/public/yql?q=";  var dataformat = "&format=json&env=store%3a%2f%2fdatatables.org%2falltableswithkeys";  $(function() { //load jqueryui datepicker class name    $(".datepick").datepicker({      dateformat: 'yy-mm-dd'    });  });  $(document).ready(function() {    $(".historical").hide();  });  $('#stockform').validate({    rules: {      txtsymbol: {        required: true      },      startdate: {        required: true      },      enddate: {        required: true      }    },    messages: {      txtsymbol: {        required: 'symbol required'      },      startdate: {        required: 'startdate required',      },      enddate: {        required: 'enddate required'      }    }  });  $("#submit").click(function() {    var symbol = $("#txtsymbol").val();    var startdate = $("#startdate").val();    var enddate = $("#enddate").val();    symbol = symbol + ".ns";    var historicalq = yqlurl + "select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20%3d%20%22" + symbol + "%22%20and%20startdate%20%3d%20%22" + startdate + "%22%20and%20enddate%20%3d%20%22" + enddate + "%22" + dataformat;    $.getjson(historicalq, function(json) {      var result = json.stringify(json);      alert(result);    });  });

* {    margin: 0;    padding: 0  }  body {    padding: 1em;    color: #555;    font-family: verdana;    text-align: center  }  p {    padding: 0.5em 0;    font-weight: bold  }  input:focus {    outline: none;  }  input,  button {    padding: 0.4em 0.3em;    margin: 0.5em 0em  }  input {    border: 1px solid #999;    border-left: 1.05em solid #aaa;    -moz-border-radius: 15px;    border-radius: 15px;  }  .required {    border-left: 1.05em solid #e8725c;  }  #inputsymbol,  .realtime,  .historical {    padding: 0.5em 0.5em;    margin: 0% 20%;    text-align: left;    border-bottom: 1px solid #aaa  }  .realtime div,  .historical div,  .realtime div span,  .historical div span {    display: inline-block  }  .realtime div,  .historical div {    width: 45%  }  #date span,  #closevalue span {    display: block;    color: #666;    font-size: 90%  }  .ui-datepicker {    font-size: 11px !important  }  /* skrink datepicker */

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" rel="stylesheet" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>  <div id="inputsymbol">        <p>historical data , enter stock</p>    <form id="stockform" name="stockform">      <input id="txtsymbol" name="txtsymbol" class="required" placeholder="symbol" />      <input id="startdate" name="startdate" class="datepick required" type="text" placeholder="from" />      <input id="enddate" name="enddate" class="datepick" type="text" placeholder="to" />      <button>submit</button>    </form>  </div>    <div class="historical">    <div>      <p>date</p><span id="date"></span>    </div>    <div>      <p>price</p><span id="closevalue"></span>    </div>    </div>