0
У меня есть форма на веб-странице, которая выполняет проверку проверки перед тем, как отправить сообщение обратно на мой сервер. Валидация работает хорошо и применяет собственный CSS-класс ErrorControl к любым полям ввода, если это необходимо.Удаление класса css на .focusout
Что я хочу сделать, когда пользователь исправляет свою ошибку, им предоставляется немедленная обратная связь, что вход является приемлемым. Для этого я использую .focusout.
Вот моя форма
<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="[email protected]" />
<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="[email protected]" />
<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>
Как вы можете видеть, у меня есть asp:requiredvalidator по форме и у меня есть некоторые JavaScript, что дает им пользовательский класс CSS, когда они не проверяют.
Следующий шаг - удалить класс ErrorControl сразу же после того, как вход потеряет фокус.
Я написал этот javascript, соответствующий условиям, но не смог удалить класс. Поэтому я считаю, что буквально есть только одна неправильная строка кода.
Вот что 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>
Я был бы рад поставить форму на JSFiddle, если это поможет, но, очевидно, мой код не будет работать.
Аааа! это кажется настолько очевидным! Большое спасибо. Я отвечу, когда таймер позволит мне это сделать. – onTheInternet
@onTheInternet Счастливые помочь! – Santi