Question

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

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

单击“linkbutton”时，表单提交正常，但验证永远不会发生。我点击链接时使用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;
}

Webshims：通过点击链接提交时验证表单

1 个答案: