Использование jQuery Validate для проверки разделов формы одновременно

Question

Я пытаюсь понять, как включить jquery validate в мою анкету.Сама форма разбита на разделы (div), которые скрыты и перемещаются вверх и вниз с помощью jquery.Таким образом, по разным причинам я могу вставить большую форму в одну страницу и при этом сохранить ее в чистоте.Проблема в том, что я не могу понять, как включить jquery в форму таким образом, чтобы проверять только разделы или определенные поля за раз, прежде чем перейти к следующему разделу.

Вот некоторый очень простой кодиллюстрируя форму

<script>
$(document).ready(function(){
    $(".go_section2").click(function(){
        // need to validate section 1 fields here or stop section jump
        $("#section2").slideDown("slow");
    });
    $(".go_section3").click(function(){
        // need to validate section 3 fields here or stop section jump
        $("#section3").slideDown("slow");
    });
    // etc...
});
</script>
<form name="theForm" id="theForm" class="theForm" method="POST" action="">
    <!-- Section 1 -->
    <div class="questionnaireHeader">Section 1 Header</div>
    <div id="section1" class="questionnaireSection">
        <label for="FirstName">First Name</label>
        <input id="FirstName" name="FirstName"/><br />
        <label for="LastName">Last Name</label>
        <input id="LastName" name="LastName"/><br />
        [form fields for section 1]<br />
        <span class="go_section2">next</span>
    </div>
    <!-- Section 2 -->
    <div class="questionnaireHeader">Section 2 Header</div>
    <div id="section2" class="questionnaireSection" style="display:none;">
        [form fields for section 2]
    </div>
    <!-- Section 3 thru x -->
</form>

Итак, что должно произойти, когда пользователь нажимает «следующий» в разделе 1, он проверит, что и имя, и фамилия имеют значения .. (сами правила, которые я должен установить), а затем выполните переключение.Если какие-либо поля недействительны, я хотел бы, чтобы ввод / был заполнен красным или какой-то такой эффект.Если все проверяется, то оно продолжается и отображает следующий раздел, который сам будет проверять только свой собственный раздел и т. Д. И т. Д.

Я ценю любую помощь, которая может быть предоставлена, я пролистывал примеры ипока не смог заставить что-либо работать.

Answer 1

Закончилось тем, что я нашел на форумах jQuery

$("#buttonNext").click(function(){
  //apply/remove ignore rules here
   if $("form").valid()
     //hide current step and display next step
   return false; // do not submit
  });

//On your submit button
$("#submitButton").click(function(){
    // remove all ignore if required
   $("form").submit();
});

Answer 2

используйте это:

      $(".go_section2").click(function(){
        if($(this).find('input:text').val()!==""&&$(this).find('input:text').val()!==null){
        $("#section2").slideDown("slow");
}
else{
$(this).find('input:text').css('border','1px solid red');
}
    });

и убедитесь, что вы добавили type="text" к своим текстовым вводам