Validation form with JavaScript

Question

I'm trying to create a form validation, in pure JavaScript. I have two elements to validate, a select option and a checkbox, but I can't manage to make the select-option to work.

This is the first time I try this, please be patient:

var registrationForm, elSelectGender, elGenderHint, elTerms, elTermsHint; // Declare variables
registrationForm = document.getElementById('registrationForm'); // Store elements
elSelectGender = document.getElementById('gender');
elGenderHint = document.getElementById('genderHint');
elTerms = document.getElementById('terms');
elTermsHint = document.getElementById('termsHint');
elName = document.getElementById('firstName');
elNameHint = document.getElementById('nameHint');

function checkName(event) {
  if (elSelectGender.valueOf() == null) { // If name not entered
    elNameHint.innerHTML = 'You must insert your name.'; // Show message
    event.preventDefault(); // Don't submit form
  }
}

function checkGender(event) {
  if (elSelectGender.valueOf() == 'Select an option:') { // If gender not selected
    elGenderHint.innerHTML = 'You must select a gender.'; // Show message
    event.preventDefault(); // Don't submit form
  }
}

function checkTerms(event) {
  if (!elTerms.checked) { // If check-box ticked
    elTermsHint.innerHTML = 'You must agree to the terms.'; // Show message
    event.preventDefault(); // Don't submit form
  }
}

//Create event listeners: submit calls checkTerms(), change calls packageHint()
registrationForm.addEventListener('submit', checkName, false);
registrationForm.addEventListener('submit', checkGender, false);
registrationForm.addEventListener('submit', checkTerms, false);

<!DOCTYPE HTML>
<html>
<form id="registrationForm" name="registrationForm" method="post" action="example.html">

  <div>
    <label for="firstName" class="input"> Name: </label>
    <input name="firstName" class="form-control" id="firstName" placeholder="First Name" type="text" />
    <div id="nameHint" class="warning"></div>
  </div>

  <div>
    <label for="gender" class="selectbox"> Gender: </label>
    <select id="gender">
      <option value="Select an option:">Select an option:</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
      <option value="I prefer not to say">I prefer not to say</option>
    </select>
    <div id="genderHint" class="warning"></div>
  </div>

  <div>
    <input type="checkbox" id="terms" />
    <label for="terms" class="checkbox"> Check to agree to terms &amp; conditions</label>
    <div id="termsHint" class="warning"></div>
  </div>

  <input class="btn btn-primary" id="submitButton" type="submit" value="Sign up for G Holiday" />
</form>

</html>

I expect to have a warning message and validation for all three elements. If one of the three elements is not validated, it shouldn't go to the next page. It only works for the checkbox for some reason, the other two elements are ignored.

Do some basic debugging. console.log(elSelectGender.valueOf()). — Quentin
– Quentin, Commented Apr 14, 2019 at 16:15
To check validity of the name field, use if(elName.value == "") {}; input field values are never null. — Maxime Launois
– Maxime Launois, Commented Apr 14, 2019 at 16:16
to check validity of gender use if (elSelectGender.value === 'Select an option:') {... — Sahil Raj Thapa
– Sahil Raj Thapa, Commented Apr 14, 2019 at 16:21
@Trace take in mind that those are comments, not answers. I.e: nobody commented about trimming etc, which is (hopefully) expected to be seen in a proper Answer. — Roko C. Buljan
– Roko C. Buljan, Commented Apr 14, 2019 at 16:22

Roko C. Buljan · Accepted Answer · 2019-04-14 18:48:25Z

I'd wrap the selects and inputs into label and use CSS to display the .warning error messages.
Than I'd use Array.prototype.some() to check for any of my elements does not passes a check to than use ev.preventDefault() and display the warnings:

const EL = sel => document.querySelector(sel),
  warning = (el, err) => [err, el.closest('label').classList.toggle('is-error', err)][0],
  noValue = el => warning(el, !el.value.trim()),
  noCheck = el => warning(el, !el.checked),
  checkFormRegistration = ev => {
    const isSomeInvalid = [
      noValue(EL('#firstName')),
      noValue(EL('#gender')),
      noCheck(EL('#terms'))
    ].some(b => b);
    if (isSomeInvalid) ev.preventDefault();
  };

EL('#registrationForm').addEventListener('submit', checkFormRegistration);

label.is-error > *{
  outline: 1px solid red;
  outline-offset: -1px;
}
label + .warning {
  display: none;
  color: red;
}
label.is-error + .warning {
  display: block;
}

<form id="registrationForm" name="registrationForm" method="post" action="example.html">

  <div>
    <label> Name:
      <input name="firstName" class="form-control" id="firstName" placeholder="First Name" type="text">
    </label>
    <div class="warning">Please, enter a name</div>
  </div>

  <div>
    <label> Gender: 
      <select id="gender">
        <option value="">Select an option:</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
        <option value="I prefer not to say">I prefer not to say</option>
      </select>
    </label>
    <div class="warning">Please, select a gender</div>
  </div>

  <div>
    <label>
      <input type="checkbox" id="terms">
      Check to agree to terms &amp; conditions
    </label>
    <div class="warning">You must agree to the terms</div>
  </div>

  <input class="btn btn-primary" id="submitButton" type="submit" value="Sign up for G Holiday">
</form>

The code seems to be working, the error message comes up but it doesn't stop it from opening the new page
@GeorgeS As you can see - works in the above example (the form is submitted only if all checks pass). So probably you missed some HTML or JS changes I introduced. (Like arguments naming... HTML labels as wrappers... I really don't know... could you share your current snippet?)
Sorry, there was a conflict with the rest of the code. Yes, it works perfectly now. Many thanks!

carkod · Accepted Answer · 2019-04-14 16:50:38Z

I changed valueOf() to value equal to empty (when form is initialized, the field is empty, it is not null).

Make sure that your HTML elements are correct, I saw it was wrong before, now it seems to have been corrected.

I added an else statement to handle the errors in the case where the user corrects the validation errors.

Still, this is quite a simplification of validation, it takes a lot more work (things like min-length, max-length you might want to consider them too, as well as sanitization, trimming as mentioned by some commenters, which I will leave it to you).

var registrationForm, elSelectGender, elGenderHint, elTerms, elTermsHint; // Declare variables
registrationForm = document.getElementById('registrationForm'); // Store elements
elSelectGender = document.getElementById('gender');
elGenderHint = document.getElementById('genderHint');
elTerms = document.getElementById('terms');
elTermsHint = document.getElementById('termsHint');
elName = document.getElementById('firstName');
elNameHint = document.getElementById('nameHint');

function checkName(event) {
  if (elName.value == '') { // If name not entered
    elNameHint.innerHTML = 'You must insert your name.'; // Show message
    event.preventDefault(); // Don't submit form
  } else {
    elNameHint.innerHTML = '';
  }
}

function checkGender(event) {
  if (elSelectGender.value == 'Select an option:') { // If gender not selected
    elGenderHint.innerHTML = 'You must select a gender.'; // Show message
    event.preventDefault(); // Don't submit form
  } else {
    elGenderHint.innerHTML = '';
  }
}

function checkTerms(event) {
  if (!elTerms.checked) { // If check-box ticked
    elTermsHint.innerHTML = 'You must agree to the terms.'; // Show message
    event.preventDefault(); // Don't submit form
  } else {
    elTermsHint.innerHTML = '';
  }
}

//Create event listeners: submit calls checkTerms(), change calls packageHint()
registrationForm.addEventListener('submit', checkName, false);
registrationForm.addEventListener('submit', checkGender, false);
registrationForm.addEventListener('submit', checkTerms, false);

<!DOCTYPE HTML>
<html>
<form id="registrationForm" name="registrationForm" method="post" action="example.html">

  <div>
    <label for="firstName" class="input"> Name: </label>
    <input name="firstName" class="form-control" id="firstName" placeholder="First Name" type="text" />
    <div id="nameHint" class="warning"></div>
  </div>

  <div>
    <label for="gender" class="selectbox"> Gender: </label>
    <select id="gender">
      <option value="Select an option:">Select an option:</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
      <option value="I prefer not to say">I prefer not to say</option>
    </select>
    <div id="genderHint" class="warning"></div>
  </div>

  <div>
    <input type="checkbox" id="terms" />
    <label for="terms" class="checkbox"> Check to agree to terms &amp; conditions</label>
    <div id="termsHint" class="warning"></div>
  </div>

  <input class="btn btn-primary" id="submitButton" type="submit" value="Sign up for G Holiday" />
</form>

</html>

Collectives™ on Stack Overflow

Validation form with JavaScript

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related