如何在表单提交前触发 onBlur

Question

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

The problem I am facing is that when I directly click on submit button without tabbing out from the input box, form is getting submitted before onBlur function call and the validation is not happening.

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

Answer 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 上切换 class（以避免递归），这应该做你想做的事：

$('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。

Answer 2

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

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

希望对您有所帮助:)

Answer 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/

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

如何在表单提交前触发 onBlur

How on trigger onBlur before form submit

html

javascript

forms

jquery

jsp