Как реализовать checkValidity() в формах?

Не знаю, почему checkValidity() метод не проверяет, если мой ввод true или false. Моя программа сказала, что checkValidity() не является функцией ... Моя программа работала, но checkValidity() отлаживает мою программу.Как реализовать checkValidity() в формах?

Я попытался создать программу, которая добавляет данные в таблицы и проверяет, что вход действителен или недействителен. Каждый раз, когда вы нажимаете кнопку процесса, данные добавляются в таблицу, а сброс стирает ввод и очищает таблицу.

Мой профессор ознакомил меня с использованием метода checkValidity(), чтобы убедиться, что вход действителен. Я не знаю, была ли в моей программе ошибка или браузер не поддерживает метод checkValidity?

Я использую последнюю версию Chrome. Может ли каждый проверить мой код, если есть ошибка, и научить меня, как реализовать метод checkValidity?

<!DOCTYPE html> 
<html lang="en"> 
<head><title>Sales Person</title> 

<!-- Latest compiled CSS --> 
<link rel="stylesheet" href="css/bootstrap.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="css/bootstrap-theme.min.css"> 

</head> 
<body> 
<div class="container"> 
<div class="row"> 
    <div class="col-md-4"> 
    <form name="myform" onsubmit="validateForm return false;"> 
    <div class="row"> 
     <div class="form-group"> 
      <label for="name">Sales Person:</label> 
      <input type="text" id = "name" placeholder="Enter Your Name"  required><br/> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="form-group"> 
     <label for="product1">Product 1:</label> 
     <input type="number" id = "product1" placeholder="Enter Product 1"><br/> 
      </div> 
    </div> 

    <div class="row"> 
     <div class="form-group"> 
      <label for="product1">Product 2:</label> 
      <input type="number" id = "product2" placeholder="Enter Product 2" ><br/> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="form-group"> 
      <label for="product1">Product 3:</label> 
      <input type="number" id = "product3" placeholder="Enter Product 3" ><br/> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group"> 
      <label for="product1">Product 4:</label> 
      <input type="number" id = "product4" placeholder="Enter Product 4" ><br/> 
     </div> 
    </div> 
     <div class="row"> 
     <div class="form-group"> 
      <label for="product1">Product 5:</label> 
      <input type="number" id = "product5" placeholder="Enter Product 5" ><br/> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-3"> 
      <input type="submit" class="btn btn-default" onclick="Process()" value="Submit"> 
     </div> 
      <div class="col-md-3"> 
      <input type="reset" class="btn btn-default" onclick="erase()" value="Reset"> 
     </div> 
    </form> 
</div> 


    <div class="col-md-8" id="sales_table"> 
</div> 
</div> 
</div> 
<script> 
"use strict"; 
var table = ""; 
var table_header = ""; 
var table_body = ""; 
var table_footer = ""; 

table_header += "<table class= table table-bordered>"; 
table_header += "<tr>"; 
table_header += "<th class='text-center'>Name</th>"; 
table_header += "<th class='text-center'>Product 1</th>"; 
table_header += "<th class='text-center'>Product 2</th>"; 
table_header += "<th class='text-center'>Product 3</th>"; 
table_header += "<th class='text-center'>Product 4</th>"; 
table_header += "<th class='text-center'>Product 5</th>"; 
table_header += "<th class='text-center'>Total Sale Product</th>"; 
table_header += "<th class='text-center'>Commissions</th>"; 
table_header += "<tr>"; 

table_footer += "</table>"; 
function Process() 
{ 
    var sales_table = document.getElementById("sales_table").value; 
    var name=document.getElementById("name").value; 
    var product1=parseInt(document.getElementById("product1").value); 
    var product2=parseInt(document.getElementById("product2").value); 
    var product3=parseInt(document.getElementById("product3").value); 
    var product4=parseInt(document.getElementById("product4").value); 
    var product5=parseInt(document.getElementById("product5").value); 
    var sales_table = document.getElementById("sales_table"); 
    var total; 
    var commissions; 

if(isValid(name,product1,product2,product3,product4,product5)){ 
     total = product1+product2+product3+product4+product5; 
     commissions = total * .30; 

     table_body += "<tr>"; 
     table_body += "<td>"+name+"</td>"; 
     table_body += "<td class='text-center'>" + product1.toFixed(2) + "</td>"; 
     table_body += "<td class='text-center'>" + product2.toFixed(2) + "</td>"; 
     table_body += "<td class='text-center'>" + product3.toFixed(2) + "</td>"; 
     table_body += "<td class='text-center'>" + product4.toFixed(2) + "</td>"; 
     table_body += "<td class='text-center'>" + product5.toFixed(2) + "</td>"; 
     table_body += "<td class='text-center'>" + total.toFixed(2) + "</td>"; 
     table_body += "<td class='text-center'>" + commissions.toFixed(2) + "</td>"; 
     table_body += "</tr>"; 

     table = table_header + table_body + table_footer; 

     sales_table.innerHTML = table; 
    } 

} 

