I fixed the issues by replacing default HTML warning message using function setCustomValidity(). The default HTML warning message is issued at invalid field so that users know where to correct:
// HTML:
<input type="text" name="post_title" size="30" value="" id="title">
<input type="text" name="price" size="30" value="" id="price">
// jQuery:
// Make post title field required - when it is blank, a default warning is issued
jQuery('#title').prop('required', true);
// Change default HTML warning message when title field is blank
let title = document.getElementById("title");
title.addEventListener("input", function(e){
title.setCustomValidity('');
});
title.addEventListener("invalid", function(e){
title.setCustomValidity('Please enter your post title'); //custom validation message for invalid text
});
// Make price field required - when it is blank, a default warning is issued
jQuery('#price').prop('required', true);
// Change default HTML warning message when price field is blank
let price = document.getElementById("price");
price.addEventListener("input", function(e){
price.setCustomValidity('');
});
price.addEventListener("invalid", function(e){
price.setCustomValidity('Please enter a price'); //custom validation message for invalid text
});
Many thanks