2015-02-10 126 views
1

我想添加CSS樣式到顯示使用Jquery驗證的錯誤消息。這些都在消息之下。我是Jquery的新手我已經嘗試在錯誤信息中添加css類而沒有任何效果。Jquery - 表單驗證,添加css樣式到錯誤消息


HTML表單


<form method="post" action="mail.php" id="contact-form"> 
        <div class="form-group"> 
        <label for="name">Name</label> 
        <input type="Text" class="form-control" name="name" id="name" placeholder="Enter Name"> 
        </div> 
        <div class="form-group"> 
        <label for="subject">Subject</label> 
        <input type="text" class="form-control" name="subject" id="subject" placeholder="Enter Subject"> 
        </div> 
        <div class="form-group"> 
        <label for="email">Email address</label> 
        <input type="email" class="form-control" name="email" id="email" placeholder="Enter Email"> 
        </div> 
        <div class="form-group"> 
        <label for="comment">Message</label> 
        <input type="text" class="form-control" name="comment" id="comment" placeholder="Enter Message"> 
        </div> 

        <button type="submit" value="submit" name="submit" class="btn btn-default">Submit</button> 
       </form> 

jQuery的


<script type="text/javascript"> 
       $('#contact-form').submit(function() { 
       $('#loadingimage').show(); 
       $('#loadingtext').show(); 
       }); 
    </script> 

    <script type="text/javascript"> 
     (function($,W,D) 
     { 
      var JQUERY4U = {}; 

      JQUERY4U.UTIL = 
      { 
       setupFormValidation: function() 
       { 
        //form validation rules 
        $("#contact-form").validate({ 
         rules: { 
          name: "required", 
          subject: "required", 
          email: { 
           required: true, 
           email: true 
          }, 
          comment: "required" 
         }, 
         messages: { 
          name: "Please enter your Name", 
          subject: "Please enter a Subject", 
          email: "Please enter a valid Email Address", 
          comment: "Please enter your Message", 

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

      //when the dom has loaded setup form validation rules 
      $(D).ready(function($) { 
       JQUERY4U.UTIL.setupFormValidation(); 
      }); 

     })(jQuery, window, document); 
     </script> 
+0

這jQuery4U碼是什麼,但過於複雜的廢話;一切都可以大大簡化。除了給新用戶造成更多混淆之外,它沒有任何用處。 [請閱讀標籤維基頁面,看看你的代碼可以如何簡化](http://stackoverflow.com/tags/jquery-validate/info) – Sparky 2015-02-10 20:21:53

回答

1

嘗試添加errorClass:'error',

$("#contact-form").validate({ 
          rules: { 
           name: "required", 
           subject: "required", 
           errorClass:'error', 
           email: { 
            required: true, 
            email: true 
           }, 
           comment: "required" 
          }, 
          messages: { 
           name: "Please enter your Name", 
           subject: "Please enter a Subject", 
           email: "Please enter a valid Email Address", 
           comment: "Please enter your Message", 

          }, 
          submitHandler: function(form) { 
           form.submit(); 
          } 
         }); 
+1

完美的作品謝謝你。 – jonathanl5660 2015-02-10 11:36:27