Jquery Validation form , not getting custom messages

Question

I am using Jquery Validation for my form , but starngely why am i not getting custom messages

Could you please let me know why i am not getting custom messages

This is my 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'
        }
    }
});

Answer 1

Many browsers are supporting HTML5 validation. So If you want to disable it and use jQuery Validation, then simply add novalidate attribute to form tag. This skips the HTML validation.

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 by class name
  $(".datePick").datepicker({
    dateFormat: 'yy-mm-dd'
  });
});
$(document).ready(function() {
  $("#stockform").validate();
  $(".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 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" rel="stylesheet" />
<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" novalidate>
    <input id="txtSymbol" name="txtSymbol" required="required" class="required" Placeholder="Symbol" />
    <input id="startDate" name="startDate" required="required" class="datePick required" type="text" Placeholder="From" />
    <input id="endDate" name="endDate" required="required" 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>

Source

Answer 2

You need to remove required attribute from form fields, otherwise initially it will go through html5 validation. Validate plugin working when submit event fires, submit event only fire after html5 validation is 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 by 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>

Answer 3

Because you are trying to initialize the plugin 2 times, once in the dom ready handler without any parameters and then outside it with the messages.

Since the first call initializes the plugin, the second call does not do anything so the custom messages are not set.

Also, use the submtHandler callback to do your form submission logic instead of using a button click handler.

$(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'
            }
        },
        submitHandler: function(form){
        }
    });
});

Demo: Fiddle