沒有模型類的htmlhelper中的客戶端驗證

Question

我通過其他鏈接訪問過，但找不到所需的答案。 我沒有為此視圖使用模型。 在將數據發送到服務器之前，我想檢查文本輸入是否為空。如何驗證它？

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container">
    <h2>Student Information</h2>
    @using (Html.BeginForm("insert", "Menu", FormMethod.Post, new { id="target"}))
    {
        <label>First Name:</label>
        <input type="text" class="form-control" name="firstname" id="f_name" />
        <button type="submit" class="btn btn-success" >Insert</button>
    }
</div>

<script>
    $(function () {
        $("#target".submit(function (event) {
            event.preventDefault();
            //return false;
        })
    }) 
</script>

Answer 1

您可以使用簡單的jQuery語句獲取值-$（“＃f_​​name”）。val（），然后檢查其是否為空$（“＃f_​​name”）。val（）== null

因此，您完整的javascript將是

<script>
    $(function () {
        $("#target".submit(function (event) {
            event.preventDefault();
            if($("#f_name").val() == null){
                return false;
            }
            return true;
        })
    })

</script>

Answer 2

試試這個，我使用空字符串（''）而不是null，因為通常空文本框只是空字符串，不一定為null。

<script>
$(function () {
    $('button.btn').unbind();
    $('button.btn').click(function () {

        if($("#f_name").val() == ''){
            return false;
        }
        return true;
    })
})
</script>

Answer 3

如果您不希望使用自定義腳本來驗證客戶端數據，則可以使用jquery.validate.js和jquery.validate.unobstrusive.js 。 這將與mvc驗證規則一樣工作（實際上，當啟用客戶端驗證時，此驗證邏輯由MVC本身在視圖上生成）。

只需在頁面內添加這三個腳本文件即可。

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.js"></script> 

或者，您可以從MVC應用程序內的Script文件夾中進行選擇。 並嘗試在Htmlelement中添加以下屬性以進行驗證。

<div class="container">
    <h2>Student Information</h2>
    @using (Html.BeginForm("insert", "Menu", FormMethod.Post, new { id="target"}))
    {
        <label>First Name:</label>
        <input data-val="true" data-val-required="First Name field is required." type="text" class="form-control" name="firstname" id="firstname" />

        <span class="field-validation-valid" data-valmsg-for="firstname" data-valmsg-replace="true"></span>
        <button type="submit" class="btn btn-success" >Insert</button>
    }
</div>

這將與您視圖中的MVC驗證一樣工作。 您可以通過單擊以下鏈接獲取更多信息，以了解如何使用JqueryValidate和jquery 不引人注意 ： http : //bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html