验证为假，但表单仍提交

Question

I want to validate whether the number inputted by user exist in the database so I have a action to return a JSON object and check the input before post to server. The problem is it always return false.

Javascript:

<script type="text/javascript">
        var pid = $("#ProductID").val();
        var flag = false;

        $("#button1").click(function () {
            $.get('/Invoice/GetData',
                function (data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i] == pid) {
                            flag = true;
                        }
                    }
                });
            if (flag == false) {
                alert("Invalid Product ID");
                location.reload();
                return false;
            }
            else {
                alert("validations passed");
                return true;
            }
        });
</script>

Form (ASP.NET MVC4)

@using (Html.BeginForm("AddInvoiceDetails","Invoice",FormMethod.Post)) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Invoice_Detail</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.InvoiceID)
        </div>
        <div class="editor-field">
            @Html.TextBox("InvoiceID", (String)ViewBag.invoiceid,new { @readonly="readonly" })
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model=>model.ProductID)
            @Html.ValidationMessageFor(model => model.ProductID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Quantity)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Quantity)
            @Html.ValidationMessageFor(model => model.Quantity)
        </div>

        <p>
            <input id="button1" type="submit" value="Create" />
        </p>
    </fieldset>
} 

Answer 1

You are using ajax which is asynchronous, so your if statements will be executed before $.get() is done executing. You could do this:

    $("#button1").click(function (event) {  
        $.get('/Invoice/GetData',
            function (data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i] == pid) {
                        flag = true;
                    }
                }
                if (flag == false) {
                    alert("Invalid Product ID");
                    location.reload();
                    event.preventDefault(); //prevents post to server
                }
                else {
                    alert("validations passed");                
                }
        }); 
});

Answer 2

Find the solution with the help of a friend, and all other answers really help. The solution is to change the type of "button1" into button and have it submit the form if validation is true and display a dialog if it is false. The code:

Javascript:

<script type="text/javascript">
        $("#button1").live("click",function (event) {
            $.get('/Invoice/GetData',
                function (data) {
                    var pid = $("#ProductID").val();
                    var flag = false;
                    for (var i = 0; i < data.length; i++) {
                        if (data[i] == pid) {
                            flag = true;
                        }
                    }
                    if (flag == false) {
                        alert("Invalid Product ID");
                        return false;
                    }
                    else {
                        $("#myform").submit();
                        return true;
                    }
                });
        });

Form (ASP.NET MVC4)

@using (Html.BeginForm("AddInvoiceDetails", "Invoice", FormMethod.Post, new { id = "myform", data_ajax = "false" }))
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Invoice_Detail</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.InvoiceID)
        </div>
        <div class="editor-field">
            @Html.TextBox("InvoiceID", (String)ViewBag.invoiceid, new { @readonly = "readonly" })
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductID)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProductID)
            @Html.ValidationMessageFor(model => model.ProductID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Quantity)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Quantity)
            @Html.ValidationMessageFor(model => model.Quantity)
        </div>
        <p>
            <input id="button1" type="button" value="Create" />
        </p>
    </fieldset>
}