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

I have some input box in which I am having onBlur function called for validation.

我有一些输入框，其中我有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.

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

Can someone suggest a workaround here. I am using javascript and JQuery in my JSP page.

有人可以在这里建议一个解决方法。我在JSP页面中使用javascript和JQuery。

3 个解决方案

#1

There may be simpler options, but you could stop the submit button and then submit the form on the next frame (using setTimeout):

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

e.g. something like

例如就像是

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

The problem then is how to allow Enter key form submission to work, if you are on the field you want to validate when you press Enter. You should probably also validate the entire form on submit too.

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

I came up with the following, using the submit event instead (so Enter is handled) and toggling a class on the form (to avoid recursion), which should do what you want:

我提出了以下内容，使用提交事件（因此输入处理）并在表单上切换一个类（以避免递归），这应该做你想要的：

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

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

You can make the new version more efficient by only blurring the current focused input in the submit handler, but it now allows for Enter.

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

#2

may be you can disable the submit button when input is on focus, and enable it when input is on blur, something like this:

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

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

Hope this can help you :)

希望这可以帮到你：）

#3

please see this example.

请看这个例子。

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

i think you can solve your issue like this way.

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

#1