Form validation

[Stribor45]

I was just hoping if someone can advise on how to validate form. I can use java script to validate but my error messages etc will not look same as html5 validation on input fields such as email, phone number etc.

[Stribor45]

I was able to find most of the answers in this tutorial…

Mozilla form validation

What I find confusing is in the part where author is using HTML5 constraint validation. Here he is using .error in this example…

<form novalidate>
  <p>    
    <label for="mail">
      <span>Please enter an email address:</span>
      <input type="email" id="mail" name="mail">
      <span class="error" aria-live="polite"></span>
    </label>
  </p>
  <button>Submit</button>
</form>

In js code author is using this function

var error = document.querySelector('.error')

to grab element in the tree that matches the .error which in this case works just fine because there is only one <span> that has class .error. But this function searches until it find the first occurrence of element that matches this class.

What if I have other input fields that i want to use this same class. Example what if I had additional input below his email input. Something like this…

    <label for="username">
      <span>Please enter username you wish to use:</span>
      <input type="text" id=username" name="username>
      <span class="error" aria-live="polite"></span>
    </label>

So my question is how would I modify this span element to add error message just like he did in the email input.

[Erik_J]

@Stribor45

So my question is how would I modify this span element to add error message just like he did in the email input.

I think the span should stay as it is and add an event-llistener in the validation script for that label’s input and error-span and check when submitting.

I believe this topic would be better answered in the JavaScript forum.

If you agree to move the thread, just say so in your next post.

[Stribor45]

yes pls

[Erik_J]

Done.

[SpacePhoenix]

Don’t forget to also validate the user submitted data server-side, some users might not have javascript enabled

[m3g4p0p]

In this simple case you might not even need JS but only CSS:

.error {
  display: none;
}

input:invalid + .error {
  display: initial;
}

This will only show .error elements right next to an invalid input element. If you do want to use JS (e.g. for displaying specific error messages based on the type of (in)validity), you can do it like this:

.error {
  display: none;
}

.error.active {
  display: initial;
}

<form id="my-form">
  <label>
    Username
    <input type="text" required>
    <span class="error">Please enter a username</span>
  </label>

  <label>
    Password
    <input type="text" required>
    <span class="error">Please enter a password</span>
  </label>
</form>

var myForm = document.getElementById('my-form')

// Use event delegation so that we don't have to add an
// event listener to each input separately
myForm.addEventListener('input', function (event) {
  var target = event.target
  var validity = target.validity

  // Get the error element wrapped in the same label
  // as the input element itself
  var errorEl = target.parentNode.querySelector('.error')

  // Toggle the active class depending on the validity state;
  // we might also handle different cases here
  if (errorEl) {
    errorEl.classList.toggle('active', !validity.valid)
  }
})

PS: Just occurred to me that another good reason for using JS here is that it doesn’t show the error messages as long as the corresponding input elements are in a “pristine” state, but only when the user actually entered something invalid.

[Stribor45]

Side question kind of related to this…i have 2 pages and I want to keep all the work within one .js file.
I see a problem here when I load the page because there is a variable in .js file that is related to .class which is in this second page and therefore I am receiving error because I am right now loading first page . How do you get around this and yet keep java code in same file.

[m3g4p0p]

@Stribor45

there is a variable in .js file that is related to .class which is in this second page

Wouldn’t a simple check if that element exists do the trick?

var someElement = document.querySelector('.some-class')

if (someElement) {
  // Code specific to the 2nd page
}

[shivkumar]

It is not working!! May I have the link of code pen where you run this code?

[Mittineague]

A better idea would be for you to post the code that is not working for you. Chances are that others do or will have a similar problem and could benefit from having the code posted here.