不能在表单上返回 false

Question

所以这是我的问题。

我正在使用 Wordpress 进行开发并使用插件来管理酒店预订流程。

该表单已生成并且没有任何类/ID，因此我必须通过 jQuery 找到它。

jQuery(document).on('ready', function(){
    // Clicking on submit button 
    jQuery('.booking-buttons input[type="submit"]').on('click', function( evt ) {
        if ( validation() ) {
            console.log('yes');
            return true;
        } else {
            console.log('no');
            evt.preventDefault();
            return false;
        }
    });

    validation = function() {
        // if fields validate 
            // return true
        // else
            // return false
        // return false
    }

});

我也尝试了各种onsubmit/click变体，无论如何表单仍然提交，代码也被放置在JS包含的插件之前和之后，仍然没有乐趣。

还有一件有趣的事情，它可以在 Chrome Canary 中运行，但没有别的。

有其他人遇到过这样的问题并有任何指导吗？

谢谢

Answer 1

您可以简单地在 HTML 中使用：

<form onsubmit="return validation()">

或者如果你真的想使用 jQuery：

$("form").submit(function(){return validation();});

Answer 2

<script type="text/javascript">
    function validateForm() {
        var x = document.getElementById('test').value;
        if (x == null || x == 0 || x == "0") {
            alert("Stop");
        }
        else
            document.form.submit();
    }
</script>

检查，但我不会重写你的代码..我从我的项目中使用它，我给你作为例子

Answer 3

尝试附加到submit 事件的表单：

// Shorter DOM ready with local $ for shorter/standard jQuery code
jQuery(function($){
    // Clicking on submit button 
    $('.booking-buttons').closest('form').submit(function( evt ) {
        if ( validation() ) {
            console.log('yes');
            return true;
        } else {
            console.log('no');
            evt.preventDefault();
            return false;
        }
    });

    validation = function() {
        // if fields validate 
            // return true
        // else
            // return false
        // return false
    }

});

根据您的 cmets：由于它在 DOM 就绪处理程序中，唯一的其他问题可能是动态表单创建。

在这种情况下，请使用委托事件处理程序：

例如，例如

// Shorter DOM ready with local $ for shorter/standard jQuery code
jQuery(function($){
    // Clicking on submit button 
    $(document).on('submit', 'form:has(".booking-buttons")', function( evt ) {
        if ( validation() ) {
            console.log('yes');
            return true;
        } else {
            console.log('no');
            evt.preventDefault();
            return false;
        }
    });

    validation = function() {
        // if fields validate 
            // return true
        // else
            // return false
        // return false
    }

});

这样做的好处是它可以在动态创建的表单上工作。基本上它会捕获所有提交到文档的事件，then 应用 jQuery 过滤器，then 将函数应用于 导致事件的任何匹配元素.

如果您允许页面上有多个表单，那么您需要将“当前”表单传递给验证方法：

// Shorter DOM ready with local $ for shorter/standard jQuery code
jQuery(function($){
    // Clicking on submit button 
    $(document).on('submit', 'form:has(".booking-buttons")', function( evt ) {
        if ( validation($(this)) ) {
            console.log('yes');
            return true;
        } else {
            console.log('no');
            evt.preventDefault();
            return false;
        }
    });

    validation = function($form) {
        // if fields within $form are validate 
            // return true
        // else
            // return false
        // return false
    }
});