Webshims: validate form when submitting via click on a link

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?

I understand your problem (although I don't know the cause of it), but is there any reason you don't want to just use a styled ` — Wesley Murch, Mar 12 '12 at 17:58
Thanks, but I can't use a button, because we're having design guidelines for consistent looking linkbuttons, and I have to break those in order to make the — Good Samaritan, Mar 13 '12 at 07:08

score 2 · Accepted Answer · answered Mar 13 '12 at 21:48

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;
}

Thanks, that did it! I understand that the best way is to use submit buttons, but this is not achievable in my case. — Good Samaritan, Mar 14 '12 at 10:08

Webshims: validate form when submitting via click on a link

1 Answers1