TAGS :Viewed: 4 - Published at: a few seconds ago

[ questions about muitiple input form validation ]

Im trying to do a multiple js validation. When I first click submit button, everything works fine with all input field empty, but if I put a correct form in a input field, when I click submit, the old warning text is still there.

How can I remove old red warning text if it has a valid input when I click input?

function FormValidation(){
    var fn=document.getElementById('firstname').value;
    var em=document.getElementById('email').value;
    var atpos = em.indexOf("@");
    var dotpos = em.lastIndexOf(".");
    var phone = document.getElementById('phonenumber').value; 
    var ln=document.getElementById('lastname').value;

    if(fn==null || fn=="" || /[0-9]/g.test(fn)){
        document.getElementById('invalid_first').innerHTML="*please enter a valid first name.";
        document.getElementById('firstname').style.borderColor = "red";
    if(ln==null || ln=="" || /[0-9]/g.test(ln)){
        document.getElementById('invalid_last').innerHTML="*Please Enter a Valid Last Name.";
        document.getElementById('lastname').style.borderColor = "red";

    if(phone.length != 12 || phone[3]!= '-' || phone[7] != '-') {
        document.getElementById('invalid_phone').innerHTML="*Please enter a Valid Phone Number, ex:000-000-0000";
        document.getElementById('phonenumber').style.borderColor = "red";
    if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=em.length) {
        document.getElementById('invalid_email').innerHTML="*Please Enter a valid Email Address.";
        document.getElementById('email').style.borderColor = "red";
    return false;

Answer 1

Use the css display:none to hide and display:block to show or hide a div. In javascript use document.getElementById('my_id').style.display. The way you are doing it you will have to manually remove the border colors each time the validation function runs.

Answer 2

In short,

When you add your errors to your HTML I would wrap them with a span and give that an ID. When you check the value upon clicking submit and the input is valid, you can then delete that element with the specified ID.

A short modified sample (untested) of your firstname checking would then be:

if(fn==null || fn=="" || /[0-9]/g.test(fn)){ //if element is invalid
    document.getElementById('invalid_first').innerHTML="<span id="firstname-error">*please enter a valid first name.</span>";
    document.getElementById('firstname').style.borderColor = "red";
} else { //no errors on submit, remove error message element.
    document.getElementById('firstname-error').remove(); //replace firstname-error with every single ID you want to give an element.
    document.getElementById('firstname').style.borderColor = "#oldbordercolor"; //for resetting the bordercolor, change the #oldbordercolor to your default border-color

There are more ways of deleting errors from a form without using ID's but these strongly depend on your element hierarchy to put it in a simple way.