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

Question

我正在使用 Webshims 库来填充 HTML5 表单的验证。问题是为了启动验证，我必须使用输入提交按钮。这是我希望避免的事情，因为我有一个 css 样式的“linkbutton”用于保存表单:

<a href="#" id="myLink" class="submit">
    <em>&nbsp;</em><span>Save form</span>
</a>

单击“链接按钮”时，表单提交正常，但从未进行验证。单击链接时，我使用 jQuery 提交表单:

$('myLink').click(function(e) {
    $('myForm').submit();
});

是否有可能以某种方式强制验证以与使用输入提交按钮提交表单时相同的方式发生？

Answer 1

Webshims 实现了 HTML5 指定的表单验证 API。您可以阅读以下错误报告和我的回答:https://github.com/aFarkas/webshim/issues/103#issuecomment-4298458

这是针对您的问题的简短“解决方法”:

//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();
        }
    });
});

但要明确这一点，最好的方法是使用提交按钮。要设置提交按钮的样式，这里有一个简单的按钮重置，它应该可以在 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;
}