Вот так выводятся сообщения об ошибках после нажатия Отправить:

Это не очень удобно - лучше бы, если сообщение об ошибке появлялось сразу, по мере ввода, а кнопка Отправить была бы недоступна, пока не введены все данные правильно:

Для сниппета eForm Предводителев Сергей разработал  сниппет nikoFeedBack. Им мы и воспользуемся. Фактически этот сниппт является оболочкой для штатного сниппета eForm - в nikoFeedBack определены функции проверки, загружается библиотека Validate.js и вызывается на выполнение основной сниппет eForm с набором параметров. В результате форма отправки имеет большую функциональность, но достигается это путём более сложных настроек - требуется редактировать  Validate.js. Нас это не пугает - нам нужна одна форма с постоянным набором правил.

Текст сниппета  nikoFeedBack с нашей корректировкой:

function fbValidateName($value) { return strlen($value)>=5; }

function fbValidateText($value) { return strlen($value)>=15;}

$modx->regClientStartupScript($modx->config['site_url'].'assets/snippets/nikoFeedBack/validate.js');
$outForm = $modx->runSnippet("eForm",
array("formid" => "FeedBackForm",
     "to" => "cad@kurganobl.ru",
     "tpl" => "eFBForm",
     "report" => "eFBReport",
     "thankyou" => "eFBThanks",
     "from" => "from_site@kurganobl.ru",
     "fromname" => "С официального сайта",
     "subject" => "",
     "requiredClass" => "required",
     "invalidClass" => "invalid",
     "cssStyle" => "assets/templates/yaml/mail.css",
     "vericode" => "0")
);
echo $outForm;

Мы видим, что параметры для eForm формируются непосредственно в коде сниппета nikoFeedBack. Здесь их и нужно редактировать. А функции проверки и вывода сообщений спрятаны в Validate.js.Это большой файл, мы его приводить полностью не будем. Просто покажем, как в нем сделать дополнительную обработку полей.

Например, мы ввели в шаблон формы дополнительное поле fbAddress.  Такого поля не было в  Validate.js. Пришлось нам его вписать в некоторые места:

В функцию fbValidateField 

а) в объявление переменных

    var fbTextError = document.getElementById("fbTextError");
    var fbAddressError = document.getElementById("fbAddressError");

б)в тело функции:

    if (txtField.name == "fbAddress") {
        if (txtField.value.length < 10) {
            if (fbNowShowError) {
                fbAddressError.style.display = "block";
                fbAddressError.innerHTML = "Адрес должен содержать не менее 10 символов";
            }
            txtField.valid = false;
        } else {
            if (fbNowShowError) {
                fbAddressError.style.display = "none";
            }
            txtField.valid = true;
        }
    }

 В метод window.onload :

var fbAddress = document.getElementById("fbAddress");
fbAddress.valid = false;
fbAddress.onchange = fbValidateFieldOnChange;   
fbAddress.onkeyup = fbValidateFieldOnKeyUp;
if (fbAddress.value != '') fbValidateField(fbAddress);

Примерно так же можно добавлять и другие поля. А вот для поля fbEmail мы изменили условие проверки. В наших условиях это поле может быть пустым, но, если оно заполнено, то должна быть выполнена проверка правильности адреса (разумеется, только написания, а не существования):

if (txtField.name == "fbEMail") {
        var re = /^[\.\-_A-Za-z0-9]+?@[\.\-A-Za-z0-9]+?\.[A-Za-z0-9]{2,6}$/;
        if ((txtField.value.length > 0) && (!re.test(txtField.value)) ){
            if (fbNowShowError) {
                fbEMailError.style.display = "block";
                fbEMailError.innerHTML = "Некорректный адрес электронной почты";
            }
            txtField.valid = false;
        } else {
            if (fbNowShowError) {
                fbEMailError.style.display = "none";
            }
            txtField.valid = true;
        }        
    }

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

Разумеется, в таблице стилей должны быть и соответстующие определения. Мы могли бы включить в свою основную таблицу стилей дополнительный файл mail.css, но тогда этот файл грузился бы с каждой страницей. Мы предусмотрели загрузку этого файла стилей только при загрузке сниппета eForm, добавив в его вызов параметр  "cssStyle" => "assets/templates/yaml/mail.css".

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