如何在不禁用 JQuery 按钮的情况下阻止表单提交？答案

【问题标题】：how to stop a form from submitting without disable the button with JQuery?如何在不禁用 JQuery 按钮的情况下阻止表单提交？
【发布时间】：2016-05-31 11:28:37
【问题描述】：

你好我有一个简单的表单来验证我想做一个客户端验证假设我的表单只有一个名称字段我想检查名称长度是否在 5 到 20 个字符之间如果是那么没问题并且数据将被发送到服务器，然后应用服务器端验证；但是，如果不是，则错误消息将显示在输入字段旁边的范围内，说它必须是 5 到 20 个字符。问题是当我点击提交按钮它显示结果不到一秒钟然后它会导致提交按钮重新加载页面这也意味着如果我包含了我的服务器端验证它也将被处理，因为输入数据已经发送所以我怎么能停止提交按钮从发送数据到服务器并重新加载页面而不禁用按钮。

这是我的示例代码

 <!doctype html>
 <html>
<head>
    <title>form validation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    <script>
        $( document ).ready(function() {
            $("#submit").click(function(){
               myfunction();
            });

            function myfunction()
            {
                name = $("#user").val();
                nameError = $(".error").first();
                myError = "";
                if(name.length < 5 || name.length > 20)
                    myError += "length should be between 5 and 20 ";
                else
                    myError += "ok"

                nameError.html(myError);

            }
        });
    </script>

    <style>
        .error
        {
            color : red;
            text-transform: capitalize;
            margin-left: 20px;
        }
    </style>
</head>
<body>

    <form method="post" action="">
        NAME : <input type="text" name="user" id="user"><span class="error"></span><br />
        <input type="submit" value="Submit" id="submit">
    </form>

</body>
</html>

【问题讨论】：

return true /false from "myfunction" 并检查按钮跨度>

标签： javascript jquery html forms http-post

【解决方案1】：

问题是您没有在发现问题时取消表单提交。

为此，您需要侦听表单上的提交事件，而不是按钮上的点击事件。

试试：

       $("form").on('submit', myfunction); //<-- listen for form submit, not button click

        function myfunction(evt) { //<-- the event object is automatically passed along;
                                   //    this is key for suppressing submission
            name = $("#user").val();
            nameError = $(".error").first();
            myError = "";
            if(name.length < 5 || name.length > 20)
                myError += "length should be between 5 and 20 ";
            else
                myError += "ok"

            if (myError) {
                evt.preventDefault(); //<-- suppress submission if error found
                nameError.html(myError);
            }

        }

您也可以使用HTML5 validation，让您的生活更轻松。

【讨论】：

非常感谢您的帮助，顺便说一句 evt.preventDefault() 也会阻止该数据被发送到服务器，对吗？
例如，我将此作为服务器端验证，在我的表单上得到两个 ok 后，它不会运行此 php 验证为什么
它会阻止数据被发送到服务器 - 即表单提交 - 仅当出现错误时。如果没有，表格将被提交。
我再次尝试仍然给我很好但 php 结果不会显示我还更新了表单中的操作如果您想知道请帮助
只有表单提交后PHP才会生效。你的意思是表单正在提交，但是PHP仍然没有生效？

【解决方案2】：

只需做一件事。这很容易。按照我的代码。不需要javascript或jQuery。代码在我的电脑上测试过。希望会喜欢。

<form method="post" action="" >
  NAME : <input type="text" name="user" pattern="[A-Z a-z.]{5,20}" title="Enter your name between 5 and 20 charecters" required="required" accesskey="U"/><br />
  <input type="submit" value="Submit" id="submit">

【讨论】：

【解决方案3】：

 $("#submit").click(function(){
     if ($('#user').text.length > 4 ){
           myfunction();
    }else{
    // show error message
    }
});

试试这个，点击不在函数中验证

【讨论】：

这不会取消表单提交。
ok.. 添加 (e) 作为函数参数，然后放在 else - e.preventDefault()

【解决方案4】：

Try this one..



<!doctype html>
     <html>
    <head>
        <title>form validation</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

        <script>
            $( document ).ready(function() {


                function myfunction()
                {
                    name = $("#user").val();
                    nameError = $(".error").first();
                    myError = "";
                    if(name.length < 5 || name.length > 20){
                        myError += "length should be between 5 and 20 ";
                        return false;
                    }
                    else{
                        myError += "ok"

                    nameError.html(myError);
                     return true;
                     }

                }
            });
        </script>

        <style>
            .error
            {
                color : red;
                text-transform: capitalize;
                margin-left: 20px;
            }
        </style>
    </head>
    <body>

        <form method="post" action="" onSubmit="return myFunction();">
            NAME : <input type="text" name="user" id="user"><span class="error"></span><br />
            <input type="submit" value="Submit" id="submit">
        </form>

    </body>
    </html>

【讨论】：