Question

我有一些input框，其中我要求onBlur函数进行验证。

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

有人可以在此建议解决方法。我在JSP页面中使用了javascript和JQuery。

Answer 1

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

e.g。

之类的东西

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

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

我提出了以下内容，改为使用提交事件（因此处理Enter）并在form上切换一个类（以避免递归），这应该按照您的意愿执行：< / p>

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

3 个答案: