Formular vom Senden abbrechen, Jquery verwenden

Question

Ich versuche zu verhindern, dass mein Formular übermittelt wird, wenn eine Validierung fehlschlägt. Ich habe versucht, diese previous post zu folgen, aber ich arbeite nicht für mich. Was vermisse ich?

<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

Auch hier ist AJAX asynchron. Daher wird die showMsg-Funktion nur nach einer erfolgreichen Antwort vom Server aufgerufen. Das Formular-Submit-Ereignis wartet nicht, bis AJAX erfolgreich ist.

Verschieben Sie die e.preventDefault(); als erste Zeile im Click-Handler.

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

ein code,

Ich will es erlaubt HasJobInProgress sein == false

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

den Code unten versuchen. e.preventDefault() wurde hinzugefügt. Dadurch wird die Standardereignisaktion für das Formular entfernt.

Sie haben auch erwähnt, dass Sie das Formular nicht unter der Prämisse der Validierung einreichen wollten, aber ich sehe keine Code-Validierung hier? Hier

ist ein Beispiel für einige zusätzliche Validierung

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

Verwendung auch dies:

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

Becoz e.preventDefault() wird nicht in IE unterstützt (einige Versionen). In IE ist es e.returnValue = false

Answer 4

Ein anderer Ansatz

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