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

Question

你好我有一个简单的表单来验证我想做一个客户端验证假设我的表单只有一个名称字段我想检查名称长度是否在 5 到 20 个字符之间如果是则否问题，数据将被发送到服务器，然后应用服务器端验证；但是，如果不是，则将在输入字段旁边的跨度中显示一条错误消息，表明它必须是 5 到 20 chars.The问题是当我点击提交按钮时它显示结果不到一秒钟然后它会导致提交按钮重新加载页面这也意味着如果我已经包括我的服务器端验证它也将被处理因为输入数据已经发送所以如何在不禁用按钮的情况下阻止提交按钮向服务器发送数据并重新加载页面。

这是我的示例代码

 <!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>

Answer 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 让您的生活更轻松。

Answer 2

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

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

Answer 3

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>

Answer 4

只做一件事。非常easy.Follow我的code.There不需要javascript或jQuery.Code在我的Pc.Hope上测试会很享受.

<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">

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

how to stop a form from submitting without disable the button with JQuery?

html

javascript

forms

jquery

http-post