CODEWITHSUNDEEP
javascript
Hesam Alavi
Hesam Alavi

Reputation: 159

Is there a way to get rid of the error message I created in javascript after the user does the right thing?

The code will push a message saying 'First Name Can't be empty', that is when a user clicks on a button before typing their First name. This is great, however, after they get the message, if they do type their first name and submit, the pushed message does not go away!

Is there a way for the pushed message ('First Name Can't be empty') to go away once the user has typed their first name?

Many thanks.

enter image description here

const name = document.getElementById('FirstName')
const lastName = document.getElementById('LastName')
const email = document.getElementById('EmailAddress')
const password = document.getElementById('Password')
const form = document.getElementById('form')
const errorElement1 = document.getElementById('error-FirstName')
const errorElement2 = document.getElementById('error-LastName')
const errorElement3 = document.getElementById('error-Email')
const errorElement4 = document.getElementById('error-Password')

form.addEventListener('submit', (e) => {
 let messages = []
 if (name.value === '' || name.value === null) {
  messages.push('First Name Can\'t be empty')
 }

 if (messages.length > 0) {
  e.preventDefault()
  errorElement1.innerText = messages.join(', ')
 }

})

Upvotes: 0

Views: 199

Answers (2)

Rainb
Rainb

Reputation: 2465

Yes, you can just use the innerHTML property of the errorElement after you use a condition to check if the submit has been done correctly

const name = document.getElementById('FirstName')
const lastName = document.getElementById('LastName')
const email = document.getElementById('EmailAddress')
const password = document.getElementById('Password')
const form = document.getElementById('form')
const errorElement1 = document.getElementById('error-FirstName')
const errorElement2 = document.getElementById('error-LastName')
const errorElement3 = document.getElementById('error-Email')
const errorElement4 = document.getElementById('error-Password')

form.addEventListener('submit', (e) => {
 let messages = []
 if (name.value === '' || name.value === null) {
  messages.push('First Name Can\'t be empty')
 } else {
  //clear messages
  messages = [];
  errorLement1.innerHTML="";
 }

 if (messages.length > 0) {
  e.preventDefault()
  errorElement1.innerText = messages.join(', ')
 }

})

Upvotes: 0

Barmar
Barmar

Reputation: 781721

Clear the error element when there are no errors.

const name = document.getElementById('FirstName')
const lastName = document.getElementById('LastName')
const email = document.getElementById('EmailAddress')
const password = document.getElementById('Password')
const form = document.getElementById('form')
const errorElement1 = document.getElementById('error-FirstName')
const errorElement2 = document.getElementById('error-LastName')
const errorElement3 = document.getElementById('error-Email')
const errorElement4 = document.getElementById('error-Password')

form.addEventListener('submit', (e) => {
  let messages = []
  if (name.value === '' || name.value === null) {
    messages.push('First Name Can\'t be empty')
  }

  if (messages.length > 0) {
    e.preventDefault()
    errorElement1.innerText = messages.join(', ')
  } else {
    errorElement1.innerText = '';
  }
})

Upvotes: 1

Related Questions