使用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;
}

- Jerika

Answer 1

这是最简单的CSS Hack，可以使用CSS选择器来解决这个问题。只需将以下内容添加到您的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>

- Arun Sharma

---

如果这是最简单的解决方案，请投票支持。 - Arun Sharma

@ Ani Menon，它按预期工作。请检查添加的代码片段。 - Arun Sharma

代码无法运行。我能够在简单的输入中完成它。但是我无法在复选框中完成它。 - Jerika

刚刚加了复选框。请检查更新后的答案。它运行良好。 - Arun Sharma

Answer 2

你可以使用带参数的:checked，相邻兄弟选择器+和:not()的css；在onsubmit事件中，如果#cbx2未被checked选中，则添加设置#cbx2 color为red的className。

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>

- guest271314

---

我希望在点击提交按钮后它变成红色。 - Jerika

@Jerika “我想在单击提交按钮时将其变为红色。”请参见更新的帖子。 - guest271314

Answer 3

你可以使用Jquery验证回调函数（成功时，显示错误时）：

$("#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>

- Shady Alset

---

一旦提交按钮被提交，我希望它变成红色。 - Jerika

@Jerika 请看我的更新答案，希望它能按照你的要求工作。谢谢 - Shady Alset