Jquery валидатор форм, проверка полей формы с всплывающими подсказками, ajax validate form
Отборная информация, которая вставляет!

Jquery валидация форм

Недавно пришлось столкнуться с задачей, когда была нужна валидация различных форм на сайте, без перезагрузки самой страницы. Перелопатив немалое количество разных скриптов я нашел довольно интересный, стабильный, легконастраиваемый скрипт, который имеет богатый функционал и при этом легко подключается.

Сразу даю ссылку на и на описание плагина

Итак, как вы видите преимущество (причем солидное) у этого плагина над другими в том, что все ошибки будут сделаны во всплывающих окнах, а значит нам не нужно будет рушить верстку уже готовых форм.

2 – легко подключается. Все что нужно – это добавить подключение скрипта.

Вот так

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> 

<script src="js/jquery.js" type="text/javascript"></script> 

<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script> 

<script src="js/jquery.validationEngine.js" type="text/javascript"></script>


Далее вверху странички добавляем скрипт

<script type="text/javascript">
    $(document).ready(function() {
            // SUCCESS AJAX CALL, replace "success: false," by:     success : function() { callSuccessFunction() }, 
            $("#your-profile").validationEngine()
            //$.validationEngine.loadValidation("#date")
            //alert($("#formID").validationEngine({returnIsValid:true}))
            //$.validationEngine.buildPrompt("#date","This is an example","error")              // Exterior prompt build example                                 // input prompt close example
            //$.validationEngine.closePrompt(".formError",true)                             // CLOSE ALL OPEN PROMPTS
        });

</script>

В котором указываем id формы которую нужно проверить

А к нужным полям нужно добавить класс, к примеру, к полю email нужно добавить class="validate[required,custom[email]". Список всех возможных валидаторов прилагается. (см описание плагина и примеры в архиве плагина) Тут есть и проверка меила, телефона, проверка на заполненность поля, на кол-во символов, на соответствие, на дату, на форматы текста. В общем много всего.   Не забывайте, что у полей также должен быть id (можно абсолютно любой)

При желании можно создавать свои функции

3 – легко настраивается внешний вид. Все тени, фоны, стрелочки сделаны при помощи css и вынесены в отдельный файл – можно делать любой цвет, фон и т.д. Это очень удобно.

4 – Ну и легко можно изменять текст сообщений. по умолчанию есть английский и немецкий. Также можете скачать русский файл, который я делал. если нужно будет что-то поменять, то это легко делается простым редактированием файла.

Пользуйтесь на здоровье.


 

Похожие статьи:



34 комментариев к “Jquery валидация форм”


9643e5d7

  1. Msim:

    Прикольная инфа но не понятно до конца для чего он служит

  2. DEATH:

    В яве не оч силен, подскаже кто как проверить существует ли юзер уже, при вводе логина в форму… что и куда надо отправлять?

    • ETNO:

      это задача не совсем явой нужно делать, это зависит от того куда записывается база данных юзеров. тут нет универсальных приемов, зависит от каждого случая отдельно

  3. Влад:

    После подтверждения отправки данных и валидации, данные пересылаются по адресу, указанному в параметре action формы, а как получить их в javascript сценарий?

  4. :

    Привет! Кириллицу валидатор за буквы не считает :)

  5. Едиль:

    А отключать ,включать можно валидацию динамический?

  6. Игорь:

    Столкнулся с таким «багом» в данном скрипте:
    Если проверка поля осуществляется динамически т.е. через ajax[user.php] то просто кликнув на возникшое окошко ошибки его можно скрыть, а после нажать на submit и вуаля залрос пошел.
    Можт кто знает как это лечить?

    Еще вопрос как убрать анимацию после удачного исхода отправки формы(ну то что форма исчезает и появляется записанное в ajaxSubmitMessage)?

  7. :

    Здраствуйте, ETNO!

    Возможна ли публикация статтей, взятые за основу Ваши, с ссылкой на Ваш сайт?

  8. Александр:

    Подскажите, пожалуйста, регулярное выражение, которое будет валидировать текст на отсутствие html тэгов.. Нужна простая проверка на то, что будут отсутствовать в тексте сущности, вроде или что-то вроде того. Заранее благодарен за ответ…

  9. Ростислав:

    Скажите пожалуйста, как проверить совпадают ли пароли?

  10. :

    скажите пожалуйста как мне поменять название в форме
    name=»…» и id=»…»

  11. :

    Жаль что демка не рабочая… ;(

  12. :

    Спасибо, очень хороший и легкий скрипт

  13. :

    картинка в статье и в Демо не соответствуют друг другу… где бы увидеть примерчик с radio-кнопками?

  14. :

    Спасибо за перевод!

    Но всё-таки необходимо в правило на проверку букв добавить русские и украинские буквы.

    «onlyLetter»:{
    «regex»:»/^[a-zA-Zа-яіїєґёА-ЯІЇЄҐЁ\ \']+$/»,
    «alertText»:»* Только буквы»},

  15. Паша:

    Почему-то не хочет проверять совпадают ли пароли. Всегда выдает ошибку «Поля не совпадают».

    В чем может быть проблема?

  16. Джази:

    Скажите пожалуйста, можно ли сделать скрывающимися автоматически всплывающие окна с ошибками?
    или как-то привязать к fancybox чтобы сворачивались они вместе со всплывающим окном?

  17. Джази:

    Не могу найти, есть возможность проверять поля на валидность только по сабмиту формы? не встречали?

  18. Castro:

    А какая там лицензия? В коммерческих проектах использовать можно?