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>&nbsp;</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;
}