Dima Vleskov Dima Vleskov - 4 months ago 11
Javascript Question

validation contact form with javascript

I have a problem with my code and i really don't know how to correct it. The validation works well but the problem is that when you fill in a name input field for example - dima, then you choose phone's field but the name's field is still doesn't have anything that you can see that you fill in it correctly, you have to select again this field and only than it adds some classes to the field. how can i fix this?

<form name="myform>
<input type="text" name="firstname" placeholder="First Name" maxlength="30">
<p id="nameError">First name is required</p>
<p id="nameErrorTwo">Enter only characters</p>
<input type="tel" name="phone" placeholder="Phone Number">
<p id="telError">Phone is required</p>
<p id="telErrorTwo">Enter a number</p>
</form>

// firstname
document.myform.firstname.onblur= function() {
var name = document.myform.firstname.value;
if (name === "") {
document.myform.firstname.removeAttribute("class", "ready");
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameError").style.display = "block";
document.getElementById("nameErrorTwo").style.display = "none";
} else {
//firstname onchange
document.myform.firstname.onchange= function() {
document.myform.firstname.style.border = "1px solid #509d12";
document.getElementById("nameError").style.display = "none";
document.myform.firstname.setAttribute("class", "ready");
var pattern = new RegExp("\[a-z]+", "i");
var isValid = this.value.search(pattern) >= 0;

if (!(isValid)) {
document.myform.firstname.style.border = "1px solid #da3637";
document.getElementById("nameErrorTwo").style.display = "block";
} else {
document.getElementById("nameErrorTwo").style.display = "none";
document.myform.firstname.style.border = "1px solid #509d12";
}
};
}
};

//phone
document.myform.phone.onblur= function() {
var name = document.myform.phone.value;
if (name === "") {
document.myform.phone.removeAttribute("class", "ready");
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telError").style.display = "block";
document.getElementById("telErrorTwo").style.display = "none";
} else {
//phone onchange
document.myform.phone.onchange= function() {
document.myform.phone.style.border = "1px solid #509d12";
document.getElementById("telError").style.display = "none";
document.myform.phone.setAttribute("class", "ready");
var pattern = new RegExp("\\d", "i");
var isValid = this.value.search(pattern) >= 0;

if (!(isValid)) {
document.myform.phone.style.border = "1px solid #da3637";
document.getElementById("telErrorTwo").style.display = "block";
} else {
document.getElementById("telErrorTwo").style.display = "none";
document.myform.phone.style.border = "1px solid #509d12";
}
};
}
};

Answer

In your original code, the onchange() event listeners are set up only when the fields lose focus with a non-empty value. This explains the weird behaviors that you're encountering.

Actually, I don't see any reason to use a mix of onblur() and onchange().

Please see if the following version is doing what you're expecting. It's using onchange() exclusively.

 // firstname
    document.myform.firstname.onchange= function() {
        var name = document.myform.firstname.value;
        if (name === "") {
            document.myform.firstname.removeAttribute("class", "ready");
            document.myform.firstname.style.border = "1px solid #da3637";
            document.getElementById("nameError").style.display = "block";
            document.getElementById("nameErrorTwo").style.display = "none";
        } else {
            document.getElementById("nameError").style.display = "none";
            document.myform.firstname.setAttribute("class", "ready");
            var pattern = new RegExp("\[a-z]+", "i");
            var isValid = this.value.search(pattern) >= 0;

            if (!(isValid)) {
                document.myform.firstname.style.border = "1px solid #da3637";
                document.getElementById("nameErrorTwo").style.display = "block";
            } else {
                document.getElementById("nameErrorTwo").style.display = "none";
                document.myform.firstname.style.border = "1px solid #509d12";
            }
        }
    };

//phone
    document.myform.phone.onchange= function() {
        var name = document.myform.phone.value;
        if (name === "") {
            document.myform.phone.removeAttribute("class", "ready");
            document.myform.phone.style.border = "1px solid #da3637";
            document.getElementById("telError").style.display = "block";
            document.getElementById("telErrorTwo").style.display = "none";
        } else {
            //phone onchange
            document.getElementById("telError").style.display = "none";
            document.myform.phone.setAttribute("class", "ready");
            var pattern = new RegExp("\\d", "i");
            var isValid = this.value.search(pattern) >= 0;

            if (!(isValid)) {
                document.myform.phone.style.border = "1px solid #da3637";
                document.getElementById("telErrorTwo").style.display = "block";
            } else {
                document.getElementById("telErrorTwo").style.display = "none";
                document.myform.phone.style.border = "1px solid #509d12";
            }
        }
    };
<form name="myform">
  <div>
    <input type="text" name="firstname" placeholder="First Name" maxlength="30">
    <p id="nameError">First name is required</p>
    <p id="nameErrorTwo">Enter only characters</p>
  </div>
  <div>
    <input type="tel" name="phone" placeholder="Phone Number">
    <p id="telError">Phone is required</p>
    <p id="telErrorTwo">Enter a number</p>
  </div>
</form>