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

Question

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

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

这是我的小提琴

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验证成功后仅提交事件

＆＃13;

＆＃13;

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);
  });
});

＆＃13;

* {
  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 */

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

因为您尝试初始化插件2次，一次在没有任何参数的dom ready处理程序中，然后在消息之外。

由于第一次调用初始化插件，第二次调用不执行任何操作，因此未设置自定义消息。

此外，使用submtHandler回调来执行表单提交逻辑，而不是使用按钮单击处理程序。

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

演示：Fiddle

Answer 3

许多浏览器都支持HTML5验证。因此，如果要禁用它并使用jQuery验证，只需将form属性添加到HTML标记即可。这会跳过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>

SELECT substring(convert(varchar(20), GetDate(), 9), 13, 5) + ' ' + substring(convert(varchar(30), GetDate(), 9), 25, 2)

Source