Css style checkbox when not checked with jQuery validator

Question

I want my checkbox to change label color if not checked once the submit button is click. I'm using jQuery validator. I don't want the label to show, I just want to change the I Accept change to red.

Validation

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

Checkbox

<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

You can use css :not() with parameter :checked, adjacent sibling + selector; at onsubmit event, if #cbx2 is not checked, add className which sets #cbx2 color to red

document.getElementById("form").onsubmit = function(event) {
  var message = this.querySelector("#cbx2");
  if (!message.checked) message.className = "invalid";
}

#cbx2:not(:checked).invalid + strong {
  color: red;
}

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

Answer 2

Here's the simplest css hack to fix this using css selectors. Just add this to your 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>

Answer 3

You can use Jquery validate Callback Functions ( on success, on showErrors ) :

$("#registerForm").validate({
  success: function() {
    $("#L_Accept").css('color', 'black');
  },
  showErrors: function() {
    $("#L_Accept").css('color', 'red');
    this.defaultShowErrors();
  },
  
  /* Disable (focusout, keyup, click) Events
     to force check validation by Submit Button ONLY.
  */
  onfocusout: false,
  onkeyup: false,
  onclick: false
});

label.error {
  display:none !important; //hide default error label.
}

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

<h1>Form Validation Example</h1>
<form id='registerForm' name='registerForm' method='post' action='' >
  <label for="cbx2">
    <input name="TermsCondition" type="checkbox" value="on" style="float:left;" class="required" id="cbx2">
    <strong id="L_Accept">I Accept</strong>
  </label>
  
  <input type='submit' name='Submit' value='Submit' />
</form>