Webshims: validate form when submitting via click on a link - html

Question

I am using the Webshims library for polyfilling the validation of a HTML5 form. The problem is that in order for the validation to kick in I have to use an input submit button. This is something that I wish to avoid, since I have a css-styled "linkbutton" for the purpose of saving the form:
<a href="#" id="myLink" class="submit">
<em> </em><span>Save form</span>
</a>
When clicking the "linkbutton" the form submits fine, but the validation never occurs. I use jQuery to submit the form when clicking the link:
$('myLink').click(function(e) {
$('myForm').submit();
});
Is it possible to someway force the validation to occur the same way as when submitting the form with a input submit button?

Answer 1

Webshims implements the form validation API as specified by HTML5. You can read the following bugreport and my answer to it: https://github.com/aFarkas/webshim/issues/103#issuecomment-4298458
Here is a short "workaround" for your problem:
//configure webshims to use customized bubbles
$.webshims.setOptions('forms', {
replaceValidationUI: true
});
//start polyfilling forms feature
$.webshims.polyfill('forms');
$(function(){
$('myLink').click(function(e) {
if($('myForm').checkValidity()){
$('myForm').submit();
}
});
});
But to make this clear, the best way is to use submit buttons. To get submit buttons styled, here is a simple button reset, which should work x-browser:
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input.btn-reset,
button.btn-reset {
overflow: visible;
display: inline-block;
border: none;
padding: 0;
background: transparent;
-webkit-appearance: none;
color: #000;
font-family: arial,helvetica,sans-serif;
cursor: pointer;
}