Hey!
Im working on a project and it uses ActiveForm validations to warn about errors to the user, while that part is working ok, i have elements which can be dynamically added or removed, and when i removed an element which had an errored field, it doesn’t clean up.
I managed to partially clean this up by removing the “error” class using jquery on PHP, but i need to hide the em (error message) fields once again, how can i do that with ease?
The code im using to clean up the error class:
row.find("div").each(function() {
let currentDiv = $(this);
let input = currentDiv.children("select, input");
input.each(function(){
$(this).val('');
});
if (index > 1) {
if(currentDiv.hasClass("product_code") || currentDiv.hasClass("description")){
if (currentDiv.children("input").data("ui-autocomplete")) {
currentDiv.children("input").autocomplete("destroy");
}
}
if(currentDiv.hasClass("error")){
currentDiv.removeClass('error')
}
}
});
And this is the code which adds and removes more fields/rows, the code in which the snippet above is called is inside the remove one, named resetValueEstimationRow(row)
function addNewValueEstimationRow(){
let row = $(document.querySelector('#value-estimation-fieldset > .hidden-item-row'));
let codeAutoCompleteOptions = $("#ExceptionClassification_product_code_0").autocomplete("option");
let productAutoCompleteOptions = $("#ExceptionClassification_description_0").autocomplete("option");
row.removeClass("hidden-item-row");
// add autocomplete
row.find(".classification-loss>div").each(function(index){
let currentDiv = $(this);
let input = currentDiv.children("input, select");
if (currentDiv.hasClass("product_code")) {
input.autocomplete(codeAutoCompleteOptions);
} else if (currentDiv.hasClass("description")) {
input.autocomplete(productAutoCompleteOptions);
}
});
// Limit
let numberOfRows = $("#value-estimation-fieldset .classification-item-row:not(.hidden-item-row)").size();
$("#addNewEstimationValueButton").attr("disabled", numberOfRows >= <?= ExceptionClassification::MAX_ITEMS ?>);
}
function removeValueEstimationRow(event){
let numberOfRows = $("#value-estimation-fieldset .classification-item-row:not(.hidden-item-row)").size();
if (numberOfRows < 2) {
console.error("Can't remove value estimation last row");
return false;
}
let div = $(event.target.closest("div"));
let row = div.parent();
resetValueEstimationRow(row);
//Remove autocomplete
div.children(".product_code>input, .description>input").autocomplete( "destroy" );
$("#addNewEstimationValueButton").attr("disabled", (numberOfRows - 1) >= <?= ExceptionClassification::MAX_ITEMS ?>);
}
How do i get the div with (“em”) in its id so i can hide it again in this case?