用于错误验证的 CSS 表单突出显示答案

【问题标题】：CSS form highlighting for error validation用于错误验证的 CSS 表单突出显示
【发布时间】：2013-05-07 19:54:56
【问题描述】：

http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/ 我在我的一个网站上有这个表格，但他们制作这个表格的方式对我来说很复杂。我想知道当用户出错时是否有任何方法可以验证输入框为红色。像这样http://jsfiddle.net/3UCbw/1/ 我只想在用户犯错时突出显示红色框就是这样。感谢任何帮助将不胜感激！

这是我的高亮代码。

div.highlight {
-webkit-box-shadow:5px 5px 5px black; 
-moz-box-shadow: 5px 5px 5px black; 
 box-shadow:5px 5px 5px black; 
 -webkit-box-shadow:0 0 15px red; 
 -moz-box-shadow: 0 0 15px red; 
 box-shadow:0 0 15px red; 
 }

您可以查看顶部链接中的表格！也许在jquery中很容易突出显示框谢谢！

【问题讨论】：

题为“ajax php form with jquery”的问题应该在某处包含一些 AJAX、PHP 或 jQuery 代码。
代码在网站上的链接谢谢。
我把标题改成更合适的了
感谢您提供更好的标题。感谢您的帮助。
你的意思是这样的？ http://jsfiddle.net/3UCbw/16/ 或者我不明白你的问题......

标签： css forms validation highlight

【解决方案1】：

$.fn.extend({
    ensure: function(regex, failClass){
        return this.each(function(){
            if(this.nodeName.toLowerCase() == "input"){
                $(this).change(function(){
                    var $input = $(this);
                    var val = $input.val().toUpperCase();                    
                    if(regex.test(val)){
                        $input.removeClass(failClass)
                    } else { 
                        $input.addClass(failClass);
                    }
                });
            }
        });
    }
});

var emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/
$('#email').ensure(emailRegex, 'error');

http://jsfiddle.net/CharlesTWall3/SFV3s/25/

【讨论】：