web-dev-qa-db-fra.com

Arrêter le formulaire de soumission, en utilisant Jquery

J'essaie d'empêcher la soumission de mon formulaire si une validation échoue. J'ai essayé de suivre ceci post précédent mais je ne travaille pas pour moi. Qu'est-ce que je rate?

<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>
jqueryasp.net-mvc-3validationpreventdefault
54
Antarr Byrd

Encore une fois, AJAX est asynchrone. La fonction showMsg sera appelée uniquement après la réponse positive du serveur .. et l’événement submit du formulaire n’attendra pas jusqu’à AJAX Succès.

Déplacez la e.preventDefault(); en tant que première ligne du gestionnaire de clics.

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

Voir ci-dessous le code,

Je veux que cela soit autorisé HasJobInProgress == 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();
    }
}
103
Selvakumar Arumugam

utiliser ceci aussi:

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

Becoz e.preventDefault () n'est pas pris en charge dans IE (certaines versions). Dans IE c'est e.returnValue = false

15
Arjun Raj

Une approche différente pourrait être

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

Essayez le code ci-dessous. e.preventDefault () a été ajouté. Cela supprime l'action d'événement par défaut pour le formulaire.

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

En outre, vous avez indiqué que vous souhaitiez que le formulaire ne soit pas soumis en vertu de la validation, mais je ne vois aucune validation de code ici?

Voici un exemple de validation ajoutée

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


    });
 });
3
Downpour046

Ceci est un code JQuery pour empêcher l'envoi

$('form').submit(function (e) {
            if (radioButtonValue !== "0") {
                e.preventDefault();
            }
        });
2
keivan kashani