title: Rounding user input in form using JavaScript
body: <p>I'm looking for a regex and a JavaScript function that rounds up what the user just input to 2 decimals max, the user can input any number and dots e.g. 1, 2.3490, 23 and it should change when the user clicks away from the field to 1.00, 2.35, 23.00. I've came up with this so far:</p>
  
  <p>This is my regex:</p>
  
  <p><code>var pPrice = /^\d*\.\d*$/;</code></p>
  
  <p>My JavaScript function:</p>
  
  <pre><code>// Function to validate price
     function validateProductPrice(){
  
      var priceRound = document.getElementById("productprice").value;
      var priceHack = Math.round(priceRound*100)/100;
  
      if (document.myForm.priceHack.value.trim().search(pPrice) == -1) {
  
          alert("WRONG INPUT FOR PRICE!");
          document.getElementById("priceERROR").style.display = "none";
  
      } else {
          document.getElementById("priceERROR").innerHTML = "CORRECT.";
          document.getElementById("priceERROR").style.display = "block";
        }
      }
  </code></pre>
  
  <p>My html for this field:</p>
  
  <pre><code>&lt;div&gt;    
  &lt;input type="text" class="productprice" placeholder="Price" name="productprice" onblur="return validateProductPrice() "&gt;
  &lt;span id="priceERROR"&gt;&lt;/span&gt;
    &lt;p class="price-help"&gt;Price e.g. if $1 please enter 1.00.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm having a bit of trouble cuz it doesn't really work and I don't know why! </p>
  
  <p>Thanks for helping guys!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I fix it by fixing the regex I got in the following answer and realizing that my input had no ID, so I was calling a null value back, now my code is: </p>
  
  <p>My regex is:</p>
  
  <p><code>var pPrice = /^((?:\d+(?:\.\d*)?)|(?:\.\d+))$/</code></p>
  
  <p>My JavaScript is: </p>
  
  <pre><code>function validateProductPrice(){
  
      var priceRound = document.getElementById("productprice").value;
      var priceHack = Math.round(priceRound*100)/100;
  
      if (document.myForm.productprice.value.trim().search(pPrice) == -1) {
  
          alert("WRONG INPUT FOR PRICE!");
          document.getElementById("priceERROR").style.display = "none";
  
      } else {
  
          document.getElementById("productprice").value = priceHack;
          document.getElementById("priceERROR").innerHTML = "CORRECT.";
          document.getElementById("priceERROR").style.display = "block";
  
      }
  </code></pre>
  
  <p>My html is:</p>
  
  <pre><code>&lt;div&gt;    
  &lt;input id="productprice" type="text" class="productprice" placeholder="Price" name="productprice" onblur="return validateProductPrice()" &gt;
  &lt;span id="priceERROR"&gt;&lt;/span&gt;
    &lt;p class="price-help"&gt;Price e.g. if $1 please enter 1.00.&lt;/p&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>Now it also overrides whatever the user inputs, if he inputs 2.336678 only 2.34 is displayed that's what I was looking for!</p>
  
  <p>Thanks you all for helping me with this! Hope my EDIT help people too!!</p>