Click Ignored: Issue With Label Elements To Associate With Form Controls

I have associated the label element to form fields using 'for' attribute. The issue happens when I show a validation message below the form fields. For example, in the below demo,

Solution 1:

This fixes it for me:

$('#formfield1').blur(function() {
    window.setTimeout(function () { $('#errorMessage').text('Form field is required').show(); }, 100);
});

No idea why, but it works. FYI - I tried it with a timeout of 50, and that did not work.

Solution 2:

I think it's because the error message that appear immediately and push the next field so this one is no more at the place where the click occured. Giving some delay to the text will prevent this:

$(function () {
	$('#formfield1').blur(function() {
   	$('#errorMessage').text('Form field is required').delay(1000).show(0);
  });
  
  $('*').on('focus blur', function (e) {
  	console.log(e.type + ' ' + this.id);
  })
});

.hidden { display: none; }
div { margin: 10px; }
label { width: 100px; display: inline-block; }
.as-console-wrapper { max-height: 65px !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 300px; overflow: hidden;">
  <div>
    <label for="formfield1">Form Field 1</label> <input type="text" id="formfield1" />
  </div>
  <div id="errorMessage" class="hidden">

  </div>
  <div>
    <label for="formfield2">Form Field 2</label> <input type="text" id="formfield2" />
  </div>

</div>

Or change the place of the text:

$(function() {
  $('#formfield1').blur(function() {
    $('#errorMessage').text('Form field is required').css('display','inline-block');
  });

  $('*').on('focus blur', function(e) {
    console.log(e.type + ' ' + this.id);
  })
});

.hidden {
  display: none;
}

div {
  margin: 10px;
}

label {
  width: 100px;
  display: inline-block;
}

.as-console-wrapper {
  max-height: 65px !important;
}

#errorMessage {
  position:absolute;
  margin:0 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 300px; overflow: hidden;">
  <div class="box">
    <label for="formfield1">Form Field 1</label> <input type="text" id="formfield1" />
    <div id="errorMessage" class="hidden">
    </div>

  </div>
  <div>
    <label for="formfield2">Form Field 2</label> <input type="text" id="formfield2" />
  </div>

</div>

Solution 3:

This has to do with the input element position within the DOM being modified when you call the .show() function. The errorMessage pushes the input down and changes its bounds which focus seems to rely. If you were to place the errorMessage at the bottom so that .show() does not affect the position of the formField2 input it will focus fine.

https://jsfiddle.net/ykhupeo8/1/