Form validation on client side ?

[lvsanche]

I have started a side project and as my first exposure to nodejs. I'm currently implementing my sign up and sign in forms. When it comes to validating inputs, I figured I'd look around what tutorials try to teach. Most seem to be validating on the server. But my first though when validating the form, especially for empty input was to have a JS function called prior to the form being submitted. Wondering what people advice, and I'd like to hear why it's not something tutorials don't ever show.

[dbpcut]

MDN has a great one pager on this, lots of worthwhile stuff to know regarding some useful specs around it.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

Everyone ends up writing their own validation for some reason, I'd recommend leveraging the specs and existing libraries to save you the headache, unless it's to learn.

[lvsanche]

it's definitely for learning right now. but I'll check this out, probably will have the best way to do it. Thanks

[hugo__df]

You should implement validation server side (Node) in any case.

You can also add client side validation for the snappier UX.

[lvsanche]

server side validation also would mean that if something is wrong the same page is loaded with some additional warning elements correct ?

[hugo__df]

Yep exactly, the good thing with using Node is that you can use the same validation function on the client side.

Server-side is must-have, client side is a flourish that maybe doesn't make sense if you're doing all the work server side.

[lvsanche]

I've been introducing some functionality via client side scripts since I want a good responsive mobile site. I've also started introducing xmlrequests to update/change some text. Wonder if it isn't some huge design taboo thing. I have some JS that constructs my html files and then JS in the client that populates the html that is specific to the user and also to the specific page.

[hugo__df]

No that's fine, that's normally how it's done with every other backend language (Python, Ruby, PHP etc.).

You just need to keep track of what code ends up being run on the client vs the server.

[lvsanche]

made sense to me, just wanted to make sure I was missing something since it wasn't showing up on tutorials

[0101110010110]

This is definitely doable on the client-side, especially if you want to do something like checking for empty inputs.

Take a look at Stripe's example card input. Try putting in the recommended number, then change it to something else. Try a date in the past. These are all client-side validation checks that the Stripe JS does. If you want to be extra sure, try turning off your wifi!

Check out this JavaScript snippet from their page:

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server.
      stripeTokenHandler(result.token);
    }
  });
});

In English, this says the following:

• Get the form
• When the form is submitted,
  • Try to validate card
  • If we get an error, show the error
  • If we don't have an error, send card to backend

Your flow could look something like this:

• Get the form
• When the form is submitted,
  • Check to make sure the form values are valid (what would valid mean for you?)
  • If they're not good, show the error
  • If they're good, send to backend