2012-03-12 105 views
2

我正在使用Webshims庫來填充HTML5表單的驗證。問題是,爲了驗證啓動,我必須使用輸入提交按鈕。這是我想避免的事情,因爲我對保存形式爲目的的CSS樣式「LinkBut​​ton的」:Webshims:通過點擊鏈接提交時驗證表單

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

當點擊「LinkBut​​ton的」表單提交的罰款,但確認不會發生。我使用jQuery提交表單,點擊鏈接時:

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

是否有可能迫使好歹驗證了輸入提交表單時爲提交按鈕會出現同樣的方式?

+0

我理解您的問題(雖然我不知道它的原因),但沒有任何理由你不不想僅僅使用風格化的'

+0

謝謝,但我不能使用按鈕,因爲我們有一致的外觀鏈接按鈕的設計指南,我必須打破這些才能使

回答

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

謝謝,這樣做!我明白最好的方法是使用提交按鈕,但在我的情況下這是不可行的。 – 2012-03-14 10:08:39