Changing text from span/label when button is clicked-CodePudding

I want to clear the error messages using JavaScript after clicking the reset button but I can't seem to make it work.

HTML:

<html>
  <head>
    <title>Simple Registration Form</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <form id="myForm" action="#">
      <div >
        <div >
          <label>
            First name:
            <br /><input
              type="text"
              id="fname"
              placeholder="Enter first name"
            /><br />
            <span  id="fn"></span><br />
          </label>

          <label>
            Last name:
            <br /><input
              type="text"
              id="lname"
              placeholder="Enter last name"
            /><br />
            <span  id="ln"></span><br />
          </label>

          <label>
            Birthdate:
            <br /><input
              type="date"
              id="birthdate"
              placeholder="Enter birthdate"
            /><br />
            <span  id="bday"></span>
          </label>

          <label>
            <br />Gender: <br /><select id="gender">
              <option value="select">Select</option>
              <option value="male">Male</option>
              <option value="female">Female</option></select
            ><br />
            <span  id="gndr"></span><br />
          </label>
        </div>
        <div >
          <label>
            Username:
            <br /><input
              type="text"
              id="username"
              placeholder="Enter username"
            /><br />
            <span  id="usr"></span><br />
          </label>

          <label>
            E-mail:
            <br /><input
              type="email"
              id="email"
              placeholder="Enter email"
            /><br />
            <span  id="eml"></span><br />
          </label>

          <label>
            Confirm E-mail:
            <br /><input
              type="email"
              id="econf"
              placeholder="Retype email"
            /><br />
            <span  id="rt-eml"></span><br />
          </label>

          <label>
            Password:
            <br /><input
              type="password"
              id="password"
              placeholder="Enter password"
            /><br />
            <span  id="pass"></span><br />
          </label>

          <label>
            Confirm Password:
            <br /><input
              type="password"
              id="pconf"
              placeholder="Retype password"
            /><br />
            <span  id="rt-pass"></span><br />
          </label>
        </div>

        <div>
          <input
            type="submit"
            
            onclick="validation();"
            value="Submit"
          />
          <input type="reset"  id="reset" value="Reset" />
        </div>
      </div>
    </form>
    <script src="script.js">
      validation();
      reset();
    </script>
  </body>
</html>

JS:

function validation() {
  var fname = document.getElementById('fname').value;
  if (fname == '') {
    document.getElementById('fn').innerHTML = 'Please enter first name.';
  }
  var lname = document.getElementById('lname').value;
  if (lname == '') {
    document.getElementById('ln').innerHTML = 'Please enter last name.';
  }
  var birth = document.getElementById('birthdate').value;
  if (birth == '') {
    document.getElementById('bday').innerHTML = 'Please enter birthdate.';
  }
  var gender = document.getElementById('gender').value;
  if (gender == 'select') {
    document.getElementById('gndr').innerHTML = 'Please enter your gender.';
  }
  var username = document.getElementById('username').value;
  if (username == '') {
    document.getElementById('usr').innerHTML = 'Please enter username.';
  }
  var email = document.getElementById('email').value;
  if (email == '') {
    document.getElementById('eml').innerHTML = 'Please enter email.';
  }
  var econf = document.getElementById('econf').value;
  if (econf == '') {
    document.getElementById('rt-eml').innerHTML = 'Please confirm your email.';
  }
  if (econf != email) {
    document.getElementById('rt-eml').innerHTML = 'Email did not match.';
  }
  var password = document.getElementById('password').value;
  if (password == '') {
    document.getElementById('pass').innerHTML = 'Please enter password.';
  }
  var pconf = document.getElementById('pconf').value;
  if (pconf == '') {
    document.getElementById('rt-pass').innerHTML =
      'Please confirm your password.';
  }
}

function reset() {
  document.getElementById('myForm').reset();
}

function resetErrors() {
  
}

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 13px;
  top: 20%;
}

.container {
  top: 100px;
  position: relative;
  width: 350px;
  max-width: 100%;
  grid-column-gap: 10px;
  margin: auto;
  display: grid;

  grid-template-columns: auto auto;
  padding: 10px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.5);
  border-radius: 5px;
}

.content {
  margin: 0;
  padding: 0;
}

.btn {
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 70px;
  height: 25px;
  cursor: pointer;
  align-items: center;
  border-radius: 5px;
}

.btn:active {
  background-color: rgb(190, 190, 190);
}

.notif {
  font-size: 11px;
  color: red;
}

input[type='date'] {
  overflow: hidden;
  padding: 0;
  width: 140px;
  -webkit-padding-start: 1px;
  border-radius: 5px;
  padding-left: 0.5em;
  font-size: 12px;
}

input[type='text'],
input[type='email'],
input[type='password'] {
  border-radius: 5px;
  padding-left: 0.5em;
  width: 170;
  font-size: 12px;
}

What should my JavaScript be to clear the error messages in notif class?

CodePudding user response：

Tip: For such actions use button. Use the onclick function and just clear the innerHTML same way.

function validation() {
  var fname = document.getElementById('fname').value;
  if (fname == 'function') {
    document.getElementById('fn').innerHTML = 'Please enter first name.';
  }
  }
  validation();

function reset() {
     document.getElementById('fn').innerHTML = '';
}

<button  id="reset" onclick="reset()">RESET</button>
<label>
First name: </label>
<input type="text" id="fname" placeholder="Enter first name" value="function"/>
            <span  id="fn"></span>

CodePudding user response：

You can select all .notifs and remove the innerHTML of them by iterateting over them.

document.querySelectorAll('.notif').forEach(el => el.innerHTML = '')

CodePudding user response：

you have created a function called "validation", but you haven't linked it to the input with ID "fname".

you need to create an event, which will call that function.

example:

document.getElementById('fname').addEventListener('keyup', validation);

CodePudding user response：

To clear the html from your element: document.getElementById('fn').innerHTML = ""

const nameInput = document.getElementById('name')
const errSpan = document.getElementById('err')
const validateBtn = document.getElementById('validate')
const resetBtn = document.getElementById('reset')

function validate() {
  let name = nameInput.value;
  if (name == '') errSpan.innerHTML = 'Please enter first name.';
}
function reset() {
  errSpan.innerHTML = "";
}

validateBtn.addEventListener('click', validate)
resetBtn.addEventListener('click', reset)

<label>
    First name:
    <input id="name" placeholder="Enter first name" />
    <span id="err" style="color: red"></span>
</label>
<button type="button" id="validate">validate</button>
<button type="button" id="reset">reset</button>