onTheInternet onTheInternet - 1 month ago 7
Javascript Question

Removing css class on .focusout

I have a form on a web page that does a validation check before doing a post back to my server. The validation works well and applies a custom CSS class of

ErrorControl
to any input fields when needed.

What I want to accomplish is when a user goes to correct their mistake, they are given immediate feed back that the input is acceptable. I'm using
.focusout
to accomplish this.

Here is 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: " />
<asp:CompareValidator runat="server" ControlToValidate="email1" ControlToCompare="email2" ErrorMessage="Emails don't match"></asp:CompareValidator>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="firstname" ErrorMessage="First name is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="firstname">First Name</label>
<input type="text" class="form-control" runat="server" id="firstname" name="firstname" placeholder="John" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="lastname" ErrorMessage="Last name is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="lastname">Last Name</label>
<input type="text" runat="server" class="form-control" id="lastname" name="lastname" placeholder="Doe" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="address1" ErrorMessage="Address 1 is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="address1">Address 1</label>
<input type="text" class="form-control" runat="server" id="address1" name="address1" placeholder="" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xm-12">
<div class="form-group">
<label class="control-label" for="address2">Address 2 (optional)</label>
<input type="text" class="form-control" runat="server" id="address2" name="address2" placeholder="Apt / Suite #" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="city" ErrorMessage="City is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="city">City</label>
<input type="text" class="form-control" runat="server" id="city" name="city" placeholder="" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="state" ErrorMessage="State is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="state">State</label>
<select class="form-control" runat="server" id="state" name="state">
<option value="" selected disabled>Please select</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xm-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="zip" ErrorMessage="Zip code is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="city">Zip</label>
<input type="text" class="form-control" runat="server" id="zip" name="zip" placeholder="" />
<i class="glyphicon glyphicon-home form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="phone" ErrorMessage="Phone number is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="">Phone #</label>
<input type="tel" class="form-control" runat="server" id="phone" name="phone" placeholder="" />
<i class="glyphicon glyphicon-earphone form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="email1" ErrorMessage="Email is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="email1">Email</label>
<input type="email" class="form-control" runat="server" id="email1" name="email1" placeholder="name@example.com" />
<i class="glyphicon glyphicon-envelope form-control-feedback"></i>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="email2" ErrorMessage="Email confirmation is required">*</asp:RequiredFieldValidator>
<label class="control-label" for="email2">Confirm Email</label>
<input type="email" class="form-control" runat="server" id="email2" name="email1" placeholder="name@example.com" />
<i class="glyphicon glyphicon-envelope form-control-feedback"></i>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 cold-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<asp:RequiredFieldValidator runat="server" ControlToValidate="amount" ErrorMessage="Please enter a dollar amount">*</asp:RequiredFieldValidator>
<label class="control-label" for="amount">Amount</label>
<input type="number" class="form-control" runat="server" id="amount" name="amount" placeholder="$" />
<i class="glyphicon glyphicon-usd form-control-feedback"></i>
</div>
</div>
</div>
</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>


As you can see, I have
asp:requiredvalidator
on the form and I have some javascript that gives them a custom css class when they don't validate.

The next step is to remove the class of
ErrorControl
immediately after the input loses focus.

I've written this javascript that meets the conditionals, but fails to actually remove the class. So I believe there is literally only 1 wrong line of code.

Here is that javascript

<script type="text/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");
}
}
});
</script>


I would be happy to put the form on JSFiddle if that would help, but obviously my
asp:requiredValidator
code wouldn't work.

Answer

You're calling removeClass on $(id), which evaluates to something like $("firstname"). Selecting an element by ID in JQuery requires a preceding #, so what you'd actually want is $("#firstname").

Try this instead:

$("#"+id).removeClass("ErrorControl");
Comments