0
剣道でHTML5の検証が機能しません数値のテキストボックス。下記のオンラインサンプルをご覧ください。剣道でHTML5の検証が機能しません数値tetxbox
私は(スクリーンショットをご覧ください)以下のエラーを得ました。
どのように私はこのエラーを解決することができますか?
剣道でHTML5の検証が機能しません数値のテキストボックス。下記のオンラインサンプルをご覧ください。剣道でHTML5の検証が機能しません数値tetxbox
私は(スクリーンショットをご覧ください)以下のエラーを得ました。
どのように私はこのエラーを解決することができますか?
これはそれがworkingである方法です。あなたのデザインで作業する必要があるかもしれません。
あなたは、あなたがフォームの機能を提出し実装していない検証
var validator = $("#ticketsForm").kendoValidator().data("kendoValidator")
を実装する必要がフォームに
<form id="ticketsForm">
をIDを与える必要があります。
$("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>
感謝。私は剣道数値tetxboxでHTML5検証を使いたいです。剣道の組み込み検証ではありません。 –
これは剣道のコントロールなので、html5検証がうまくいくかどうかわかりません。 – Aqdas