Question

当表单验证失败，标签颜色变为红色时，有人可以帮我处理带有文本标签颜色变化的jQuery验证代码示例。

我需要创建一个包含多个字段的表单，当所需的字段验证表单验证失败时，表单字段标签应该更改为红色，我是jQuery的新手，有人可以帮助我吗？

Answer 1

您的问题有点模糊......但是这里有一个小实现，如何使用jquery检查文本字段上的空值，并根据用户输入的存在更改颜色。

$(document).ready(function(){
   $("#submit").click(function(){
        var textInput = $('#textfield').val();

      if (textInput === "") {
        $('#textfield').css('background', 'red');
      }
      else {
        $('#textfield').css('background', 'green');
      }
   })
})

检查这里的html，看看它是如何工作的。希望能帮助到你 https://fiddle.jshell.net/PatoSalazarC/28t2mjkp/

Answer 2

以下内容将完全符合您的要求。如果您有任何疑问，请与我联系。干杯！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sets up validation for a form, then checks if the form is valid when clicking a button.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
    <label id="myLabel" >First Name: </label>
  <input type="text" id="name" required>
  <br>
  <button type="button">Validate!</button>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
var form = $("#myform");
form.validate();
$("button").click(function () {
    if (form.valid() != true) {
        $("#myLabel").css("color", "red");
    }
});
// Change text "First Name" back to black when user types into textbox
$("#name").keyup(function () {
    $("#myLabel").css("color", "black");
});
</script>
</body>
</html>

用于标签颜色更改的jQuery验证

2 个答案: