Jquery HTML5验证在剑道ui数字tetxbox中不起作用
HTML5验证在剑道ui数字文本框中不起作用。请在下面的链接上找到在线样本 我得到下面的错误（请找到屏幕截图） 如何解决此错误？就是这样。您可能需要使用您的设计 你必须把身份证给你的表格Jquery HTML5验证在剑道ui数字tetxbox中不起作用,jquery,kendo-ui,Jquery,Kendo Ui,HTML5验证在剑道ui数字文本框中不起作用。请在下面的链接上找到在线样本 我得到下面的错误（请找到屏幕截图） 如何解决此错误？就是这样。您可能需要使用您的设计 你必须把身份证给你的表格 <form id="ticketsForm"> 您尚未实现表单提交功能 $("form").submit(function(event) { event.preventDefault(); if (vali
<form id="ticketsForm">
$("form").submit(function(event) {
event.preventDefault();
if (validator.validate()) {
// your Code here
} else {
// Your code here
}
});
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/numerictextbox/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<form id="ticketsForm">
<div id="example">
<div id="add-product" class="demo-section k-header">
<p class="title">Add new product</p>
<ul id="fieldlist">
<li>
<label>
Price:
<input id="currency" type="number" name="currencyTextbox" min="0" max="100" style="width: 50%;" required=true />
</label>
</li>
<li>
<label>
Price Discount:
<input id="percentage" value="0.05" style="width: 100%;" />
</label>
</li>
<li>
<label>
Weight:
<input id="custom" value="2" style="width: 100%;" />
</label>
</li>
<li>
<label>
Currently in stock:
<input id="numeric" type="number" value="17" min="0" max="100" step="1" style="width: 100%;" />
</label>
</li>
<li class="status">
</li>
</ul>
</div>
<input type="submit"/>
<form>
<script>
$(document).ready(function() {
// create NumericTextBox from input HTML element
$("#numeric").kendoNumericTextBox();
// create Curerncy NumericTextBox from input HTML element
$("#currency").kendoNumericTextBox({
format: "c",
decimals: 3
});
// create Percentage NumericTextBox from input HTML element
$("#percentage").kendoNumericTextBox({
format: "p0",
min: 0,
max: 0.1,
step: 0.01
});
// create NumericTextBox from input HTML element using custom format
$("#custom").kendoNumericTextBox({
format: "#.00 kg"
});
var validator = $("#ticketsForm").kendoValidator().data("kendoValidator"),
status = $(".status");
$("form").submit(function(event) {
event.preventDefault();
if (validator.validate()) {
status.text("Hooray! Your tickets has been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
<style>
.demo-section {
padding: 0;
}
#add-product .title {
font-size: 16px;
color: #fff;
background-color: #1e88e5;
padding: 20px 30px;
margin: 0;
}
#fieldlist {
margin: 0 0 -1.5em;
padding: 30px;
}
#fieldlist li {
list-style: none;
padding-bottom: 1.5em;
}
#fieldlist label {
display: block;
padding-bottom: .6em;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
color: #444;
}
</style>
</div>
</body>
</html>
html{字体大小：14px；字体系列：Arial、Helvetica、sans serif；}
添加新产品
-
价格：
-
价格折扣：
-
重量：
-
目前库存：
-
$（文档）.ready（函数（）{
//从输入HTML元素创建NumericTextBox
$（“#数值”）.kendoNumericTextBox（）；
//从输入HTML元素创建Curerncy NumericTextBox
$（“#货币”）.kendonumeric文本框({
格式：“c”，
小数：3
});
//从输入HTML元素创建百分比NumericTextBox
$（“#百分比”）.kendonumeric文本框({
格式：“p0”，
分:0,，
最高：0.1，
步长：0.01
});
//使用自定义格式从输入HTML元素创建NumericTextBox
$（“#自定义”）.kendonumeric文本框({
格式：“0.00公斤”
});
var validator=$（“#ticketsForm”）.kendoValidator（）.data（“kendoValidator”），
状态=$（“.status”）；
$（“表格”）。提交（功能（事件）{
event.preventDefault（）；
if（validator.validate（））{
状态。文本（“万岁！您的票已预订！”）
.removeClass（“无效”）
.addClass（“有效”）；
}否则{
status.text（“哎呀！表单中有无效数据。”）
.removeClass（“有效”）
.addClass（“无效”）；
}
});
});
.演示部分{
填充：0；
}
#添加产品名称{
字体大小：16px；
颜色：#fff；
背景色：#1e88e5；
填充：20px 30px；
保证金：0；
}
#字段列表{
保证金：0-1.5em；
填充：30px；
}
#李实录{
列表样式：无；
垫底：1.5em；
}
#字段列表标签{
显示：块；
垫底：.6em；
字体大小：粗体；
文本转换：大写；
字体大小：12px；
颜色：#444；
}
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/numerictextbox/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.material.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<form id="ticketsForm">
<div id="example">
<div id="add-product" class="demo-section k-header">
<p class="title">Add new product</p>
<ul id="fieldlist">
<li>
<label>
Price:
<input id="currency" type="number" name="currencyTextbox" min="0" max="100" style="width: 50%;" required=true />
</label>
</li>
<li>
<label>
Price Discount:
<input id="percentage" value="0.05" style="width: 100%;" />
</label>
</li>
<li>
<label>
Weight:
<input id="custom" value="2" style="width: 100%;" />
</label>
</li>
<li>
<label>
Currently in stock:
<input id="numeric" type="number" value="17" min="0" max="100" step="1" style="width: 100%;" />
</label>
</li>
<li class="status">
</li>
</ul>
</div>
<input type="submit"/>
<form>
<script>
$(document).ready(function() {
// create NumericTextBox from input HTML element
$("#numeric").kendoNumericTextBox();
// create Curerncy NumericTextBox from input HTML element
$("#currency").kendoNumericTextBox({
format: "c",
decimals: 3
});
// create Percentage NumericTextBox from input HTML element
$("#percentage").kendoNumericTextBox({
format: "p0",
min: 0,
max: 0.1,
step: 0.01
});
// create NumericTextBox from input HTML element using custom format
$("#custom").kendoNumericTextBox({
format: "#.00 kg"
});
var validator = $("#ticketsForm").kendoValidator().data("kendoValidator"),
status = $(".status");
$("form").submit(function(event) {
event.preventDefault();
if (validator.validate()) {
status.text("Hooray! Your tickets has been booked!")
.removeClass("invalid")
.addClass("valid");
} else {
status.text("Oops! There is invalid data in the form.")
.removeClass("valid")
.addClass("invalid");
}
});
});
</script>
<style>
.demo-section {
padding: 0;
}
#add-product .title {
font-size: 16px;
color: #fff;
background-color: #1e88e5;
padding: 20px 30px;
margin: 0;
}
#fieldlist {
margin: 0 0 -1.5em;
padding: 30px;
}
#fieldlist li {
list-style: none;
padding-bottom: 1.5em;
}
#fieldlist label {
display: block;
padding-bottom: .6em;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
color: #444;
}
</style>
</div>
</body>
</html>