Jquery 验证表单，未获取自定义消息

Question

我正在为我的表单使用 Jquery 验证，但奇怪的是为什么我没有收到自定义消息

您能否告诉我为什么我没有收到自定义消息

这是我的 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

您需要从表单字段中删除 required 属性，否则最初它将通过 html5 验证。验证插件在提交事件触发时工作，提交事件仅在 html5 验证成功后触发

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>