20130422-程式-MVC的Client驗証改為Alert型式呈現

這是東拼西揍出來的結果：

20130422-Fix-為了達到Client端驗証Alert及顯示錯誤區塊，直接對jquery.validate修改；參考：http://goo.gl/0ILsC


原先結果：(於該欄位後呈現)


修改後結果：點「查詢」後，顯示所有的Alert



修改後結果：將有錯的區塊套CSS


修改後結果：修正一個後，移除錯誤CSS



============================
以上是動線結果，

修正的地方：直接對 jquery.validate.unobtrusive.js 修改。


function onErrors(event, validator)：
--此 function 可以 取得所有錯誤的資訊。
          validator.numberOfInvalids()： 錯誤數。
          validator.errorList：錯誤列。
                  validator.errorList.length：錯誤數量。
                  validator.errorList[x].message：該筆錯誤訊息。


function onError(error, inputElement)：
--這Function 是每一個每一個元件 loop 。
   ex: 頁面上有5個元件驗証，2個有錯時，此Func會跑5次，有錯的那兩個 error[0].innerText會是該錯誤訊息。(所以於此加上 error CSS)

 function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
            replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

        container.removeClass("field-validation-valid").addClass("field-validation-error");
        error.data("unobtrusiveContainer", container);

        if (replace) {
            container.empty();
            error.removeClass("input-validation-error");//.appendTo(container);
            //20130422-Fix-錯誤動線
            if(error[0].innerText=="")
                $(inputElement).removeClass("errorblock");//加上錯誤CSS
            else
                $(inputElement).addClass("errorblock");
        }
        else {
            error.hide();
        }
    }

 function onErrors(event, validator) {  // 'this' is the form element
        //20130422-Fix-錯誤動線
        var errors = validator.numberOfInvalids();
        var message = "請修正下列 " + errors + " 個錯誤：";

        for (var x = 0; x < validator.errorList.length; x++) {
            message += "\n\u25CF " + validator.errorList[x].message;
        }
        alert(message);
}

(THE END)