I deleted my earlier answer, since it was on some points true but not exactly answered the question. My mind was blurred by the question. :) The question is very tricky. Why?
Because in the question the linked Joomla document clearly states that in order to have the validation jQuery functions ignited on your Form, you have to add the form-validate class to your Form like:
<form class="form-validate"> ... </form>
Now, I do not see anything mentioned about this in the question. In the question you see a form Field but you do not see the whole Form itself. You see, it's tricky because this way 'you will never find out' what the real problem is and if the Form has the important class added or not finally. We now only know that the Blur event is not working on the Form field. And we concentrate on the field and on the script. But not on the From itself. Thus the blur effect starts to work on us.:)
It's true that something may happen on the field, some validation when you give the field validate-email class name for example, but according to the document you have to also give the class form-validate to the Form itself too.
And if the correct class is added to the Form then we could see if the script is wrong or not, or whether it is checking any field against emptiness. Since in the given script in the question, it does not look like that the function checks against empty Form fields anyway.
So the above might be the reason of not seeing the blur event happen on the Form.
And I just leave this short function below if anybody needs empty field checking on any Form field. :)
As an extra mile :) I wrote the blur ignited function in jQuery which could be also built in the original Joomla script above, but I just give it as standalone (I tested this too and it works on blur on input field if the field left empty)
.myformfieldclass should be changed to your input field class name.
<script>
jQuery('.myformfieldclass').on("blur", function(){
if(jQuery.trim($(this).val()) === ''){
alert('Input field can not be left blank');
}
});
</script>
UPDATE - ON JOOMLA HANDLER AND BLUR FUNCTION
Now, we could just leave this subject for good, since I do not see any urgent reason to solve this question, which could be handled simply by few lines of code within minutes, but just for fun in coffee break, I checked the Form validation javascript of Joomla and I've found the valid script (thanks to @Lodder too for pointing to the file, I was lazy to search for that). This is a totally different script what was given in the question basically, so I still do not know where that script is coming from in the poster' question. This is how Joomla checks the validity of an email input field if validation is set:
// Default handlers
setHandler('email', function(value, element) {
value = punycode.toASCII(value);
var regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
return regex.test(value);
});
// Attach to forms with class 'form-validate'
var forms = jQuery('form.form-validate');
for (var i = 0, l = forms.length; i < l; i++) {
attachToForm(forms[i]);
}
Now in the above script, you can see clearly two things. The function is attached to Forms which has the class form-validate. That is OK. You can also see that the default email field handler function does not check if the field is empty or not. I still do not see that in the above. Or can anybody confirm that this regex can filter an empty field? Not, but, before this check, there is an html5 validation too on the fields and after that the set Handler validates the field.
Now let's see where Joomla attaches the input fields to blur events:
In this function:
// Attach validate method only to fields
else if (tagName !== 'button' && !(tagName === 'input' && $el.attr('type') === 'button')) {
if ($el.hasClass('required')) {
$el.attr('aria-required', 'true').attr('required', 'required');
}
if (tagName !== 'fieldset') {
$el.on('blur', function() {
return validate(this);
});
if ($el.hasClass('validate-email') && inputEmail) {
elements[i].setAttribute('type', 'email');
}
}
inputFields.push($el);
}
And if the input field class is set to validate:
// Only validate the field if the validate class is set
handler = ($el.attr('class') && $el.attr('class').match(/validate-([a-zA-Z0-9\_\-]+)/)) ? $el.attr('class').match(/validate-([a-zA-Z0-9\_\-]+)/)[1] : "";
From the above short two scripts you can also see quite clearly that all of the input fields which is set to required (and if validate is set in class name and not button and fieldset), so all of these input fields, are sent to validate on blur! Bound to the Blur event. So there is no question about whether blur ignites or not on these fields. These input fields are bound to blur event, no escape.
So, I still do not understand where the problem is coming from which is explained in the original question. However it can happen that I overlooked on something in this file. I did not have too much time.
But if anybody can find something interesting, please be my guest: :)
https://github.com/joomla/joomla-cms/blob/staging/media/system/js/validate-uncompressed.js
FINALLY
The only way I could have checked the whole thing is with creating an email field and check whether the Joomla blur kicks in or not if I click in the field and leave it empty then, without typing anything in the field. What I've found is that Joomla validation on blur only kicks in (if the field is left empty) when the field is set to required validate-email. So this is the only solution on this question. Joomla validation on blur kicks in on empty without problem if the field is required, but only then.
Here is my short recorded image on how it works:
You can see that on blur the validation kicks in on empty field, no exception (if the field is required). If the field is not set to required, on blur nothing happens on empty.
That's the final verdict on this subject. :) Joomla blur works.
