Question

我正在研究ASP.Net MVC 2应用程序。我需要使用jQuery验证下面提到的弹出窗口，因为我使用AJAX调用发送该数据，如下所示。

注意：我没有使用任何表单元素用于我的UI

addButton.off('click').on('click', function () {
    $.ajax({
        type: "POST",
        url: "/incentives/CreditPackagesAdd",
        data: dataPost,
        dataType: "json",
        success: function (url) {
        }
    });
});

我的弹出窗口如下：

enter image description here

我的UI Html代码如下：

<div class="dialog form simpleForm slimForm" id="add-package" data-width="350" data-title="Add Credit Package">

            <ul>
                <li>
                    <label for="name">
                        Name</label>
                    <input type="text" name="name" id="name" />
                </li>
                <li>
                    <label for="value">
                        Value</label>
                    <input type="number" name="value" id="value" /></li>
                <li>
                    <label for="purchasePrice">
                        Purchase Price</label>
                    <input type="number" name="purchasePrice" id="purchasePrice" /></li>
                <li>
                    <label for="expirationPeriod">
                        Good for</label>
                    <%: Html.PopUp<ExpirationPeriod>("expirationPeriod") %></li>
                <li>
                    <label for="valid">
                        Start Date</label>
                    <input type="date" class="datePicker" name="valid" id="valid" value="<%: DateTime.Today.ToString("M/d/yyyy") %>"
                        data-min="<%: DateTime.Today.ToString("M/d/yyyy") %>" /></li>
                <li>
                    <label for="expiration">
                        Expiration</label>
                    <input type="date" class="datePicker" name="expiration" id="expiration" data-min="<%: DateTime.Today.ToString("M/d/yyyy") %>" /></li>
                <li>
                    <label for="purchasedByCustomer">
                        Cannot be Purchased By Customer</label>
                    <%:Html.CheckBox("isPurchasedByCustomer")%>
                </li>
                <li class="buttons">
                    <button type="button" id="addButton" class="actionButton default">
                        Add</button></li>
            </ul>

        </div>

我的问题是：

我知道我无法使用DataAnotations验证输入。那么我怎么能通过使用Jquery来做到这一点？
或者用于此类验证的任何jquery库？
或建议任何其他方法？

提前致谢。

Answer 1

使用此功能检查各种文本框......

function validateData() {
    // Name
    var n  = $("#name").value;
    if (n == null || n == "") {
        alert("Please fill out name.");
        return false;
    }

    isprice = /^\d+\.\d{2}$/;

    // Value
    var val  = $("#value").value;

    if (val == null || val == "") {
        alert("Please fill out name.");
        return false;
    } else if(!isprice.test( val )) {
        alert("Please enter valid data for Value.");
        return false;
    }   

    // Purchase Price
    var price  = $("#purchasePrice").value;

    if (price == null || price == "") {
        alert("Please fill out name.");
        return false;
    } else if(!isprice.test( price )) {
        alert("Please enter valid data for Purchase Price.");
        return false;
    }

    return true;
}

然后像这样修改你的AJAX调用：

addButton.off('click').on('click', function () {
    if(validateData()) {
        $.ajax({
            type: "POST",
            url: "/incentives/CreditPackagesAdd",
            data: dataPost,
            dataType: "json",
            success: function (url) {
            }
        });
    }
});

Answer 2

这将触发表单验证

$('form').submit(function(evt) {
evt.preventDefault();
var $form = $(this);
if($form.valid()) {
    //Ajax call here
}
});

<强>更新

addButton.off('click').on('click', function () {
   if($("form").valid())
   {
        $.ajax({
        type: "POST",
        url: "/incentives/CreditPackagesAdd",
        data: dataPost,
        dataType: "json",
        success: function (url) {
           }
         });
    }
});

我在执行ajax发布时验证输入

2 个答案: