Tag Archives: HTML5

HTML5 Input type=number do not accept decimal number – HTML5 Input type number 不能輸入小數位

在公司的Web project上.. 希可以可好好運用HTML5 的 input type 上的Form Validation
這可以增加 data input的安全度

誰不知.. 當我在 input type=”number” 的 textbox上輸入有小數的數值時
他出現錯誤信息
Please enter a valid value, The two nearest value are
Please enter a valid value

<form>
<label> Amount
<input type="number"/>
</label>
</form>

解決放法
我們只需要在這個 type=”number”的 input tag 上加上 step=”any” 這個屬性便可以了
<input type=”number” step=”any” />

E.g.

&lt;form&gt;
&lt;label&gt; Amount
&lt;input type="number" step="any"/&gt;
&lt;/label&gt;
&lt;/form&gt;

Hope you find it useful

TypeError: $(…).checkValidity is not a function

很多時候我們都會使用到一些custom 的Validation
但是我們亦都希望使用HTML5Form Validation 來做第一線的
當我嘗試使用 checkValidity() 功能時
Google Chrome Console出現了以下的錯誤信息
TypeError: $(…).checkValidity is not a function
做了一會research 之後終於找到解決方法了

if ($("#frmConfirm").checkValidity()) {
  console.log("Valid");
}

解決方法:
$(“#frmConfirm”)[0].checkValidity()

if ($("#frmConfirm")[0].checkValidity()) {
  console.log("Valid");
}

Hope you find it useful

Stop form submit via HTML – 如何以HTML停止 Form 提交這個動作

最近想做一些demopage來試一些Javascript 的程式碼
之後發現 任何 buttonform tag 之後
當你按下時..他便會做出 Form Submit這個動作
e.g. 以下的例子會做出Form Submit這個動作

<form role=”form” id=”frmWontSubmit” action=”http://blog.sharechiwai.com” >
<button onclick=”alert(‘Hello’);”> Say Hello</button>
</form>

解決方法十分簡單

我們只需要在 HTML Form tag上加上 onSubmit=”return false” 便可以
E.G.

<form role=”form” id=”frmWontSubmit” action=”http://blog.sharechiwai.com” onSubmit=”return false;”>
<button onclick=”alert(‘Hello’);”> Say Hello</button>
</form>

Demo

HTML5 Form Submit  Demo

Hope you find it useful

HTML5 check if Browser support LocalStorage – HTML5 檢查 瀏覽器是否支援LocalStorage

雖然現在有很多”瀏覽器/Browser” 都支援 HTML5..
但是別要忘記..雖然科技和工具都在..
但是用戶未必會把現有的 “瀏覽器/Browser” 更新到最近的版本..
所以有時候我們也都要 當在網頁 Load的時候檢查一下.. 用戶的 “瀏覽器/Browser” 支不支援 LocalStorage.. [如果你的WebSite有用這個技術的話]
之後便可以作出對應的方法..
令到使用者體驗更好

解決方法:
我們可以使用Javascript 來檢查 一下 “Storage” 這一個Object 是不是 “undefined” 的..
如果是的話 那你的”瀏覽器/Browser” 便不支援 Local Storage

E.G.

<script>
//Check if browser support Local Storage
if(<strong>typeof(Storage) =="undefined"</strong>)
  {
    alert("LocalStorage does not support on your browser..\n Please upgrade you browser in order to run this application");
  }
</script>

Hope you find it useful

Validate HTML5 Sytax on Visual Studio – Visual Studio上驗証 HTML5

當我們在Visual Studio 2010 上建立ASP.Net MVC Application
Visual Studio 會自動產生一些檔案
當我嘗試打開 _Layout.cshtml修改時 [這一個檔案就像 ASP.Net Application 上的Master Page 差不多]
之後發現.. 有很多green line ->[說明了有些Code 是有Warning..不能通過驗證]
Validation (XHTML 1.1): Attribute ‘charset’ is not a valid attribute of element ‘meta’

Validation (XHTML 1.1): Attribute 'charset' is not a valid attribute of element 'meta'

之後發現原來預設的ASP.Net MVC 的Markup 是用HTML5的..
而預設的Visual Studio 2010的預設HTML 驗證是 XHTML1.1.
解決方法只是把 Visual Studio預設的HTML Validator轉成HTML5 便可以了

解決方法:
按”工具列/Tools” ->”選項/Options
Visual Studio 2010 Tools Options
在”選項/Options dialog” 上選擇”文字處理器/Text Editor” ->選擇 “HTML” ->”驗證/Validation
之後在”目標/Target” 上選擇”HTML5” 便可以了
Validate HTML5 Sytax on Visual Studio - Visual Studio上驗証 HTML5
Hope you find it useful