function isValid (name,product1,product2,product3,product4,product5) { 
    try{ 
    if(name.checkValidity==false){ 
     throw name.validationMessage 
    } 
    if(product1.checkValidity==false){ 
     throw product1.validationMessage 
    } 
    if(product2.checkValidity==false){ 
     throw product2.validationMessage 
    } 
    if(product3.checkValidity==false){ 
     throw product3.validationMessage 
    } 
    if(product4.checkValidity==false){ 
     throw product4.validationMessage 
    } 
    if(product5.checkValidity==false){ 
     throw product5.validationMessage 
    } 
    } 
    catch(err){ 
     alert(err); 
     return false; 
    } 
    return true; 
} 

function erase() 
{ 
    document.getElementById("name").value=""; 
    document.getElementById("product1").value=""; 
    document.getElementById("product2").value=""; 
    document.getElementById("product3").value=""; 
    document.getElementById("product4").value=""; 
    document.getElementById("product5").value=""; 
    document.getElementById("sales_table").innerHTML=""; 
    } 

    </script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
    </html>

источник

2015-08-21 Eru El

переменные продукта - это числа, например, я вижу: 'var product1 = parseInt (document.getElementById (" product1 "). value);' Не существует свойства 'checkValidity'/метода для чисел. Кроме того, как указано в ответе, если это метод, вам нужно вызвать его с помощью '()': 'product.checkValidity()'. Ps: если 'checkValidity' возвращает логическое значение, вам не нужно проверять, равно ли возвращенное значение' false', вы можете просто: 'if (! Product.checkValidity()) {...}'. – Brunt

, поэтому я меняю свой тип ввода в тексте, потому что checkValidity() поддерживает только текстовые или строковые входы? извините ... –

Похоже, что checkValidity - это метод, добавленный в спецификации HTML5 для полей ввода: Constraints validation.

Вам необходимо сохранить ссылку входного элемента, а не само значение:

var name=document.getElementById("name"); 
var product1=document.getElementById("product1"); 
var product2=document.getElementById("product2"); 
var product3=document.getElementById("product3"); 
var product4=document.getElementById("product4"); 
var product5=document.getElementById("product5");

Затем, вы можете вызвать метод checkValidity позже в вашей isValid функции;)

if (!name.checkValidity()) { 
    throw name.validationMessage; 
} 
// etc.

И вам необходимо адаптировать содержимое вашего оператора if:

total = parseInt(product1.value) + parseInt(product2.value) + parseInt(product3.value) + parseInt(product4.value) + parseInt(product5.value); 
commissions = total * .30; 

table_body += "<tr>"; 
table_body += "<td>"+name.value+"</td>"; 
table_body += "<td class='text-center'>" + parseInt(product1.value).toFixed(2) + "</td>"; 
table_body += "<td class='text-center'>" + parseInt(product2.value).toFixed(2) + "</td>"; 
table_body += "<td class='text-center'>" + parseInt(product3.value).toFixed(2) + "</td>"; 
table_body += "<td class='text-center'>" + parseInt(product4.value).toFixed(2) + "</td>"; 
table_body += "<td class='text-center'>" + parseInt(product5.value).toFixed(2) + "</td>"; 
table_body += "<td class='text-center'>" + total.toFixed(2) + "</td>"; 
table_body += "<td class='text-center'>" + commissions.toFixed(2) + "</td>"; 
table_body += "</tr>";

источник

2015-08-21 11:55:51 Brunt

Хорошо, я понял. но он работает только на тип ввода = «текст» или другие типы ввода? –

«Метод checkValidity на узле элемента формы (например, input, select, textarea) возвращает true, если элемент содержит достоверные данные». ;-) – Brunt

нравится, если вход заполнен, он сказал, что это правда? в противном случае неверно? –

проверкаValidity способ. Нормальный вы вызываете методы с() в конце, как>method().

например. для продукта3 product3.checkValidity()==false

источник

2015-08-21 11:31:15

но я положил() в checkValidity программа выдает ошибку, которая говорит name.checkValidity() не является функцией ... Я не знаю почему? извините, я забыл включить() в checkValidity –

Вы пытаетесь вызвать метод, который не существует: ни объекты 'number', ни' string' не имеют метода checkValidity. Таким образом, 'checkValidity' не определена, поэтому вы не можете« вызвать »его с помощью'() ', и вы получите сообщение об ошибке – Brunt

okay, я получил его! Проблема в «Процессе» вы передаете значение методу «isValid», но вам нужно передать объект, поэтому вы должны удалить parseint и значение каждого объекта. "parseInt" (document.getElementById ("product1") ".value" –

Как реализовать checkValidity() в формах?

ответ

Смежные вопросы