Javascript form validation code looping

Question

The following code loops when the page loads and I can't figure out why it is doing so. Is the issue with the onfocus?

 alert("JS is working");

function validateFirstName() {
    alert("validateFirstName was called");
    var x = document.forms["info"]["fname"].value;
    if (x == "") {
        alert("First name must be filled out");
        //return false;
    }
}

function validateLastName()
{
    alert("validateLastName was called");
    var y = document.forms["info"]["lname"].value;
    if (y == "") {
        alert("Last name must be filled out");
        //return false;
    }
}

var fn = document.getElementById("fn");
var ln = document.getElementById("ln");

fn.onfocus = validateFirstName();
alert("in between");
ln.onfocus = validateLastName();

The code is executing and going through both functions when the page loads. — Benjamin Roux
– Benjamin Roux, Commented May 1, 2017 at 15:18
Your html code is needed aswell to solve the problem, how you've set up the form and/or how you submit the form — Dwadelfri
– Dwadelfri, Commented May 1, 2017 at 15:28
@BenjaminRoux Check if my solution is what you're looking for. — mhodges
– mhodges, Commented May 1, 2017 at 16:10

mhodges · Accepted Answer · 2017-05-01 16:06:22Z

There were several issues with the approach you were taking to accomplish this, but the "looping" behavior you were experiencing is because you are using a combination of alert and onFocus. When you are focused on an input field and an alert is triggered, when you dismiss the alert, the browser will (by default) re-focus the element that previously had focus. So in your case, you would focus, get an alert, it would re-focus automatically, so it would re-trigger the alert, etc. Over and over.

A better way to do this is using the input event. That way, the user will not get prompted with an error message before they even have a chance to fill out the field. They will only be prompted if they clear out a value in a field, or if you call the validateRequiredField function sometime later in the code (on the form submission, for example).

I also changed around your validation function so you don't have to create a validation function for every single input on your form that does the exact same thing except spit out a slightly different message. You should also abstract the functionality that defines what to do on each error outside of the validation function - this is for testability and reusability purposes.

Let me know if you have any questions.

function validateRequiredField(fieldLabel, value) {
    var errors = "";
    if (value === "") {
        //alert(fieldLabel + " must be filled out");
        errors += fieldLabel + " must be filled out\n";
    }
    return errors;
}

var fn = document.getElementById("fn");
var ln = document.getElementById("ln");

fn.addEventListener("input", function (event) {
    var val = event.target.value;
    var errors = validateRequiredField("First Name", val);
    if (errors !== "") {
        alert(errors);
    }
    else {
        // proceed
    }
});

ln.addEventListener("input", function (event) {
    var val = event.target.value;
    var errors = validateRequiredField("Last Name", val);
    if (errors !== "") {
        alert(errors);
    }
    else {
        // proceed
    }
});

<form name="myForm">
  <label>First Name: <input id="fn" /></label><br/><br/>
  <label>Last Name: <input id="ln"/></label>
</form>

Dwadelfri · Accepted Answer · 2017-05-01 15:55:12Z

0

Not tested but you can try this

fn.addEventListener('focus', validateFirstName);
ln.addEventListener('focus', validateLastName);

edited May 1, 2017 at 15:55

Dwadelfri

4641 gold badge4 silver badges16 bronze badges

answered May 1, 2017 at 15:23

brk

50.3k10 gold badges59 silver badges85 bronze badges

2 Comments

mhodges Over a year ago

should be validateFirstName and validateLastName - no parens

brk Over a year ago

@mhodges apologies for the mistake.

Collectives™ on Stack Overflow

Javascript form validation code looping

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related