Определённый тип вводимых данных в текстовые поля через плагин NumberLetters на jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
span.error { font-style: italic; font-weight: bold; color: red; } div.validationCase { padding: 20px 15px; border: 1px solid; background: none repeat scroll 0 0 #EEEEEE; margin-bottom:15px; } div.validationCase p{ font-style:italic; } form label{ display:inline-block; width: 220px; } form span{ font-style:italic; color:gray; } |
2#: После /head на нужных страницах вставляйте:
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="/js/jquery.numberLetters.js"></script> <script type="text/javascript"> $(document).ready(function() { $("input.letters").letters(); $("input.lettersAndSpace").lettersAndSpace(); $("input.numberLetters").numberLetters(); $("input.numberLettersAndSpace").numberLettersAndSpace(); $("input.numbers").numbers(); }); </script> |
3#: Форма оформляется следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="validationCases"> <div class="validationCase"> <form> <label>Только буквы:</label> <input type="text" class="letters" name="name" maxlength="20" value=""/> <span>Code: $("input.letters").letters();</span> </form> <form> <label>Бкувы и пробелы:</label> <input type="text" class="lettersAndSpace" name="name" maxlength="20" value=""/> <span>Code: $("input.lettersAndSpace").lettersAndSpace();</span> </form> <form> <label>Буквы и цифры:</label> <input type="text" class="numberLetters" name="name" maxlength="20" value=""/> <span>Code: $("input.numberLetters").numberLetters();</span> </form> <form> <label>Цифры, буквы и пробелы:</label> <input type="text" class="numberLettersAndSpace" name="name" maxlength="20" value=""/> <span>Code: $("input.numberLettersAndSpace").numberLettersAndSpace();</span> </form> <form id="validateAfterAll"> <label>Только цифры:</label> <input type="text" class="numbers" name="name" maxlength="20" value=""/> <span>Code: $("input.numbers").numbers();</span> </form> </div> </div> |