Встраиваемая валидация с многочастной формой

Question

Это, вероятно, превратится в несколько вопросов, поскольку я прокладываю себе путь через него, но мне нужна серьезная помощь JQuery. Я создал форму с несколькими частями, основанную на примере, на bassistance.de. В этой демонстрации проверка довольно проста - назначение обязательных полей с классом, повторение и вытягивание сообщений об ошибках из названий элементов формы.

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

В идеале, я хотел бы быть в состоянии изменить метод проверки в демо-версии, а также и заменить один, что я больше знаком - как:

$("#theForm").validate({ 
    errorPlacement: function(error, element) { 
     if(element.attr("name") === "name") { 
      error.appendTo("#nameError"); 
     } 
    }, 
    groups: { 
     capacityGroup: "progMin progMax", 
    }, 
    rules: { 
     fName: "required", 
    }, 
    messages: { 
     fName: "*First Name is required", 
    } 
}); 

Итак, я, конечно, надеюсь, что кто-то может помогите с этим. Я загрузил несколько другую демоверсию в www.43rdworld.com/multitest.htm с добавленным div для сообщений об ошибках и таблицы стилей. Я бы очень хотел изменить способ проверки формы, чтобы он все еще проверялся со страницы на страницу перед отправкой, но позвольте мне указать необходимые поля, написать свои собственные правила и сообщения и указать, где будут отображаться эти сообщения.

Answer 1

Цитата OP:

«Это, вероятно, превратится в нескольких вопросов как я работаю мой путь через него, но я нуждается в некоторой серьезной помощи JQuery.»

Ваша публикация не соответствует формату StackOverflow, где ожидаются только сжатые и конкретные вопросы. Пожалуйста, см. the StackOverflow question checklist и sscce.org для получения дополнительной информации по проводке.

Однако, если вы хотите сделать многоэтапную форму с помощью jQuery Validate, существует несколько разных подходов; вот мой ...

---

При создании многоступенчатой ​​формы, я использую уникальный набор <form> тегов для каждого раздела. Затем я использую the .valid() method для проверки раздела перед переходом к следующему. (Не забудьте сначала инициализировать плагин, называют .validate(), на всех формах на DOM готовых.)

Затем на последнем разделе я использую .serialize() каждой формы и объединить их в строку запроса данных, чтобы быть Отправлено.

Что-то вроде этого ...

$(document).ready(function() { 

    $('#form1').validate({ // initialize form 1 
     // rules 
    }); 

    $('#gotoStep2').on('click', function() { // go to step 2 
     if ($('#form1').valid()) { 
      // code to reveal step 2 and hide step 1 
     } 
    }); 

    $('#form2').validate({ // initialize form 2 
     // rules 
    }); 

    $('#gotoStep3').on('click', function() { // go to step 3 
     if ($('#form2').valid()) { 
      // code to reveal step 3 and hide step 2 
     } 
    }); 

    $('#form3').validate({ initialize form 3 
     // rules, 
     submitHandler: function (form) { 
      // serialize and join data for all forms 
      var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize() 
      // ajax submit 
      return false; // block regular form submit action 
     } 
    }); 

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form. 

}); 

Важно помнить, что мои click обработчики выше не используются type="submit" кнопки. Это обычные кнопки, либо снаружи тегов form или type="button".

Только кнопка на последней форме является обычной кнопкой type="submit".Это потому, что я использую встроенную функцию плагина submitHandler только в самой последней форме.

"Доказательство концепции" DEMO: http://jsfiddle.net/dNPFX/

Также см для справки:

https://stackoverflow.com/a/19546698/594235

---

ЦЕНУ OP:

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

Опять же, это не очень специфично. вы говорите об использовании class установить правила или используя пользовательские class для обозначения ошибки? что вы пробовали? The jQuery Validate plugin will allow you specify rules in many different ways including by class.

Если вас refer to the documentation, вы можете видеть, что есть варианты, называемые validClass и errorClass, которые позволят вам укажите разные имена class, используемые для полей, если они действительны или нет.