 |
| And here we go again... |
Today's episode of Spot The Bug is about form validation. Specifically, HTML form validation.
I had a mailer form, like so, and I wanted to verify that this message box was filled before submission. I just added required in the HTML attributes. Simple, right?
<body>
<h1>Contact Us</h1>
<form method="POST">
<fieldset>
<legend>Email</legend>
<input required name="txtEmail" type="email">
</fieldset>
<br />
<fieldset>
<legend>Subject</legend>
<input required name="txtSubject">
</fieldset>
<br />
<fieldset>
<legend>Message</legend>
<textarea required name="txtMessage" rows="5"> </textarea>
</fieldset>
<br />
<button>Send Mail</button>
</form>
</body>
<h1>Contact Us</h1>
<form method="POST">
<fieldset>
<legend>Email</legend>
<input required name="txtEmail" type="email">
</fieldset>
<br />
<fieldset>
<legend>Subject</legend>
<input required name="txtSubject">
</fieldset>
<br />
<fieldset>
<legend>Message</legend>
<textarea required name="txtMessage" rows="5"> </textarea>
</fieldset>
<br />
<button>Send Mail</button>
</form>
</body>
So here was the form. Each form input element had the required attribute, which tells HTML5 that they cannot be blank.
What Went Wrong
You see that little tag come on when I fail to fill in Email and click Send Mail.
And if I fail to fill in Subject, and click Send Mail.
But when I leave Message blank and click Send Mail, the form attempts to submit. The form submission went through without a hitch. It wasn't supposed to - because I hadn't entered anything in the Message text box. Or so I thought.
Why It Went Wrong
See this? You probably won't spot it right off the bat, but... there is a single space between <textarea> and </textarea>. Innocuous? Not quite, because that would mean that the text content of the HTML element, registers as a single space! Which also means, that it's not an empty string.<textarea required name="txtMessage" rows="5"> </textarea>
Which, of course means that the validation passes!
How I Fixed It
I changed it to this. Now there would be no content in the texbox by default.<!-- <textarea required name="txtMessage" rows="5"> </textarea> -->
<textarea required name="txtMessage" rows="5"></textarea>
<textarea required name="txtMessage" rows="5"></textarea>
And attempting to submit with this box left empty, would trigger the error message!
Moral of the Story
It can't be stated enough, that what you see onscreen isn't necessarily what's happening in the HTML. In this case, it was being reflected on-screen, except that, it being a space and all, was pretty hard to visually detect at a glance.T___T
No comments:
Post a Comment