Validate Form Inputs With Javascript

Question

I have a form that is taking user inputs and I am trying to validate that the user is entering a number using javascript (yes I am aware I could do HTML validation instead). The issue I am having is that it is not stopping the user from entering letters for fields that should be integers.

My thought was that when you submit the form it will run the runthroughnums() method which will check all of the number inputs using the checkNum() helper function. Can anyone see any reason why this is not working correctly?

<form name="formname" onsubmit="runthroughnums()" action="new.php" method="post">

<script>
function runthroughnums(){
    var intput1 = document.forms["formname"]["intval1"], "Input 1");

    if(isNaN(input1)){
        window.alert(input + "must be an integer value");
    }   
</script>

Answer 1

I know you specified JS for validation but, it might be good to start with HTML and CSS.

Use the type, required, title, and pattern attributes on your HTML elements.

Style the:valid and invalid pseudo classes.

<input type="number" required pattern="[0-9]{5}" title="5 Digit Zip Code">
<style>
  input:valid { border: solid 2px green; }
  input:invalid { border: solid 2px red; }
</style>

Answer 2

Try this. If you can provide html code of your form, things would be easier.

    <script>
        function runthroughnums(){
            /*
            checkNum(document.forms["formname"]["intval1"], "Input 1");
            checkNum(document.forms["formname"]["intval2"], "Input 2");
            checkNum(document.forms["formname"]["intval3"], "Input 3");
            */
            var x = document.froms[0];
            for (var i = 0; i < x.length; i++) {
                /* debug check*/
                console.log(x.elements[i].value);
                console.log(x.elements[i].id);

                checkNum(x.elements[i].value, x.elements[i].id);

            }

        }

        function checkNum(var i, String input){
            if(isNaN(i)){
                window.alert(input + "must be an integer value");
            }   
        }
    </script>

Answer 3

I would totally recommend using a form validator library. In my experience https://parsleyjs.org/ has always been a great quick and easy way to get the job done and allows you to do implement custom validation methods and error messaging. That and out of the box will apply some nice error message labeling and highlighting.

With that I would also recommend using jQuery input masking to help control user input. https://plugins.jquery.com/jquery.inputmask/

In my experience these two libraries seem to work very nicely cross-platform/browser and have had little issue when it comes to mobile keyboards.

Also as expected it's very imperative to perform server-side validation.