突出显示无效的表单输入

Question

我一直在努力创建一个包含用户名,密码等字段的表单....我想在单击SUBMIT按钮时进行验证.

我正试图从边框颜色中获得警觉.所有字段都有效我的边框必须更改为绿色如果有任何错误,它应该更改为红色.

任何人对我的问题都有任何想法

如果有人有任何建议？

Answer 1

您可以使用jquery插件....在这里.JQuery表单验证自定义示例

Answer 2

使用jQuery验证插件:http://docs.jquery.com/Plugins/Validation

在此插件中,您必须为该字段定义验证规则.您还可以为给定的验证规则设置给定字段的错误消息.

此插件将类添加到有效和无效字段.

你必须给那个班级的CSS.

例如:

$(document).ready(function(){
        $(".my_form").validate({
                    rules:{  // validation rules
                            email_address: {
                                required:true,
                                email: true
                            },
                            password:{
                                minlength: 6
                            },
                            confirm_password: {
                                         equalTo:"#password"
                            }
                    },
                    messages: {
                        email_address: {
                           required: "Please enter email address",
                           email: "Please enter valid email address",
                       },
                       /*
                          likewise you can define messages for different field 
                          for different rule.
                       */
                    }
                    errorClass: "signup_error",  
                     /*This is error class that will be applied to 
                      invalid element. Use this class to style border. 
                      You can give any class name.*/
                });
      });

单击提交按钮后,字段无效,插件会将类添加到您指定的元素中errorClass,当您在字段中输入有效值时,插件将删除此类并'valid'默认添加类.

您可以使用这两个类使用简单元素设置有效和无效元素的样式.

.valid {
   border-color:"green"
}

.signup_error {
  border-color:"red"
}

希望这可以解决您的问题.

Answer 3

首先学习 javascript，如果您有一些 js 的基本知识并且需要了解逻辑，请继续阅读。首先您需要一个事件处理程序来在表单提交上运行函数最简单的方法是（尽管有更好的方法）

<form action="som.php" onsubmit="functionName()">

在这里表格

</form>

这将触发名为 functionname 的函数。在函数名称函数中访问输入字段并使用正则表达式进行验证

function functionName()
{
//verification code
if(verified)
{
//code to change border to green
}


}

您需要获取输入字段并验证它们。如果您不知道如何执行此操作，请获取一些 Javascript 书籍 如果您需要在输入值后立即进行验证，请在输入字段上使用 on onchange 事件