0
내 서버로 게시물을 보내기 전에 유효성 검사를 수행하는 웹 페이지에 양식이 있습니다. 유효성 검사가 제대로 작동하고 필요에 따라 ErrorControl의 맞춤 CSS 클래스가 입력 필드에 적용됩니다..focusout에 대한 CSS 클래스 제거
내가 원하는 것은 사용자가 실수를 바로 잡을 때 입력을 받아 들일 수 있다고 즉각적인 피드백을받는 것입니다. 이 작업을 수행하기 위해 .focusout을 사용하고 있습니다.
여기 당신이 볼 수 있듯이, 내가 양식에 asp:requiredvalidator이 내가 그들에게 확인하지 않는 사용자 정의 CSS 클래스를 제공합니다 일부 자바 스크립트가 내 양식
<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>
입니다.
다음 단계는 입력이 포커스를 잃은 후 바로 ErrorControl 클래스를 제거하는 것입니다.
나는 조건부를 충족하는이 자바 스크립트를 작성했지만 실제로 클래스를 제거하지 못했습니다. 따라서 문자 그대로 단 하나의 잘못된 코드 행이 있다고 생각합니다. 여기
자바 스크립트
<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의 양식을 넣어 드리겠습니다,하지만 분명히 내 asp:requiredValidator 코드가 작동하지 않을 것입니다.
아! 그것은 아주 명백하게 보인다! 고맙습니다. 나는 타이머가 그렇게 할 수있게 해줄 때 대답을 받아 들일 것이다. – onTheInternet
@onTheInternet 도와 드리겠습니다! – Santi