停止表单提交，使用 Jquery

Posted 2023-05-09

【中文标题】停止表单提交，使用 Jquery

【英文标题】：Stop form from submitting , Using Jquery

【发布时间】：2012-04-22 23:16:06

【问题描述】：

如果验证失败，我正试图阻止我的表单提交。我试过关注这个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>

【问题讨论】：

以上代码中的哪个函数阻止了表单提交？ showMsg 函数在做什么？你为什么使用 sender.preventDefault();发件人参数是一个事件吗？ preventDefault() 用于在某些事件（例如单击等）时停止元素的正常行为。

发件人指的是 e: 事件

【参考方案1】：

同样，AJAX 是异步的。所以 showMsg 函数只有在服务器响应成功后才会被调用。表单提交事件不会等到 AJAX 成功。

将e.preventDefault(); 作为点击处理程序中的第一行。

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

见下面的代码，

我希望它被允许 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();
    

【讨论】：

这不会在所有情况下都阻止它吗？

您希望在什么条件下允许该事件。您可能需要阻止它提交，然后等待 AJAX 响应并手动触发提交。

我希望它被允许 HasJobInProgress == False

@Vega 谢谢，谢谢，谢谢，谢谢，谢谢，谢谢，谢谢...

【参考方案2】：

也使用这个：

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

Becoz e.preventDefault() 在 IE（某些版本）中不受支持。在 IE 中是 e.returnValue = false

【讨论】：

如果你使用 jQuery，你可以安全地使用e.preventDefault()。 jQuery 将负责 x 浏览器的兼容性。

酷，不知道

来自jQuery on API：“从事件处理程序返回 false 将自动调用 event.stopPropagation() 和 event.preventDefault()。”它继续说：“false 值也可以作为 function() return false; 的简写传递给处理程序”

【参考方案3】：

试试下面的代码。 添加了 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
       );
     


    );
 );

【讨论】：

我实际上并没有验证一个字段。代码的这个 ajax 部分调用一个方法来检查客户端的作业是否已经在进行中。我不想让同一个客户的多个作业排队。

【参考方案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();"/>
    

【参考方案5】：

这是一个用于防止提交的 JQuery 代码

$('form').submit(function (e) 
            if (radioButtonValue !== "0") 
                e.preventDefault();
            
        );