2

HTML5 フォームの検証をポリフィルするために Webshims ライブラリを使用しています。問題は、検証を有効にするには、入力送信ボタンを使用する必要があることです。フォームを保存する目的で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 に答える