更改文本框邊框顏色和電子郵件驗證@

下面是我的代碼，它是一個客戶端表單驗證，它只顯示驗證消息，但我希望它在顯示驗證消息時也將邊框顏色更改爲紅色。我這樣做（輸入＃註冊表格{邊界：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

更改文本框邊框顏色和電子郵件驗證@

回答

相關問題