In order to improve user experience on my web page, I have implemented a validation check on a form before submitting it back to the server. The validation process is successful and applies a custom CSS class called ErrorControl to input fields when necessary.
My goal is to provide immediate feedback to users when they correct any errors in their inputs. To achieve this, I am utilizing the .focusout function in JavaScript.
Below is the structure of my form:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Donations</h3>
</div>
<div class="panel-body">
<asp:ValidationSummary runat="server" HeaderText="There were errors on the page: " />
/* Form controls go here */
</div>
<div class="panel-footer">
<asp:Button runat="server" CssClass="btn btn-success pull-right" OnClick="SubmitButton_Click" ID="SubmitButton" Text="Submit Form" />
</div>
</div>
Although the validation process works well, I now want to remove the ErrorControl class immediately after an input field loses focus. I have written some JavaScript code for this purpose, but it's not functioning as expected.
Here is the snippet of the problematic JavaScript:
/* Problematic JavaScript */
$(".panel-body").focusout(function (e) {
var id = e.target.id;
if (id == "firstname" || id == "lastname") {
alert("First if hit");
if (e.target.value != "") {
alert("second if hit");
$(id).removeClass("ErrorControl");
}
}
});
I suspect there is only one incorrect line of code causing the issue. If needed, I can share the form on JSFiddle, keeping in mind that the asp:requiredValidator may not function properly.