jquery - 当我做 ajax 发布时验证输入

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) {
        }
    });
});

我的弹出窗口如下：

我的 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>

我的问题是：

1. 我知道我无法使用 DataAnotations 验证我的输入。那么我怎样才能通过使用 Jquery 来做到这一点呢？

2. 或者任何用于这种验证的 jquery 库？

3. 或建议任何其他方法？

提前致谢。

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) {
           }
         });
    }
});