我如何阻止一个表单提交使用jquery?

我尝试了所有的方法——看看下面我尝试过的3种不同的方法,但都不起作用:

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

会有什么问题呢?

更新-这是我的html:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

这里有什么问题吗?


当前回答

我也有同样的问题。你试过的我也试过。然后我改变我的方法不使用jquery,而是使用“onsubmit”属性在表单标签。

<form onsubmit="thefunction(); return false;"> 

它的工作原理。

但是,当我试图只在function()中放置假返回值时,它不会阻止提交过程,所以我必须放置return false;onsubmit属性。

其他回答

防止默认/防止表单提交使用

e.preventDefault();

停止事件冒泡使用

e.stopPropagation();

为了防止表单提交“返回错误”也应该工作。

我也有同样的问题。你试过的我也试过。然后我改变我的方法不使用jquery,而是使用“onsubmit”属性在表单标签。

<form onsubmit="thefunction(); return false;"> 

它的工作原理。

但是,当我试图只在function()中放置假返回值时,它不会阻止提交过程,所以我必须放置return false;onsubmit属性。

将事件附加到submit元素,而不是form元素。 例如,在你的html中这样做

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

您可以简单地检查表单是否有效,如果是,运行提交逻辑,否则显示错误。

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Javascript

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });

您的页面上可能只有很少的表单,使用$('form').submit()将此事件添加到页面上表单的第一次出现处。使用类选择器代替,或者试试这个:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
}) 

或者更好的版本:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});