В следующем листинге код JavaScript который необходимо разместить в отдельном файле и подключить как <script src=""></script>, кроме того аналогичным способом требуется подключить JQuery и плагин валидации.
Разберем что и зачем используется в скрипте. В конструкции $('form.className').validate сообщаем плагину что форма с которой будем работать имеет класс className. Далее методу validate передаётся массив(возможно правильно необходимо называть объектом) с параметрами в которых устанавливаются правила валидации, действия для валидных и не валидных элементов а так же действия которые необходимо выполнить если нажата кнопка отправки формы и форма верно заполнена.
Первый параметр который передаётся плагину - rules - правила валидации. Их приличное количество ниже будут детальнее приведены возможные правила. В примере же видим что fio,personalAccount,hvs1,gvs1,phone,agreement переданы с параметром required: true, что означает что эти поля обязательны для заполнения.
Следующий параметр - messages, в котором устанавливаются названия полей(в соответствии с названиями input а не id, как и для rules) сообщения для различных правил валидации. По умолчанию эти сообщения появляются сразу за input полем в теле label с классом error, при этом можно менять как тег в котором выводятся эти сообщения, так и класс, так и полностью отключить появление таких сообщений или же полностью поменять логику их отображения. В примере видно как полю fio задаются сообщения для ошибок при не заполнении поля(required), а так же при его некорректной длине(minlength). В примере из листинга выше установка сообщений о ошибках приведена лишь для информации, поскольку прочая логика скрипта реализована таким образом, чтобы поля с сообщениями о ошибках не появлялись вовсе.