CODEWITHSUNDEEP
javascriptjqueryhtml
Eru El
Eru El

Reputation: 79

How to implement checkValidity() in forms?

I don't know why checkValidity() method is not checking if my input is true or false. My program said that checkValidity() is not a function... My program was working but the checkValidity() debug my program.

I tried to make a program that adds data in tables and checks that the input is valid or invalid. Every time you click the process button, data gets added to a table and the reset will erase the input and clears the table.

My professor familiarize me in using the checkValidity() method to ensure the input is valid. I don't know if my program has an error or the browser does not support the checkValidity method?

I use latest version of Chrome. Can Everyone check my code if there's an error and teach me how to implement checkValidity method?

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

Upvotes: 7

Views: 20446

Answers (2)

Benoit
Benoit

Reputation: 791

It looks like checkValidity is a method added in the HTML5 specification for input fields: Constraints validation.

You need to keep the reference of the input element, not the value itself:

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

Then, you can invoke the checkValidity method later on in your isValid function ;) 

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

And you need to adapt the content of your if statement:

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

Upvotes: 5

Masood Moshref
Masood Moshref

Reputation: 380

checkValidity is a method. Normaly you call methods with () at the end like> method().

e.g. for product3 product3.checkValidity()==false

Upvotes: 0

Related Questions