Search code examples
javascripthtmlregexforms

Check form for numeric value or empty string


I have javascript to check an HTML form for numeric values and empty strings. If anything else is entered (symbols, letters, etc) the form should not submit and an error message should pop up. So far the form submits no matter what. I'm trying to set it up so that if ANY of the 3 fields has incorrect values, it doesnt submit. Example: entering "5" then "a" then "5" (or any combination of similar entries) should not work. Whereas "5" then " " then "5" OR " " then " " then " " OR "5" "5" "5" .... etc should.

JAVASCRIPT FUNCTION

  function validateOrder()
                {
                    var myOrderRegex = /^(\s*|\d+)$/

                if(myOrderRegex.test(document.getElementById("appleorderquantity").value))
                {
                    return true;
                }
                else
                {
                    alert("Apple quantity invalid: must be numeric");
                    return false;
                }
                if(myOrderRegex.test(document.getElementById("grapeorderquantity").value))
                {
                    return true;
                }
                else
                {
                    alert("Apple quantity invalid: must be numeric");
                    return false;
                }
                if(myOrderRegex.test(document.getElementById("strbryorderquantity").value))
                {
                    return true;
                }
                else
                {
                    alert("Apple quantity invalid: must be numeric");
                    return false;
                }
            }

HTML FOR ENTRY TEXTBOXES

<input type="text" name="Apple_Quantity" id="appleorderquantity" size="25" />
<input type="text" name="Grape_Quantity" id="grapeorderquantity" size="25" />
<input type="text" name="Strawberry_Quantity" id="strbryorderquantity" size="25" />

HTML FOR SUBMIT BUTTON

<input type="submit" value="Submit" onClick="return validateOrder()" />

Solution

  • Don't return true until the very end of your function - check for any condition that shouldn't submit, if ANY of those are met, return false, otherwise, after you've checked for all of that, return true.

    Also, you are better off doing

    <form onsubmit="return validateOrder()">
         ...
    </form>
    

    If validateOrder() returns false, then your form doesn't submit.

     function validateOrder()
     {
         var myOrderRegex = /^(\s*|\d+)$/
    
          if(!myOrderRegex.test(document.getElementById("appleorderquantity").value))
                alert("Apple quantity invalid: must be numeric");
                return false;
           }
           if(!myOrderRegex.test(document.getElementById("grapeorderquantity").value))
              alert("Apple quantity invalid: must be numeric");
              return false;
           }
           if(!myOrderRegex.test(document.getElementById("strbryorderquantity").value))
               alert("Apple quantity invalid: must be numeric");
               return false;
           }
    
           return true;
        }