更改文本框边框颜色和电子邮件验证@

下面是我的代码，它是一个客户端表单验证，它只显示验证消息，但我希望它在显示验证消息时也将边框颜色更改为红色。我这样做（输入＃注册表格{边界：1px固体＃ca4343;}），但没有奏效。更改文本框边框颜色和电子邮件验证@

而且我在电子邮件所需的验证

<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 

    <script> 

    // When the browser is ready... 
    $(function() { 

    // Setup form validation on the #register-form element 
    $("#register-form").validate({ 

     // Specify the validation rules 
     rules: { 
      name: "required", 
      gender: "required", 
      address: "required", 
      email: { 
       required: true, 
       email: true 
      }, 
      username: "required", 
      password: { 
       required: true, 
       minlength: 5 
      } 
     }, 

     // Specify the validation error messages 
     messages: { 
      name: "<br>Please enter your name", 
      gender: "<br>Please specify your gender", 
      address: "<br>Please enter your address", 
      email: "<br>Please enter a valid email address", 
      username: "<br>Please enter a valid username", 
      password: { 
       required: "<br>Please provide a password", 
       minlength: "<br>Your password must be at least 5 characters long" 
      } 
     }, 

     submitHandler: function(form) { 
      form.submit(); 
     } 
    }); 

    }); 

    </script> 

    <form action="./" method="post" id="register-form" novalidate="novalidate"> 

    <div class="label">Name</div><input type="text" id="name" name="name" /><br /> 
    <div class="label">Gender</div><select id="gender" name="gender" /> 
             <option value="">Select One</option> 
             <option value="Female">Female</option> 
             <option value="Male">Male</option> 
            </select><br /> 
    <div class="label">Address</div><input type="text" id="address" name="address" /><br /> 
    <div class="label">Email</div><input type="text" id="email" name="email" /><br /> 
    <div class="label">Username</div><input type="text" id="username" name="username" /><br /> 
    <div class="label">Password</div><input type="password" id="password" name="password" /><br /> 
    <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div> 

    </form>

来源

2014-09-05 seyi oladotun

这确认增加一些类到现场？ – brunozrk 2014-09-05 11:31:45

检查什么@那是一种形式，而不是输入。试试这个：

form#register-form {border:1px solid #ca4343;}

或者更优选地，将无效形式分配给一个类，例如， '无效'。然后你的CSS可以阅读：

form.invalid {border:1px solid #ca4343;}

只使用此边框呈现无效的窗体。

来源

2014-09-05 11:33:51 ne1410s

我想他想添加边框到输入有一些错误 – brunozrk 2014-09-05 11:36:20

是的，我现在看到。我已经更新以包括可能使用的课程。 – ne1410s 2014-09-05 11:37:20

<style> 
    .error,#register-form 
    { 
     border: solid 1px #ca4343 
    } 
    </style>

验证JS添加新的类“错误”，你可以申请这一类的CSS展现边境

来源

2014-09-05 11:37:11

如果我要在电子邮件中检查@请求 – 2014-09-05 12:29:53

对于任何错误它应用相同的类 – 2014-09-05 13:06:13

在CSS创建一个新类：

input.error { 
    border:1px solid #ca4343; 
}

.error是默认的错误类为jquery验证插件

OP增加了检查电子邮件地址@的要求：

行email: true在你的验证规则检查，看是否该电子邮件地址是有效的电子邮件地址，并from the docs这似乎以检查@

来源

2014-09-05 11:53:24 Zac

如果我在javascript – 2014-09-05 12:30:28

所需的电子邮件中检查@ @sioladotun请参阅我的编辑 – Zac 2014-09-05 15:11:16

更改文本框边框颜色和电子邮件验证@

回答

相关问题