jQuery Validation Plugin 1.9 預設忽略 hidden elements 的檢核

今早要實作一個功能，需要使用 ASP.NET MVC 的 HiddenFor 對 Model 作 validation，卻發現沒有作用？

我首先是在 VS2012 上使用 MVC4 作的。

Model

public class TestModel
  {
    [Required]
    public string Name { get; set; }
  }

而 cshtml 也是異常的簡單

@model MvcApplication2.Models.TestModel

@{
        ViewBag.Title = "TestHidden";
}

@using (Html.BeginForm()) {
        @Html.ValidationSummary(true)

        <fieldset>
                <legend>TestModel</legend>

                <div class="editor-label">
                        @Html.LabelFor(model => model.Name)
                </div>
                <div class="editor-field">
                    @Html.HiddenFor(m => m.Name)
                        @Html.ValidationMessageFor(model => model.Name)
                </div>

                <p>
                        <input type="submit" value="Create" />
                </p>
        </fieldset>
}

<div>
  @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts{
  @Scripts.Render("~/bundles/jqueryval")
}

然而，ASP.NET MVC validation 就是不會檢查。

怪的是，同樣地程式碼，使用 ASP.NET MVC 4 在 VS2010 上卻會檢查？？

比較兩方的差異，除了 .net framework 版本不同之外，就是 javascript library 的版本不同了。

再 check 一下，發現只要把 jQuery validation 1.9 換成 1.8 的版本，就正常了。Bingo!!

原來在 jQuery validation 1.9 release note 上有提到

Another change should make the setup of forms with hidden elements easier, these are now ignored by default (option “ignore” has “:hidden” now as default).

所以，不管是 <input type=’hidden’ />, 或者是 <input style=’display:none’ /> 都不再會被檢核。

那要如何在 jQuery validation 1.9 上運作正常呢？幸好還是有解的

$.validator.setDefaults({ ignore: [] });

20121120 附註：

在:hidden 的區塊中，以 jQuery 使用 data 設定 data-val 屬性並沒有作用。試驗的結果，必須使用 $(selector).attr(‘data-val’, false) 來動態開啟/關閉 jQuery validation 對單一輸入的檢核。

換了 SSD 之後，一切都順多了

如上圖。這是我從公司內部網路複製大檔案時的狀況。注意到瓶頸應該是網卡，所以右方的 Network 到達了 98%。

而檔案的複製速度(左方)應該是維持水平。這樣才是正常的。

在換 SSD 之前，瓶頸竟然是 Disk??

討論見 http://www.plurk.com/p/he6xm9 

建議有相同問題的苦主都應該去換換。

在 同一SSD 間複製大檔案，也應該有不錯的寫入速度。

Stat Counter

http://gs.statcounter.com/ 列出了我們軟體業界常常在問的趨勢。

例如 「行動裝置」比一般電腦使用率更高了嗎？結果是還差的很遠http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201109-201209

Windows 7 很普及了嗎？是
http://gs.statcounter.com/#os-ww-monthly-201109-201209

甚至可以看到台灣區的瀏覽器版本。(IE 6.0 只剩1.06% 的使用率)
http://gs.statcounter.com/#browser_version-TW-monthly-201109-201209

是一個不錯的網站

ASP.NET MVC unobtrusive Cheat Sheet

需要一個 client side 的 JavaScript validation library. 而使用 ASP.NET MVC 當然最好使用 jQuery.validate.unobtrusive.js，雖然還是有一點不好用啦!
然而每次都要到 google 找資料也是很累，不如自己做一個清單好了。

		值	說明
	data-val	true, false	是否要驗證
長度限制	data-val-length	字串	字串長度不符合時的錯誤訊息
	data-val-length-max	整數	字串最大長度
	data-val-length-min	整數	字串最小長度
必填	data-val-required	字串	未填入時的錯誤訊息
RegEx	data-val-regex	字串	錯誤訊息
	data-val-regex-pattern	字串	regex
數字	data-val-digits	字串	錯誤訊息。只接受數字字元。
	data-val-number	字串	錯誤訊息。只接受數字(正負)
日期	data-val-date	日期	錯誤訊息。只接受日期。
Email	data-val-email	字串	錯誤訊息
Url	data-val-url	字串	錯誤訊息
範圍	data-val-range	字串	錯誤訊息
	data-val-range-min	整數
	data-val-range-max	整數
比較	data-val-equalto	字串	錯誤訊息
	data-val-equalto-other	驗證項目的name
驗證訊息	data-valmsg-for	驗證項目的name	驗證訊息
附檔名限制	data-val-accept	字串	錯誤訊息
	data-val-accept-exts	字串	Ex: “jpg|gif|png”

範例見黑大的 使用jQuery.validate.unobtrusive.js

動態驗證的 JavaScript

self.save = function() {
        var form = $('#editForm');
        form.removeData("validator");
        $.validator.unobtrusive.parse(form); 
        form.validate();
        if (form.valid()) {
          var url = form.attr('action');
          var postData = form.serialize()
            + "&field1=" + self.field1();
          $.post(url, postData, function(data) {
            if (data.IsOk) {
              alert("已儲存");
            } else {
              alert(data.Message);
            }
          });
        }
      };

[Knockout] 解決 radio checked binding，radio button 老是要按兩次才能選取的的問題

這次問題的過程比較難以描述。

初始問題

問題 sample 如下

http://jsfiddle.net/CharlesLin/X2a5P/

當點選 radio button 時，一開始會點不順利，直到每點過一次以才會正常.

checked 只能 binding 到  string

查詢http://knockoutjs.com/documentation/checked-binding.html 中有提到下面這一段敘述

•For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute. So, your parameter value should be a string

意思是：當使用 checked 繫結時，必須是 string 才有用.

所以，就有了第二個版本：把 Id 改成 string

http://jsfiddle.net/CharlesLin/X2a5P/3/

這樣子就正常了.

我的解法

然而，將 Id 改型別是不合常理的。通常這些資料都是從伺服器端來的，並非我們能控制。最好在 client 能夠正常運作。
最後，只能修改 binding

http://jsfiddle.net/CharlesLin/X2a5P/4/

將 value 改成字串。改正 one-way binding 不影響此處值的顯示。

如此就符合我的需求了

Knockout.js

這是一個關於 Knockout.js 的 sample code 及 投影片。

個人對於 knockout.js 的未來潛力相當看好，是一個可以與 jQuery 爭輝的 JavaScript Library。

Sample Code 及投影片可以到這裡下載。

@Scripts.Render("~/bundles/jqueryval") 引用次數要剛剛好一次

在執行 ASP.NET MVC ajax 新增資料時，發生了重覆 insert的事情。

為什麼呢？原來是重複引用了 @Scripts.Render("~/bundles/jqueryval"). (在 View 中用了一次，在 layout page 中又一次 )

產生的 html code 如下

<script src="/App/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/App/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/App/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

兩次會有什麼效果呢？就是執行一次Request，結果會出現2次的 Request. 如下圖所示。

如果該引用這些 js 而忘了引用呢？不會發生 javascript error, 反而像是沒有 client side validation 一般，只出現 server side 的 validation。

這種現象好奇怪，在開發時很難想到是js 引用次數的問題。