2015-02-10 104 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