So... While "reviewing" a bunch of my old "HTML5" training stuff - I came upon this little "gotcha" (as well as a decent - if not sneaky - fix for it).

HTML5 allows us to use the "required" attribute on "input" fields - and provides "tooltip" style messages to get the user to fill in the required fields. This works GREAT - as long as you have an input type="submit" somewhere in your form. But, what happens when you have "CSS-ified" your site and you are using an anchor with "onClick" and the Javascript ".submit()" method to submit your form? The "required" attribute is ignored!

Well... THAT is problematic! All this pretty CSS layout and design - but because I want to use a stylized link and not a button, we'll ignore the "REQUIRED" attribute?!? Fine! Off to Google I go! After a bit of poking around - I found a code snippet that fit my "programming personality".

Here's where I started:

view plain print about
1<form id="login" method="post" action="signin.cfm">
2    <div class="box">
3    <h1>LOGIN</h1>
4    <input type="email" name="email" class="email" placeholder="Your Email Address" required />
5    <input type="password" name="password" class="password" placeholder="Your Password" required />
6
7    <a href="#" onclick="document.getElementById('login').submit();"><div class="btn">Sign In</div></a> <!-- End Btn -->
8
9    <a href="/signup/"><div id="btn2">Sign Up</div></a> <!-- End Btn2 -->
10
11    </div> <!-- End Box -->
12</form>

You can see that by clicking on the "Sign In" anchor - it triggers the "submit()" for the "login" form. When you run this in a browser - and click "Sign In" - it completely ignores the "required" attribute of "email" and "password". So - who to we "fix" this?

Here's the FIX:

view plain print about
1<form id="login" method="post" action="signin.cfm">
2    <div class="box">
3    <h1>LOGIN</h1>
4    <input type="email" name="email" class="email" placeholder="Your Email Address" required />
5    <input type="password" name="password" class="password" placeholder="Your Password" required />
6
7    <!--- Create a "SUBMIT" input type and do not display it - it will be triggered by the onClick attribute of the Sign-In link below --->
8    <input type="submit" id="sbutton" name="sbutton" value="Submit" style="display:none;">
9
10    <!--- The onClick attribute of the Sign-In link below triggers the "click" event on the    hidden submit button above.
11    This submits the form via a link AND still allows for the "required" attribute of the fields to be handled properly --->

12
13    <a href="#" onclick="document.getElementById('sbutton').click();"><div class="btn">Sign In</div></a> <!-- End Btn -->
14
15    <a href="/signup/"><div id="btn2">Sign Up</div></a> <!-- End Btn2 -->
16    </div> <!-- End Box -->
17
18</form>

In case my code comments aren't straight forward enough - allow me to explain.

1) First - we create an input - of type "submit" - with the ID of "sbutton" (or whatever you like) and set its style to "display:none;". This gives us a hidden "submit button" to work with.

2) Next - we set the onClick attribute of the "Sign In" link to: document.getElementById('sbutton').click();. This searches the DOM for "sbutton" (our hidden submit button) and triggers its ".click()" event.

Because the (albeit hidden) submit button is "clicked" - the form is submitted TECHNICALLY by the submit button and not by a script. This allows the "required" attributes to be processed as they should.