DEV Community

Discussion on: Form validation using javascript

Collapse
 
javascriptacademy profile image
Adam Nagy

That can work for simple use cases, but most of the time there are Specific validation conditions. For example the password should contain lowercase, uppercase letters numbers and should not contain special characters (like ?*%). This example can surely be done with built in HTML valodators, but the aim is to get an idea how you can do more advanced validations.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Your password example can be done with built-in validation

Thread Thread
 
javascriptacademy profile image
Adam Nagy

Okay lets get into a specific use case I faced a few years earlier. On a registration site we had to validate if an email address is a real existing address. To do that we had to call an API to validate the email address. There’s no way to do that eith built in html.

Thread Thread
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

All the in-built stuff can be called with JS. You just need to augment it a little for cases like this - not re-invent the wheel

Thread Thread
 
rkallan profile image
RRKallan

When a user use inspect element and change the pattern or and the type the build in validation would result in a false isValid

Thread Thread
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

Similarly, any JS-only validation can be bypassed (breakpoints, changing values etc.)

Far too many sites these days forget this. I've lost count of the number of forms I've 'fooled' into letting me continue as all the validation is done client-side. I've even seen 'server-side' validation fail as the result of a server-side check whose result was being checked on the client-side - something like this:

const formIsValid = validateFormServerSide()

// make a breakpoint here, change formIsValid to true ...
// Voila! 'server-side' validation bypassed

if (formIsValid) {
  // Do stuff
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
rkallan profile image
RRKallan

True submitting a form needs also to be validate on server side.

Collapse
 
psndoc23 profile image
psnDoc23

Thanks, Adam. This is exactly what I was looking for. A simple JavaScript validation that teaches me the basics of how to do this in a static way with JS, not an elaborate program with all the bells and whistles. And thanks for pointing out the backend validation too, I may have let that slip by without thinking all the way through how people can evade the front end pretty easily.