Form Validation working weirdly
Hi there, I make this validation but when I play with it by changing the inputs, it is performing weirdly, I tried to find the problem but could not, could anyone please help me to find out what the actual problem is?
Please see the video, after changing the name multiple times it is acccepting the wrong input and letting the action file open.
https://codepen.io/hamzacodepen951/pen/xxedjzJ
20 Replies
it should not go to checkout page wheen I wrote hamza5 as input
This is my first form validation, may be logic is poor.
none of your inputs have a name
you're also just rolling out your own validation, instead of using the built-in api
ok, what should I do now?
start over
use names
use the built-in html validation
if you could share some tutorial I would be really tankful to you.
i dont have any tutorial, but you can check the mdn website:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
Is this project frontend only? If so, just use HTML validation.
no i will use of php as wlll for backend
thats why doing frontend validation
for the front end, just use the normal html validation
and add your custom messages
for php, you do the same work, not because you want to but because it's mandatory
Front-end validation is a courtesy to your end user to make submitting the form easier. It doesn't have to be foolproof because it's very easy to circumvent using nothing but the devtools in the browser.
Like Epic said, just use the HTML validation tools, then make sure your validation code on your backend is absolutely ironclad and bulletproof, because that's where you control the code and where you can be absolutely sure the code isn't tampered with or removed altogether
so what I have done till now is fine and I do not have to worry about the Submit button for now as it will be managed properly on the backend side, this is what you are saying?
It is still a good idea to use html validation over rolling your own
<input type="text" class="text_input fluid" placeholder=" " id="Postcode" maxlength="5" pattern="\d*" title="Postcode must be number with 5 digits">
I think you are talking about this
yes, but the pattern is wrong
\d* means that 1 is valid, but 00001 is also valid
also abcd0 is valid, as well as ab0cd
even %&/(5 is valid
^\d{5}$ <-- this pattern should do it, but 00000 is valid
also, don't forget to validate in javascriptyou mean abcd0 and ab0cd could be postcode as well?
yes, and would validate as fine
for now I am doing for my country here postal code is in numbers, is that fine?
it depends on what EXACTLY you want
for example
^0*[1-9]\d{0,4}$ <-- here's a regex that accepts with or without leading 0, and requires 0-4 numbers after
1, 001, 00100, 00000000000000000000010000 are all valid
but, since you limit the length to 5, you can only type 0000 before you need to put any other number before it isn't valid
0, 00, 000, 0000, 00000 and 00000000000000 is invalid as well
the idea is simple: any number of 0 before [1-9], and then up to 4 digits