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

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

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

• Вставляем форму добавления статей на сайт – создаем социальную сеть на базе wordpress. Часть 3.
• Как использовать нестандартные шрифты?
• Настраиваем правильную загрузку jquery на wordpress
• Лучшие jquery плагины 2009 года
• Фиксим проблему с png в IE

Обязательно прочтите также и такие интерестные статьи: