Validate inputs when I do ajax post

Question

I am working on ASP.Net MVC 2 application. I need to validate below mentioned pop up by using jQuery because I am sending that data using an AJAX call as below.

Note : I am not using any form element for my UI

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

My Pop up window is as below:

My UI Html code is as below :

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

My questions are:

1. I know I am unable to validate my inputs by using DataAnotations. So how can I do that by using Jquery?

2. Or Any jquery library for this kind of validation ?

3. Or Suggest any other method?

Thanks in advance.

Answer 1

Use this function to check the various text boxes...

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

Then modify your AJAX call like this:

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

Answer 2

This will fire form validation

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

Updated

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