2017-01-11 11 views

答えて

1

これはそれが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> 
+0

感謝。私は剣道数値tetxboxでHTML5検証を使いたいです。剣道の組み込み検証ではありません。 –

+0

これは剣道のコントロールなので、html5検証がうまくいくかどうかわかりません。 – Aqdas

関連する問題