驗證錯誤但表單仍提交

Question

我想驗證用戶輸入的數字是否存在於數據庫中，因此我有一個操作來返回JSON對象並在發送到服務器之前檢查輸入。問題是它總是返回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> 

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

在朋友的幫助下找到解決方案，所有其他答案真的有幫助。解決方法是將"button1"的類型更改爲按鈕，並在驗證爲真時提交表單，並在虛假時顯示對話框。代碼：

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

表（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> 
} 

Answer 2

您正在使用AJAX是異步的，所以你的if語句將$.get()之前執行執行完畢。你可以這樣做：

$("#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");     
       } 
     }); 
});