如何在表单提交之前触发 onBlur答案

【问题标题】：How on trigger onBlur before form submit如何在表单提交之前触发 onBlur
【发布时间】：2023-04-02 19:00:03
【问题描述】：

我有一些input 框，我在其中调用了onBlur 函数以进行验证。

我面临的问题是，当我直接单击提交按钮而不从input 框中跳出时，表单在onBlur 函数调用之前提交，并且没有进行验证。

有人可以在这里提出解决方法吗？我在我的 JSP 页面中使用 javascript 和 JQuery。

【问题讨论】：

在提交时也进行验证
有很多文本框，所以我更喜欢 onBlur 调用而不是再次验证这些文本框。
您可以通过仅在提交处理程序中模糊当前焦点输入来提高新版本（见下文）的效率，但它现在适用于Enter。

标签： javascript jquery html forms jsp

【解决方案1】：

可能有更简单的选项，但您可以停止提交按钮，然后在下一帧提交表单（使用 setTimeout）：

例如像

$('input[type=submit]').click(function(e){
    var $form = $(this).closest('form');
    e.preventDefault():
    setTimeout(function(){ 
       $form.submit();
    }, 0);
});

那么问题是如何允许Enter 密钥表单提交工作，如果您在按Enter 时要验证的字段上。您可能还应该在submit 上验证整个表单。

我想出了以下方法，改用提交事件（因此处理Enter）并在form 上切换一个类（以避免递归），这应该可以满足您的需求：

$('form').submit(function (e) {
    var $form = $(this);
    $form.toggleClass('ignore');
    if ($form.hasClass('ignore')) {
        e.preventDefault();
        $form.find('input[type=text]').blur();
        setTimeout(function () {
            $form.submit();
        }, 0);
    }
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/7uLfra3b/2/

您可以通过仅在提交处理程序中模糊当前焦点输入来提高新版本的效率，但它现在允许Enter。

【讨论】：

这个成功了，非常感谢，只需要想办法绕过回车键。
这个线程很老了，但这是我为捕获 Enter 键所做的。对于每个输入，为 keyDown 添加一个事件侦听器，如果该键是 Enter，则进行验证...。对我来说，输入是一个反应组件，所以基本上我只是向组件添加一个 keyDown 事件侦听器，并在出现任何错误时向父组件发出“信号”以防止表单提交。

【解决方案2】：

也许你可以在输入焦点时禁用提交按钮，并在输入模糊时启用它，如下所示：

$('input').focus(function(){
  $('submit').attr("disabled", true);
}).blur(function(){
  $('submit').attr("disabled", false);
});

希望这可以帮助你:)

【讨论】：

问：实际上仍然会停止 Enter 键提交表单吗？

【解决方案3】：

请看这个例子。

    $('#blurtest').blur(function(){
        $('#bluredText').html($(this).val());
    });
    
    $('#testform').submit(function(e){
        $('#blurtest').trigger('blur');
        $(this).submit();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Blured Text: <span id="bluredText"></span>
<form name="testform" id="testform" action="" method="post">
    <label>Enter Text:</label> 
    <input name="blurtest" id="blurtest" value="" />
    <input name="submit" id="submit" value="Submit" type="Submit"/>
</form>

http://jsfiddle.net/narayand4/xvf2x7ee/22/

我认为你可以这样解决你的问题。

【讨论】：