4

I have a form which has an error message as shown in the example below:

http://codepen.io/anon/pen/dYWyEM?editors=101

Steps to reproduce the problem is as follows:

After opening the codepen link,

  1. Focus in the input field

  2. Press submit button

  3. Since, blur event is triggered first, the error message is made hidden first, thus the position of the submit button is changed. Thus the click event is not registered at all and I need another click to submit the form.

Is there any way to send the submit event first?

Somehow I need to detect the target that triggers the blur event. It seems that relatedTarget enables us to figure out the element that triggered the blur event. However, this does not work in Firefox.

Is there way to figure out the relatedTarget in all browsers?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ankakusu
  • 1,738
  • 8
  • 26
  • 37
  • You could simply delay the hiding of your error message for about 10 milliseconds? – somethinghere Oct 05 '15 at 15:20
  • Instead of `display: none` you could perhaps use `visibility: hidden`? Not really an answer to your question, but it could provide a possible workaround. – ZiNNED Oct 05 '15 at 15:21
  • bind a key event/ input handler to remove message when valid – charlietfl Oct 05 '15 at 15:23
  • Simply use this: `setTimeout(function(){ errorMsg.addClass('hidden'); },200)` - this solves your issue. – somethinghere Oct 05 '15 at 15:24
  • @charlietfl What do you mean by `bind a key event / input handler`? Can you give an example? – ankakusu Oct 05 '15 at 15:26
  • @somethinghere but not very intuitive to user – charlietfl Oct 05 '15 at 15:26
  • @ZiNNED Thank you very much for the answer. But, then there will be an empty space when the error message is removed. – ankakusu Oct 05 '15 at 15:27
  • `myInput.on('keyup', function(){ if(valid){ errorMsg.addClass('hidden')}` . – charlietfl Oct 05 '15 at 15:28
  • 1
    @charlietfl In what way is that _not_ intuitive to the user? You think a 200ms delay will make them think they filled in the form incorrectly? People don't even notice a 500ms delay for tracking every link you click, let alone a 200ms delay before an error dissolves itself. – somethinghere Oct 05 '15 at 15:29
  • @somethinghere yeah...probably right – charlietfl Oct 05 '15 at 15:29
  • @somethinghere Not that it's not "intuitive", it's just won't work well, because behaviour depends on things that program should not depend on. For example, how quickly user mouse clicks - if it's slow 200ms might be not enough. Try to click "slowly". So you might want to increase timeout. And yea, 500ms is very noticeable. – dfsq Oct 05 '15 at 15:47
  • @dfsq if the user blurs when clicking on submit, then this works, otherwise _the user was not expecting the click to do anything but blurring the input_ and there is no loss. Also, an animation of the element would be nice as it helps the user, but it solves the issue. – somethinghere Oct 05 '15 at 15:50

2 Answers2

6

If your intention is to perform field validation on blur, you still need a way to check to see if there are any validation errors on form submit, so that you avoid submitting the form while there are validation errors.

I'm therefore suggesting an alternative approach instead of a workaround/fix to your exact problem because I think the current model might be troublesome to begin with.

Why don't you perform all field validations on form submit instead of field blur and then prevent the submission when any of the fields have a validation error?

Ates Goral
  • 137,716
  • 26
  • 137
  • 190
  • In my implementation, I'm validating the input fields both on `submit` and `blur`. I think, validating the input fields only on submit, is not a good user interaction. But, thank you for the suggestion anyway. – ankakusu Oct 05 '15 at 15:32
0

Based on what was told in this answer I came with this solutio. Listen to the mousedown event that triggers before blur and check if the user can submit the form based on if the error message is visible or not.

form.on('mousedown','input[type="submit"]', function(e) {
  if(!errorMsg.hasClass("hidden")){
    e.preventDefault();
    alert("Can't submit until the error message is gone");
  }
});

I have updated your CodePen.

Community
  • 1
  • 1
Alvaro Flaño Larrondo
  • 5,516
  • 2
  • 27
  • 46
  • I saw similar workarounds. For now, I'm digging more to find a better solution. But thank you for noting it down! – ankakusu Oct 05 '15 at 15:34