jQuery Validatation插件錯誤標籤自定義的HTML

因此，默認情況下，jQuery Validation創建一個'標籤'元素與錯誤消息之後的違規輸入字段與通用消息（即Im罰款）。但是，我希望標籤看起來就像您在美樂網站上看到的jQuery UI警報消息。jQuery Validatation插件錯誤標籤自定義的HTML

因此，而不是默認的：

<label for="fieldname" generated="true">JQUERY VALIDATE ERROR APPEARS HERE</label>

我想驗證使用下面的「包裝HTML」：

<div class="ui-widget"> 
    <div class="ui-state-error ui-corner-all"> 
    <p> 
     <span class="ui-icon ui-icon-alert"></span> 
     <strong>Alert:</strong> JQUERY VALIDATE ERROR MESSAGE WOULD APPEAR HERE 
    </p> 
    </div> 
</div>

我看到改變錯誤類，消息類的幾種方式，甚至錯誤元素 - 但不是錯誤消息的'wrapper html'。任何人都得到了這個權利？

來源

2012-10-21 SupaMonkey

你可以在errorPlacement方法中做到這一點。 NB我必須編寫一些代碼來隱藏郵件後，現場驗證正確

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.10.0/jquery.validate.min.js" 
     type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('input').bind('keyup', function() { 
       if ($(this).valid()) { 
        if ($(this).next().hasClass('ui-widget')) { 
         $(this).next().remove(); 
        } 
       } 
      }); 

      $('form').validate({ 
       errorPlacement: function (error, element) { 
        if (!element.next().hasClass('ui-widget')) { 
         $('<div class="ui-widget"><div class="ui-state-error ui-corner-all"><p><span class="ui-icon ui-icon-alert"></span><strong>Alert:</strong> ' + error[0].innerHTML + ' </p></div></div>').insertAfter(element); 
        } 
       } 
      }); 

     }); 
    </script> 
</head> 
<body> 
    <form> 
    <input name="one" class="required number" /><br /> 
    <input type="submit" /> 
    </form> 
</body> 
</html>

來源

2012-11-12 21:17:00

jQuery Validatation插件錯誤標籤自定義的HTML

回答

相關問題