I have the following code:
$(document).ready(function(){
$('div[data-step]').hide();
$('div[data-step=1]').show();
$('.icon-cracha').hide();
$('#cadastre-se , #next , #btn-aluno , #btn-familiar').on('click',function(){
var idx = $('#wizardSignin[active]').attr('data-step');
$('#wizardSignin[active]').removeAttr('active').hide();
if(idx<4){
idx++;
}else{
idx=1;
}
$('#wizardSignin[data-step="'+idx+'"]').attr('active','');
$('#wizardSignin[data-step="'+idx+'"]').effect("slide", { direction: "right" },"1000","easeOutExpo");
});It makes the user go to the next step of the registration in an animated way!
But a question, how do I validate this form avoiding going to the next step if you have not filled the field as defined?
I'm using jquery.validate but it's not working.
The first step of the registration is a% check of% form code is this:
<form id="myForm">
<div class="form-group">
<input id="qrcode" name="qrCode" type="text" placeholder="Insira o QR Code" class="form-control input-md" required="true" maxlength="9">
<span>QR Code inválido!</span>
</div>
</form>
<div>
<button id="next" form="myForm" type='submit' class="btn btn-primary" value="next">Próximo</button>
</div>It was not clear, but anything is edited and I can arrange the question!
Thank you.