javascript - 未使用 jQuery 验证器检查时的 Css 样式复选框

Question

如果单击提交按钮后未选中，我希望我的复选框更改标签颜色。我正在使用 jQuery 验证器。我不想显示标签，我只想将我接受更改更改为红色。

验证

jQuery.extend(jQuery.validator.messages, {
  required:"This field is required",
  email: "A valid email address is required"
});

复选框

<label for="cbx2">
   <input name="TermsCondition" type="checkbox" value="on" style="float:left;" class="required" id="cbx2">
   <strong>I Accept</strong>
</label>

CSS

label.error {
    font: 0/0 a;
}

Answer 1

这是使用 css 选择器解决此问题的最简单的 css hack。只需将其添加到您的 CSS。

  .checkbox.valid ~ strong {
color:#000!important;
}

input.error,  .checkbox.error  ~ strong{
    border: 1px dotted red!important;
  color:red!important;
}

label.error {    	
		display: none!important;  
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>


	<script>
	$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});

	$().ready(function() {


		// validate signup form on keyup and submit
		$("#signupForm").validate({
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				},
				password: {
					required: true,
					minlength: 5
				},
				confirm_password: {
					required: true,
					minlength: 5,
					equalTo: "#password"
				},
				email: {
					required: true,
					email: true
				},
				topic: {
					required: "#newsletter:checked",
					minlength: 2
				},
				agree: "required"
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
				password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long"
				},
				confirm_password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long",
					equalTo: "Please enter the same password as above"
				},
				email: "Please enter a valid email address",
				agree: "Please accept our policy",
				topic: "Please select at least 2 topics"
			}
		});

		// propose username by combining first- and lastname
		$("#username").focus(function() {
			var firstname = $("#firstname").val();
			var lastname = $("#lastname").val();
			if (firstname && lastname && !this.value) {
				this.value = firstname + "." + lastname;
			}
		});

		
		
	});
	</script>
	


<div id="main">
	

	<form class="cmxform" id="signupForm" method="get" action="">
		<fieldset>
			<legend>Validate a complete form</legend>
			<p>
				<label for="firstname">Firstname</label>
				<input id="firstname" name="firstname" type="text">
			</p>
			<p>
				<label for="lastname">Lastname</label>
				<input id="lastname" name="lastname" type="text">
			</p>
			<p>
				<label for="username">Username</label>
				<input id="username" name="username" type="text">
			</p>
			<p>
				<label for="password">Password</label>
				<input id="password" name="password" type="password">
			</p>
			<p>
				<label for="confirm_password">Confirm password</label>
				<input id="confirm_password" name="confirm_password" type="password">
			</p>
			<p>
				<label for="email">Email</label>
				<input id="email" name="email" type="email">
			</p>
			<p>
				<label for="agree">Please agree to our policy</label>
				<input type="checkbox" class="checkbox" id="agree" name="agree">
              <strong>I Accept</strong>
			</p>
		
		
			<p>
				<input class="submit" type="submit" value="Submit">
			</p>
		</fieldset>
	</form>