1

How can I delete or hide the text while somebody in my form input in the second time give correct data? I mean when somebody on first time give incorrect the text will display "First Name cannot be empty!" and then give correct data and the text is there but invisible.

        errorFunc(fname, 'First Name cannot be empty!')
    } else {
        successFunc(fname)
    }

    if (lastName === '') {
        errorFunc(lname, 'Last name cannot be empty!')
    } else {
        successFunc(lname)
    }

function errorFunc(req, message) {
    const formControl = req.parentElement;
    const span = formControl.querySelector('span');
    span.innerText = message;
    req.classList.add('error');
    span.classList.add('error-text');
    req.classList.remove('success');
}

function successFunc(req) {
    const formControl = req.parentElement;
    const span = formControl.querySelector('span');
    req.classList.add('success');
    req.classList.remove('error')
    span.classList.remove('error-text')
}
Reza Saadati
  • 5,018
  • 4
  • 27
  • 64
mpoweredo
  • 79
  • 7
  • Just do this at the beginning of your validation script: `formControl.querySelector('span').innerText=""` - clear it out each time you validate as your validation script will put text in it afterwards if neccesary – Kinglish Dec 20 '21 at 21:34
  • Does this answer your question? [Remove element by id](https://stackoverflow.com/questions/3387427/remove-element-by-id) – Reza Saadati Dec 20 '21 at 21:45

1 Answers1

2

You have 2 options:

  • You can remove the span with .remove() function.

    span.remove()
    
  • Also you can maintain the span element but remove text.

    span.innerText = ""