javascript - How on trigger onBlur before form submit - Stack Overflow

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

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

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.

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

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

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.

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

Share Improve this question asked Jan 24, 2015 at 9:24 ZeeshanZeeshan 12.4k21 gold badges81 silver badges102 bronze badges 3
  • Do the validation on submit as well – adeneo Commented Jan 24, 2015 at 9:30
  • there are lots of textboxes, so I'll prefer the onBlur call instead of validating those textboxes again. – Zeeshan Commented Jan 24, 2015 at 9:33
  • You can make the new version (see below) more efficient by only blurring the current focused input in the submit handler, but it now works for Enter. – iCollect.it Ltd Commented Jan 24, 2015 at 19:08
Add a ment  | 

3 Answers 3

Reset to default 3

There may be simpler options, but you could stop the submit button and then submit the form on the next frame (using 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.

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

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 :)

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./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/narayand4/xvf2x7ee/22/

i think you can solve your issue like this way.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1743758844a4502248.html

相关推荐

  • javascript - How on trigger onBlur before form submit - Stack Overflow

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

    6天前
    10

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信