2

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

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

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

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

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

4

1 回答 1

2

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 浏览器中使用：

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;
}
于 2012-03-13T21:48:52.053 回答