how to validate a simple form with javascript

Question

Ok, what I am trying to do are several things:

list errors above the form if any fields are blank
have it highlighted in red if they are blank
once the user tries to fix it, i.e., filling the blank fields, to have the red highlights go away ... like do you do this with focus, onblur?

(also I'm a JS newbie, so I'm still struggling how to have a function implemented that does that all that ... you do use a function for this, correct?

Here's an earlier form of mine ... I am really struggling to implement those three characteristics listed above ... how do I implement those in the code beneath? Thanks in advance.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Testy Form</title>
    </head>
    <body>
        <h4>Learning to Validate Forms</h4>
        <div id="validationErrors"></div>
        <form action="" method="post" id="testyForm">
            <label>Name
                <input type="text" name="name" value="" id="name">
            </label>
            <br /><br />
            <label>Email
                <input type="text" name="email" value="" id="email">
            </label>
            <br /><br />
            <input type="submit" value="Submit">
        </form>

        <script>

            var formy = document.getElementById('testyForm');

             var required_inputs = ['name', 'email'];
        formy.onsubmit = function(event) {
            for (var i = 0; i < required_inputs.length; i++) {
                var input = this[required_inputs[i]];
                if (input.value.length == 0) {
                    event.preventDefault(); 
                    input.style.border = "1px solid red";
                    input.style.backgroundColor = "#FFCCCC";
                }
            }
        }
        </script>
    </body>
    </html>

yeah like @Bergi said, have you tried integrating the "required" html 5 form attribute? This will validate if the "input" is left blank, anyway this will save you from creating more scripts and achieving your current goal but if if you'll be attaching more actions(other than validating inputs) , I guess that's where you'll be doing it with javascript. For now I can suggest "required" attribute. — jek
– jek, Commented Sep 7, 2017 at 2:26
@Bergi, avoiding html5 attributes since iI'm trying to learn JS. — user273072545345
– user273072545345, Commented Sep 7, 2017 at 15:12

cwang · Accepted Answer · 2017-09-11 05:56:02Z

1

if you are just trying to get things work, I would suggest using a validation library instead of writing your own.

if you are learning Javascript, here's the error in your code:

update

var input = this[required_inputs[i]];

to

var input = document.getElementById(required_inputs[i]);

edit - explanation

you declared required_inputs as an array:

var required_inputs = ['name', 'email'];

and when you loop through it, required_inputs[i] will return 'name' and 'email' so that can be used as the parameter of getElementById().

edited Sep 11, 2017 at 5:56

answered Sep 7, 2017 at 2:10

cwang

1,10411 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user273072545345 Over a year ago

hm, well, I don't have any IDs that are "required_inputs" per se. That's from trying to select specific elements, ie, this line: ` var required_inputs = ['name', 'email'];`

user273072545345 Over a year ago

also, I'm avoiding validation libraries, and html5 attributes because I'm trying to learn JS.

Collectives™ on Stack Overflow

how to validate a simple form with javascript

1 Answer 1

edit - explanation

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

edit - explanation

2 Comments

Related