demoshop

版本

3

有許多的時候我們會希望在前端驗證後，表單送出前再加入自己的特殊處理事件，所以會不希望驗證是在使用者按下 Submit 後才執行，此篇舉一個很爛的例子來介紹如何自行呼叫前端驗證（例子真的很爛，我想兩天想不到簡單的例子....）

依序前文的案例，但是為了測試方便我們將 AccountModels 內的 RegisterModel Class 驗證改為全部必填就好

[Required]
public string UserName { get; set; }

[Required]
public string Email { get; set; }

[Required]
public string Password { get; set; }

---

回到 Register.cshtml 將原本的 submit 按鈕註解掉改成一個 Button

<p>
    @*<input type="submit" value="Register" />*@
    <input id="submit" type="button" value="我是 Button" />
</p>

---

增加一段 js code

$(function () {
    $("#submit").click(function (e) {
        if (!$('form').valid()) {
            var error = '';
            $(".field-validation-error").each(function (index, domEle) {
                error += $(domEle).text()+'\n';
            });
            alert(error);
        }
        else
        $('form').submit();
    });
});

這段 js Code 利用了第3行自行呼叫了驗證，當驗證失敗發生時利用 alert 顯示錯誤訊息，如果驗證通過，即送出表格

---

就這樣....這篇是極短篇重點是介紹如何自行呼叫驗證，但真的想不出好例子所以就這樣惡搞了一下還請各位見諒