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

Question

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

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

有人可以建议一个解决方法。 我在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上切换一个类（以避免递归），这应该做你想要的：

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

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