Question

我正在尝试使用jquery验证注册表单。出错，我希望文本框颜色变为红色。但是当用户开始在文本框中书写时，颜色应该从红色变为默认。我可以在出错时将颜色更改为红色。但是当用户在文本框中再次开始写入时，颜色仍然是红色。这是我尝试过的示例代码。

<script type="text/javascript">
$(document).ready(function () {
$('#signup_form').validate({ // initialize the plugin
    rules: {
        firstName: {
            required: true,
           },

        mobile: {
               required:true,
               number: true,
               minlength:10 
        },
},
messages: {
        firstName: "Enter Name",
        mobile: {
            required: "Enter Mobile No",
            number:"Enter valid mobile no",
            minlength: "Enter 10 digit mobile no"
         },
  },
 errorPlacement: function(error, element) {

         if (element.attr("name") == "firstName") {
            $('#firstName').css('border-color', 'red');
         $("#fname").html(error);
        }
        if (element.attr("name") == "mobile") {
            $('#phone').css('border-color', 'red');
            $("#mobile").html(error);
           }
 },
      errorElement : "i"
   });
 });
</script>

Answer 1

$('#TextBox').keyup(function(){
    $(this).css('color', '#fff');
})

keyup事件应该处理它

Answer 2

你可以使用高亮，unhighlight和onkeyup方法，如

$(document).ready(function () {
    $('#signup_form').validate({ // initialize the plugin
        rules: {
            firstName: {
                required: true,
            },
            mobile: {
                required: true,
                number: true,
                minlength: 10
            },
        },
        messages: {
            firstName: "Enter Name",
            mobile: {
                required: "Enter Mobile No",
                number: "Enter valid mobile no",
                minlength: "Enter 10 digit mobile no"
            },
        },
        errorPlacement: function (error, element) {
            if (element.attr("name") == "firstName") {
                $("#fname").html(error);
            }
            if (element.attr("name") == "mobile") {
                $("#mobile").html(error);
            }
        },
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).addClass(errorClass).removeClass(validClass);
            }
            $(element).css('border-color', 'red');
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).removeClass(errorClass).addClass(validClass);
            }
            $(element).css('border-color', '');
        },
        onkeyup: function( element, event ) {
            if ( event.which === 9 && this.elementValue(element) === "" ) {
                return;
            } else if ( element.name in this.submitted || element === this.lastElement ) {
                this.element(element);
            }
            $(element).css('border-color', '');
        },
        errorElement: "i"
    });
});

演示：Fiddle

改变文本框的颜色

2 个答案: