JQuery HTML проверки Подчиненная форма

Question

У меня есть одна форма, которая содержит дополнительные формы суб (содержащиеся в дивы), например:

<form method="post" action="/process" id="form"> 
    <div id="initForm"> 
    <input type="text" name="name" placeholder="Please enter your name" /> 
    <input type="email" name="email" placeholder="Please enter your email" /> 
    <button class="next">Continue</button> 
    </div> 
    <div class="subForm"> 
    <input type="text" name="jobPosition" placeholder="Please enter your job position" /> 
    <input type="text" name="jobCompany" placeholder="Please enter your company" /> 
    <button class="next">Continue</button> 
    </div> 
    <input type="submit" name="submit" value="Send" /> 
</form> 

Я хочу использовать validate плагин для формы, так что всякий раз, когда кто-то нажимает на next I хочу проверить эту часть этой формы, которую она проверяет, прежде чем она позволит вам продолжить. Поэтому я задаюсь вопросом, возможно ли это сделать? Я использовал ниже, но это ничего не делает. Он не дает ошибок и не подтверждает форму. Может ли кто-нибудь сказать мне, где я ошибаюсь?

$("form#initForm").validate({ 
    rules: { 
    name: "required", 
    }, 
    messages: { 
    name: "Please enter a valid name" 
    } 
}); 

Answer 1

Ваш идентификатор form отличается от того, который вы используете в JQuery и $('form#form") должны быть $('form#form') или $("form#form").

видеть работу фрагмент кода ниже:

$(document).ready(function() { 
 
    $('#form').validate({ 
 
    rules: { 
 
     name: "required", 
 
     jobPosition: "required" 
 
    }, 
 
    messages: { 
 
     name: "Please enter a valid name", 
 
     jobPosition: "Please enter a valid job" 
 
    } 
 
    }); 
 
    $('.next').on('click', function(e){ 
 
    e.preventDefault(); 
 
    $(this).parent().find('input:first').valid(); 
 
    }); 
 
});

label.error{ 
 
    color: #F00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script> 
 
<form method="post" action="" id="form"> 
 

 
    <div id="initForm"> 
 
    <input type="text" name="name" placeholder="Please enter your name" /> 
 
    <input type="email" name="email" placeholder="Please enter your email" /> 
 
    <button class="next">Continue</button> 
 
    </div> 
 

 
    <div class="subForm"> 
 
    <input type="text" name="jobPosition" placeholder="Please enter your job position" /> 
 
    <input type="text" name="jobCompany" placeholder="Please enter your company" /> 
 
    <button class="next">Continue</button> 
 
    </div> 
 

 

 
    <input type="submit" name="submit" value="Send" /> 
 
</form>