How to clear javascript validation error messages with the reset button

Question

I have a simple form page, where there are several form validations. So far, the RESET button only clears the text field values. But I need the validation messages to clear when the RESET button is pressed. So far I have seen jQuery methods, but have no idea of implementing it as I am still learning.. Are there any other methods to do this without jQuery..? Any help would be highly appreciated.

Here's my code...





  
  
  
  Contact|Frittery
  
  

  




  

    General Enquiry Form
    
      
        First Name
        
          
        
        
          
        
      
      
        Last Name
        
          
        
        
          
        
      
      
        Email
        
          
        
        
          
        
      
      
        Phone
        
          
        
        
          
        
      
      
        Message

user_5694847 · Answer

Don't reset them manual by repeating code. Define a custom reset function which iterates over error messages and empty all of them:

function resetForm() {
  var elems = document.querySelectorAll(".text-danger");
  elems.forEach(itm => {
    document.getElementById(itm.id).innerHTML = ''
  })
}

Also don't put any script tag in your head tag. Read more here

Full code:

function resetForm() {
  var elems = document.querySelectorAll(".text-danger");
  elems.forEach(itm => {
    document.getElementById(itm.id).innerHTML = ''
  })
}


function validation() {
  var formFname = document.getElementById("fname").value;
  var formLname = document.getElementById("lname").value;
  var formEmail = document.getElementById("email").value;
  var formNumber = document.getElementById("pnumber").value;

  //Validate first name
  if (formFname.length == 0) {
    document.getElementById("fnameMessage").innerHTML = "You did not enter your first name"

  }


  //Validate last name
  if (formLname.length == 0) {
    document.getElementById("lnameMessage").innerHTML = "You did not enter your last name"

  }


  //Validate email
  if (formEmail.length == 0) {
    document.getElementById("emailMessage").innerHTML = "You did not enter your email"

  } else {
    var regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (regex.test(formEmail) === false) {
      document.getElementById("emailMessage").innerHTML = "Please enter a valid email"
    }
  }


  //Validate phone
  if (formNumber.length == 0) {
    document.getElementById("phoneMessage").innerHTML = "You did not enter your phone number"

  } else if (formNumber.length != 10) {
    document.getElementById("phoneMessage").innerHTML = "Phone Number must be exactly 10 digits"
    return false;
  } else
    return true;

}





  
  
  
  Contact|Frittery
  
  




  

    General Enquiry Form
    
      
        First Name
        
          
        
        
          
        
      
      
        Last Name
        
          
        
        
          
        
      
      
        Email
        
          
        
        
          
        
      
      
        Phone
        
          
        
        
          
        
      
      
        Message

user_1541397 · Answer

function clearErrors() {
  document.getElementById("emailMessage").innerHTML = "";
  // ... repeat for other messages
}

user_3603681 · Answer

As the error/validation messages are displayed within span elements of the same class text-danger you can easily query the DOM using querySelectorAll to return a nodelist and then iterate through that collection and set the span text content to an empty string.

Note that I added a name to the form and used that name within the anonymous function in the event handler. With a name assigned to the form also means that you can identify elements simply by doing something like this:

const form=document.forms.enquiry;
const formFname=form.fname;
const formLname=form.lname;

etc etc

document.querySelector('button[type="reset"]').addEventListener('click',e=>{
  e.preventDefault();
  document.querySelectorAll('.text-danger').forEach(span=>span.textContent='')
  document.forms.enquiry.reset()
})

function validation()
        {
            var formFname = document.getElementById("fname").value;
            var formLname = document.getElementById("lname").value;
            var formEmail = document.getElementById("email").value;
            var formNumber = document.getElementById("pnumber").value;

            //Validate first name
            if(formFname.length ==0)
            {
                document.getElementById("fnameMessage").innerHTML ="You did not enter your first name"
                
            }
           

            //Validate last name
            if(formLname.length ==0)
            {
                document.getElementById("lnameMessage").innerHTML ="You did not enter your last name"
                
            }
           

            //Validate email
            if(formEmail.length ==0)
            {
                document.getElementById("emailMessage").innerHTML ="You did not enter your email"
                
            }
            else
            {
                var regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
                if(regex.test(formEmail)===false)
                {
                    document.getElementById("emailMessage").innerHTML ="Please enter a valid email"
                }
            }
            

            //Validate phone
            if(formNumber.length ==0)
            {
                document.getElementById("phoneMessage").innerHTML ="You did not enter your phone number"
                
            }
            else if(formNumber.length !=10)
            {
                document.getElementById("phoneMessage").innerHTML ="Phone Number must be exactly 10 digits"
                return false;
            }
            else
            return true;

        }


  General Enquiry Form
  
      
          First Name
          
              
           
          
              
           
      
      
          Last Name
          
              
            
          
              
          
      
      
          Email
          
              
           
          
              
           
      
      
          Phone
          
              
            
          
              
          
      
      
          Message

user_16801746 · Answer

You need to call the eraseText function separately like mentioned below

 function eraseText() {

  document.getElementById("fnameMessage").innerHTML = "";
  document.getElementById("lnameMessage").innerHTML = "";
  document.getElementById("emailMessage").innerHTML = "";
  document.getElementById("phoneMessage").innerHTML = "";
}

user_16917490 · Answer

take a look for my code

html code:

js code:

let node = null
let deleteAll
function renderItems() {
    const items = getItem()
    if (items.length) {
        const listOfSubscribers = document.getElementById('listOfSubscribers')
        listOfSubscribers.innerHTML = 'Subscribers'
        items.map(item => {
            node = document.createElement("LI");
            let textnode = document.createTextNode(item);  
            node.appendChild(textnode);   
            document.getElementById("result").appendChild(node);
        })
        deleteAll = document.getElementById('deleteAll')
        deleteAll.innerHTML = 'Delete All'
        deleteAll.addEventListener('click', deleteItems)
    }
}

renderItems()

function deleteItems() {
    sessionStorage.removeItem('subscribers')
    window.location.reload()
}

How to clear javascript validation error messages with the reset button

5 Answers