hide submit until form is valid

http://stackoverflow.com/a/11691451/922168

HTML

<!DOCTYPE html> <html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> The Shopping Item</title>
    <link rel="stylesheet" href="HW2.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="HW2.js"></script>
</head>
    
    
<body>
<h1>The Shopping Item </h1>
<section>
    
<form id="Name">
  <fieldset>
    <legend>Contact Details:</legend>
     Name: <input type="text" name="name" value="" id="name">
      <br><br>
     Email: <input type="email" name="email" value="" id="email">
  </fieldset>
</form>
       <br><br>
     
    <form >
  <fieldset>
    <legend>Available Items:</legend>
     Item: <select name="choise" id="items" onchange="myFunction()">
      <option id="notbook" value="0"></option>
       <option id="laptop" value="1"></option>
       <option id="mobile" value="2"></option>
       <option id="pen" value="3"></option>
       <option id="pensel" value="4"></option>
      
      </select>
       <br><br>
      Price: <output  id="price"></output>
      <br><br>
      Quantity (Between 1 and 5): <input type="number" min="1" max="5" value="1" name="quantity">
      <br><br>
      
      <button onclick="addToCart()" id="cartButton">Add to the cart</button>
      <button onclick="myF()">Try it</button>
  </fieldset>
</form>
    
    
     <br><br>
    <fieldset>
    <legend>Invoice Details:</legend>

<table id="cart">
  <tr>
    <th>Sr.</th>
    <th colspan="3">Item Name</th>
      <th>Price</th>
      <th>count</th>
      <th>Total</th>
      <th></th>
  </tr>
</table>
        <table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br>

        
        
    </fieldset>
</section>
    

</body>
    
</html>

CSS

h1 { background-color: darkturquoise;
    padding: auto auto;
    margin: 50px 50px;
text-align: center;
font-size: 55px;}

fieldset{
    
    margin: auto 50px;
}
table{
    border: solid 1pt black;
}
td{
    border: solid 1pt black;
}
th{
    border: solid 1pt black;
}

JavaScript

$('#cartButton').hide();
    
    document.getElementById("notbook").innerHTML = item[0].name;
    document.getElementById("laptop").innerHTML = item[1].name;
    document.getElementById("mobile").innerHTML = item[2].name;
    document.getElementById("pen").innerHTML = item[3].name;
    document.getElementById("pensel").innerHTML = item[4].name;
    
    var x=document.getElementById("items");
    var strUser = x.options[x.selectedIndex].value;
    document.getElementById("price").innerHTML=item[strUser].price;
    
    

    
    $('input').change(function(e) {
        if ($('#name').val()  && $('#email').val() ) {
            $('#cartButton').show();
        }
    });

var item  =[{name:"NotBook",  price:20},
 {name:"Laptop",  price:500},
 {name:"Mobile",  price:300},
{name:"Pen",  price:5},
{name:"Pensel",  price:3}];

var cart =[];


function myFunction() {
    var x = document.getElementById("items").value;
    document.getElementById("price").innerHTML = item[x].price ;
}

function addToCart() {
  
    var table = document.getElementById('cart');
    
    var rowcount =table.row.length;
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    
    cell1.innerHTML = "new ";
    cell2.innerHTML = "n";
    cell3.innerHTML = "n";
}
function myF() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(3);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "g";
    cell2.innerHTML = "gg";
}