Working with forms is an every day task for almost every web developer. No matter what site you'll create it will use forms. Validating the form da...
For further actions, you may consider blocking this person and/or reporting abuse
Your solution and example is very static and not dynamic.
to make it dynamic i would suggest to use after submitting the form
event.currentTarget.elements
with
event.currentTarget.elements
you will get all the formElements as objectand based on data attribute validation (for example) i would set the validation type. Maybe better is to create a js array of object for your form. On each item you can set the validation type. This is what you can use for validation for the field and form
If you want to have a example let me know
Thanks @rkallan for writing this comment!
Yes, the solution is very static, intentionally. This tutorialβs target audience are the beginners, and I think they get the hang of how it works more easil if the validation is static and not dynamic. Probably would worth to create and advanced form validation tutorial too π€
I understand your explanation and I can agree about the static validation as a start
But to get the values of your form elements I would suggest to use
event.currentTarget.elements
The 2 functions setError and setSucces I would created as 1 function
The if statements for validation I would created functions. And avoiding if elseif else statements
And return value would be a object
Hi RRKallan,Thanks for explaining this, can you provide real time working example on the same !!
@anil027
Thank you !!
Not sure we need such as your extravagant example. I think the OP was trying to teach it at its basic level.
I would rather applaud him for being basic and simple.
The OP replayed and explained it why he used the static way. I can agree with the arguments
You're probably better off using the in-built HTML field validation
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.
Your password example can be done with built-in validation
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.
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
When a user use inspect element and change the pattern or and the type the build in validation would result in a false isValid
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:
True submitting a form needs also to be validate on server side.
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.
Please don't ever just remove the focus styles from form elements like this:
Some people rely on the visual indicator of focused elements, especially those who use a keyboard to navigate the form.
One thing I noticed in your HTML is that you're not using the native form element types where they exist. For example, the email field should be of type
email
. Not only does this present the user with an appropriate keyboard (device dependent) but you can hook into the default validation provided by the browser, and then remove the regular expression checking from the code.In-fact, by using the HTML form validation attributes (
type=""
,required
,pattern
, etc), you can make your Javascript validation far more generic. That way, you can target all input elements as you need, and the validation will still work across the entire form regardless of whatever form elements are added or removed in the future.For simple checkbox validation
//checkbox validation starts here
if(document.SimpleForm.gender[0].checked==false && document.SimpleForm.gender[1].checked==false)
{
alert('Select your gender');
return false;
}
When HTML
<input type="checkbox" name="gender" value="Male"> Male <br/>
<input type="checkbox" name="gender" value="Female"> Female <br/>
Source: Form validation in javascript