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

$('#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'
        }
    }
});

Please find updated fiddle jsfiddle.net/qPVSy/287

Super User
– Super User

2015-09-21 07:45:30 +00:00
Commented Sep 21, 2015 at 7:45 — Super User
– Super User, Commented Sep 21, 2015 at 7:45

Pranav C Balan · Accepted Answer · 2015-09-21 07:50:22Z

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>

Arun P Johny · Accepted Answer · 2015-09-21 07:45:36Z

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

Community · Accepted Answer · 2017-05-23 12:14:11Z

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

Collectives™ on Stack Overflow

Jquery Validation form , not getting custom messages

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related