I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hiding it because it starts with
display:none</code) still caused the required field to validate for a value even though it should not. The problem arose from my implementation of a jQuery function to replace the default "Fill out this field" message that appears when a <code>required$('.submit').click(function () {
$('input').filter('[required]:visible').each(function () {
if ($(this).attr('type') == 'text') {
if ($(this).val() == '') {
this.setCustomValidity("custom text");
} else {
this.setCustomValidity("");
}
}
});
$('')
});
Due to how event handlers are applied to elements, I had to completely remove and recreate the content of the #alt div when toggled.
$('#open_alt').click(function () {
$(this).hide();
$('#close_alt').show();
$("#alt").fadeToggle();
$(this).next().next().html(blockhtml);
$('#OrderPhoneAlt').prop('required', 'required');
});
$('#close_alt').click(function () {
$(this).hide();
$('#open_alt').show();
$("#alt").fadeToggle();
blockhtml = $(this).next().html();
$(this).next().html('');
});
After toggling the #alt div twice, the browser no longer enforces validation on my required <input>, despite having the required property.
This behavior is likely due to the re-creation of HTML elements. Is there a way to address this issue?
Although the project is built on CakePHP 1.3, I believe this detail is not relevant to the current problem.