停止提交表單，使用Jquery

Question

我試圖阻止我的表單提交，如果驗證失敗。我試着按照這previous post，但我不爲我工作。我錯過了什麼？

<input id="saveButton" type="submit" value="Save" /> 
<input id="cancelButton" type="button" value="Cancel" /> 
<script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 
     $("form").submit(function (e) { 
      $.ajax({ 
       url: '@Url.Action("HasJobInProgress", "ClientChoices")/', 
       data: { id: '@Model.ClientId' }, 
       success: function (data) { 
        showMsg(data, e); 
       }, 
       cache: false 
      }); 
     }); 
    }); 
    $("#cancelButton").click(function() { 
     window.location = '@Url.Action("list", "default", new { clientId = Model.ClientId })'; 
    }); 
    $("[type=text]").focus(function() { 
     $(this).select(); 
    }); 
    function showMsg(hasCurrentJob, sender) { 
     if (hasCurrentJob == "True") { 
      alert("The current clients has a job in progress. No changes can be saved until current job completes"); 
      if (sender != null) { 
       sender.preventDefault(); 
      } 
      return false; 
     } 
    } 

</script> 

Answer 1

此外，AJAX是異步的。所以showMsg函數只有在服務器成功響應後纔會被調用。並且表單提交事件不會等到AJAX成功。

將e.preventDefault();作爲點擊處理程序中的第一行。

$("form").submit(function (e) { 
     e.preventDefault(); // this will prevent from submitting the form. 
     ... 

請參見下面的代碼，

我想這是允許的HasJobInProgress ==假

$(document).ready(function() { 
    $("form").submit(function (e) { 
     e.preventDefault(); //prevent default form submit 
     $.ajax({ 
      url: '@Url.Action("HasJobInProgress", "ClientChoices")/', 
      data: { id: '@Model.ClientId' }, 
      success: function (data) { 
       showMsg(data); 
      }, 
      cache: false 
     }); 
    }); 
}); 
$("#cancelButton").click(function() { 
    window.location = '@Url.Action("list", "default", new { clientId = Model.ClientId })'; 
}); 
$("[type=text]").focus(function() { 
    $(this).select(); 
}); 
function showMsg(hasCurrentJob) { 
    if (hasCurrentJob == "True") { 
     alert("The current clients has a job in progress. No changes can be saved until current job completes"); 
     return false; 
    } else { 
     $("form").unbind('submit').submit(); 
    } 
} 

Answer 2

嘗試下面的代碼。 e.preventDefault（）增加了。這將刪除窗體的默認事件操作。

$(document).ready(function() { 
    $("form").submit(function (e) { 
     $.ajax({ 
      url: '@Url.Action("HasJobInProgress", "ClientChoices")/', 
      data: { id: '@Model.ClientId' }, 
      success: function (data) { 
       showMsg(data, e); 
      }, 
      cache: false 
     }); 
     e.preventDefault(); 
    }); 
}); 

另外，你提到你希望表單在驗證的前提下不提交，但我在這裏看不到代碼驗證？

下面是一些添加了驗證

$(document).ready(function() { 
    $("form").submit(function (e) { 
     /* put your form field(s) you want to validate here, this checks if your input field of choice is blank */ 
    if(!$('#inputID').val()){ 
     e.preventDefault(); // This will prevent the form submission 
    } else{ 
     // In the event all validations pass. THEN process AJAX request. 
     $.ajax({ 
      url: '@Url.Action("HasJobInProgress", "ClientChoices")/', 
      data: { id: '@Model.ClientId' }, 
      success: function (data) { 
       showMsg(data, e); 
      }, 
      cache: false 
     }); 
    } 


    }); 
}); 

Answer 3

使用的示例這個太：

if(e.preventDefault) 
    e.preventDefault(); 
else 
    e.returnValue = false; 

Becoz e.preventDefault（）不支持IE（一些版本）。在IE中它是e.returnValue =假

Answer 4

一種不同的方法可以是

<script type="text/javascript"> 
    function CheckData() { 
    //you may want to check something here and based on that wanna return true and false from the   function. 
    if(MyStuffIsokay) 
    return true;//will cause form to postback to server. 
    else 
     return false;//will cause form Not to postback to server 
    } 
    </script> 
    @using (Html.BeginForm("SaveEmployee", "Employees", FormMethod.Post, new { id = "EmployeeDetailsForm" })) 
    { 
    ......... 
    ......... 
    ......... 
    ......... 
    <input type="submit" value= "Save Employee" onclick="return CheckData();"/> 
    }