Question

我有这个JQuery函数：

function CheckRequired(event) {
    var $form = $(this);

    var emptyElements = $form.find('.required').filter(function() {
        return this.value === ''
    });

    if(emptyElements.length > 0) {
        event.preventDefault();

        emptyElements.addClass("EmptySelect").attr('title', 'This field is required');

        //alert(emptyElements.attr("id"));
        alert("One or more fields cannot be blank");

        return false;
    }
}

我使用另一个函数调用此函数：

$(document).ready(function () {
    $('form').on('submit', CheckRequired);
});

所以它将在所有表格上调用

它检查类required

的表单元素

然后我在PHP中有这个：

if($_POST) {

}

检查已发布的表单（这是在每页上）

然而return false并未阻止表单发布

更新

表单提交按钮如下所示：

<input type="submit" name="submit" id="submit" value="Save" onclick="SubmitForm('#form1', '<?php echo $Settings_PathName; ?>/<?php echo $Settings_PagesPath; ?>/companies/customers/company.php?customer=<?php echo $customer["sequence"]; ?>', '.EditCustomer');" class="btn btn-default" />

函数SubmitForm是：

function SubmitForm(form, postaction, div_name) {
    CheckRequired();

    $(form).submit(function(event){
        event.preventDefault()
        //$('#LoadingDiv').show();
        var data = $(this).serialize();
        $.post(postaction, data)
        .success(function(result){
            console.log(result);
            //$('#LoadingDiv').hide();
            $( div_name ).html(result);
            $("html, body").animate({ scrollTop: 0 }, "slow");
        })
        .error(function(){
            $( div_name ).html('Error Loading Page');
            $("html, body").animate({ scrollTop: 0 }, "slow");

            console.log('Error loading page');
            console.log(result);
        })
        return false;
    });
}

因此表单位于company.php上，正在从customers.php

加载

customers.php有以下代码：

$(document).ready(function() {
        $('.EditCustomer').load("<?php echo $Settings_PathName;?>/<?php echo $Settings_PagesPath; ?>/companies/customers/company.php?customer=<?php echo $_GET["seq"]; ?>");
});

因此无需刷新主页即可提交表单，只需使用jquery重新加载

Answer 1

你可以这样称呼：

$('form').submit(CheckRequired);

或者你可以看到：

你的函数中的

$(this)不是你想的，它是窗口对象。您必须在函数调用中传递上下文：

function CheckRequired(event, el) {
    var $form = $(el); // <---pass the context element here

    var emptyElements = $form.find('.required').filter(function() {
        return this.value.trim() === ''; //<-----should trim the value.
    });

    if(emptyElements.length > 0) {
        event.preventDefault();

        emptyElements.addClass("EmptySelect").attr('title', 'This field is required');

        //alert(emptyElements.attr("id"));
        alert("One or more fields cannot be blank");
        // return false; // it is not needed as you are using event.preventDefault();
    }
}

然后你可以这样称呼它：

$('form').submit(function(){
    CheckRequired(this);
});

Answer 2

你添加的最后一点是你的问题。您实际上只是在submit事件之后才连接click事件处理程序！这也不允许键盘提交表单。

删除onclick按钮上的submit处理程序，然后使用表单上的jQuery事件处理程序。

e.g。

HTML：

<input type="submit" name="submit" id="submit" value="Save" class="btn btn-default" />

如果您需要特定的＆＃34;额外＆＃34;来自每个表单的信息（名称等），您可以将它们作为数据属性注入到表单上，并使用jQuery表单对象上的.data()获取它们。

说明：

你应该能够获取相对于点击表单的div等，而不是传递它。 要提供一个精确的示例，您需要更多的HTML。

JQuery返回false而不是停止执行

2 个答案:

说明：