The form has two steps, I was able to validate the first step using the onStepChanging . But in the second step where there are fields that need to be validated, the user action becomes the submit, which I report on onFinished . I then tried on onFinished to do the same validation I do on onStepChanging , but the variable is not populated using val (); was not sent. How can I validate fields?
$(function(){
$("#form-total").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "fade",
enableAllSteps: true,
autoFocus: true,
transitionEffectSpeed: 700,
titleTemplate : '<span class="title">#title#</span>',
labels: {
previous : 'Voltar',
next : 'Próximo',
finish : 'Enviar',
current : ''
},
onStepChanging: function (event, currentIndex, newIndex) {
var nota = $('#nota').val();
$('#nota-val').text('Sua no foi '+nota+'!');
//Valida se a nota foi preenchida
if(nota == null){
alert("Escolha uma nota!");
return false;
}
return true;
},
onFinished: function (event, currentIndex) {
$("#form").submit();
}
});
});<form id="form" class="form-register" action="envia.php?at=<?echo $atendimento;?>" method="post">
<div id="form-total">
<!-- SECTION 1 -->
<h2>1</h2>
<section>
<div class="inner">
<div class="form-row">
<div class="form-holder">
<select required class="form-control" name="nota" id="nota" required="">
<option value="" disabled selected>Escolha uma nota</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
</div>
</div>
</div>
</section>
<!-- SECTION 2 -->
<h2>2</h2>
<section>
<div class="inner">
<div class="form-row">
<div class="form-holder shadow-textarea">
<div id="nota-val"></div><br><div id="pergunta-val"></div><br>
<select name="classificacao[]" id="classificacao[]" class="mdb-select md-form" multiple>
<option value="" disabled selected>Escolha</option>
<? while (($exibe = oci_fetch_array($parsed_classif, OCI_ASSOC+OCI_RETURN_NULLS)) != false) {
$NR_SEQUENCIA = $exibe ['NR_SEQUENCIA'];
$DS_CLASSIFICACAO = $exibe ['DS_CLASSIFICACAO'];
?>
<option value="<?=$NR_SEQUENCIA?>"><?=$DS_CLASSIFICACAO?></option>
<? } ?>
</select>
<!--<br><br><textarea class="form-control z-depth-1" id="justificativa" placeholder="Justifique" style="width:300px;" ></textarea>-->
<br><br><input type="text" id="justificativa" name="justificativa" placeholder="Justifique" class="form-control">
</div>
</div>
</div>
</section>
</div>
</form>