0

ASP.Net MVC 2 アプリケーションに取り組んでいます。以下のようにAJAX呼び出しを使用してそのデータを送信しているため、jQueryを使用して以下のポップアップを検証する必要があります。

注：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. DataAnnotations を使用して入力を検証できないことはわかっています。では、Jquery を使用してそれを行うにはどうすればよいでしょうか。

  2. または、この種の検証用のjqueryライブラリはありますか?

  3. または他の方法を提案しますか？

前もって感謝します。

4

2 に答える 2

2

この機能を使用して、さまざまなテキスト ボックスをチェックします...

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) {
            }
        });
    }
});
于 2013-01-10T09:40:51.317 に答える
1

これにより、フォームの検証が開始されます

$('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) {
           }
         });
    }
});
于 2013-01-10T08:55:56.990 に答える