I've problem whit my form, I have all field "required" but when i click on next on form, only the required on first line are taken, the form continues even if the other fields are not complete, i have try to change the position of , but when i change the position of all form crash or the position of all box and fields change. Sorry for my English
P.s.: the page 3 and 4 are ok... :/
/*jQuery.validator.setDefaults({
debug: false,
success: "valid"
});
$("#myform").validate({
rules: {
field: {
required: true,
}
}
});*/
$(document).ready(function() {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)');
}
});
allNextBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});<div class="container form"><div class="stepwizard"><div class="stepwizard-row setup-panel"><div class="stepwizard-step"><a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a><p>Locale</p></div><div class="stepwizard-step"><a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a><p>Indirizzo</p></div><div class="stepwizard-step"><a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a><p>titolare</p></div><div class="stepwizard-step"><a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled">4</a><p>Immagini</p></div></div></div><form role="form" method="post" id="myform" action="mailer.php" enctype="multipart/form-data"><div class="row setup-content" id="step-1"><div class="col-12"><div class="col-md-12"><h3> Inserisci il tuo locale</h3><div class="mb-3"><div class="form-group"><label class="control-label ">Nome del locale</label><input minlength="4" type="text" class="form-control" name="nome-locale" id="name" placeholder="nome del tuo locale" required ></div></div><div class="form-group "><label class="control-label">Email del tuo locale</label><input type="email" name="email" class="form-control" id="email" placehpercolder="tuoristorante@mail.com" required ></div><div class="form-group "><label class="control-label">Numero di telefono del locale</label><input type="number" class="form-control" name="telefono" placeholder="numero del tuo locale" required ></div><button class="btn btn-primary btn-block step-1 nextBtn" type="confirm">Avanti <i class="fa fa-angle-right"></i></button></div></div></div><div class="row setup-content" id="step-2"><div class="col-12"><div class="col-12"><h3> Indirizzo</h3><div class="row"><div class="form-group col-8"><label class="control-label ">Indirizzo</label><input type="text" class="form-control" name="indirizzo" placeholder="Indirizzo" required /></div><div class="form-group col-4"><label class="control-label ">N.</label><input type="text" class="form-control " name="civico" placeholder="numero" required /></div></div><div class="form-group "><label class="control-label">Città</label><input maxlength="200" type="City" class="form-control" name="citta" placeholder="Città" required /></div><div class="form-group "><label class="control-label">Provincia</label><select id="provincia" name="provincia" maxlength="200" type="text" class="form-control" placeholder="Provincia" required><option value="" selected="" extraval=""></option><option value="ag">Agrigento</option><option value="al">Alessandria</option><option value="an">Ancona</option><option value="ao">Aosta</option><option value="ar">Arezzo</option><option value="ap">Ascoli Piceno</option><option value="at">Asti</option><option value="av">Avellino</option><option value="ba">Bari</option><option value="bt">Barletta-Andria-Trani</option><option value="bl">Belluno</option><option value="bn">Benevento</option><option value="bg">Bergamo</option><option value="bi">Biella</option><option value="bo">Bologna</option><option value="bz">Bolzano</option><option value="bs">Brescia</option><option value="br">Brindisi</option><option value="ca">Cagliari</option><option value="cl">Caltanissetta</option><option value="cb">Campobasso</option><option value="ci">Carbonia-iglesias</option><option value="ce">Caserta</option><option value="ct">Catania</option><option value="cz">Catanzaro</option><option value="ch">Chieti</option><option value="co">Como</option><option value="cs">Cosenza</option><option value="cr">Cremona</option><option value="kr">Crotone</option><option value="cn">Cuneo</option><option value="en">Enna</option><option value="fm">Fermo</option><option value="fe">Ferrara</option><option value="fi">Firenze</option><option value="fg">Foggia</option><option value="fc">Forlì-Cesena</option><option value="fr">Frosinone</option><option value="ge">Genova</option><option value="go">Gorizia</option><option value="gr">Grosseto</option><option value="im">Imperia</option><option value="is">Isernia</option><option value="sp">La spezia</option><option value="aq">L'aquila</option><option value="lt">Latina</option><option value="le">Lecce</option><option value="lc">Lecco</option><option value="li">Livorno</option><option value="lo">Lodi</option><option value="lu">Lucca</option><option value="mc">Macerata</option><option value="mn">Mantova</option><option value="ms">Massa-Carrara</option><option value="mt">Matera</option><option value="vs">Medio Campidano</option><option value="me">Messina</option><option value="mi">Milano</option><option value="mo">Modena</option><option value="mb">Monza e della Brianza</option><option value="na">Napoli</option><option value="no">Novara</option><option value="nu">Nuoro</option><option value="og">Ogliastra</option><option value="ot">Olbia-Tempio</option><option value="or">Oristano</option><option value="pd">Padova</option><option value="pa">Palermo</option><option value="pr">Parma</option><option value="pv">Pavia</option><option value="pg">Perugia</option><option value="pu">Pesaro e Urbino</option><option value="pe">Pescara</option><option value="pc">Piacenza</option><option value="pi">Pisa</option><option value="pt">Pistoia</option><option value="pn">Pordenone</option><option value="pz">Potenza</option><option value="po">Prato</option><option value="rg">Ragusa</option><option value="ra">Ravenna</option><option value="rc">Reggio di Calabria</option><option value="re">Reggio nell'Emilia</option><option value="ri">Rieti</option><option value="rn">Rimini</option><option value="rm">Roma</option><option value="ro">Rovigo</option><option value="sa">Salerno</option><option value="ss">Sassari</option><option value="sv">Savona</option><option value="si">Siena</option><option value="sr">Siracusa</option><option value="so">Sondrio</option><option value="ta">Taranto</option><option value="te">Teramo</option><option value="tr">Terni</option><option value="to">Torino</option><option value="tp">Trapani</option><option value="tn">Trento</option><option value="tv">Treviso</option><option value="ts">Trieste</option><option value="ud">Udine</option><option value="va">Varese</option><option value="ve">Venezia</option><option value="vb">Verbano-Cusio-Ossola</option><option value="vc">Vercelli</option><option value="vr">Verona</option><option value="vv">Vibo valentia</option><option value="vi">Vicenza</option><option value="vt">Viterbo</option></select></div><div class="form-group "><label class="control-label">CAP</label><input maxlength="200" type="CAP" class="form-control" name="cap" placeholder="CAP" required /></div><button class="btn btn-warning nextBtn btn-lg fa-pull-right" type="confirm">Avanti <i class="fa fa-angle-right"></i></button></div></div></div><div class="row setup-content" id="step-3"><div class="col-12"><div class="col-md-12"><h3>I tuoi dati</h3><small style="color: red">*i tuoi dati serviranno solo per confermare la propietà del locale</small><div class="mb-3"><div class="form-group "><label class="control-label ">Nome del titolare</label><input minlength="3" type="text" class="form-control" name="titolare" id="titolare" placeholder="nome del titolare" required /><div class="valid-feedback">
Molto bene!</div></div></div><div class="form-group "><label class="control-label">Codice fiscale del titolare</label><input minlength="15" maxlength="16" type="text" class="form-control" name="codice_fiscale" placeholder="codice fiscale" required /><div class="valid-feedback">
Perfetto !</div></div><a class="js-scroll-trigger" href="#contact"><small>*Iscrizione all'abbonamento FREE senza NESSUNA commissione! Se vuoi saperne di più su tutti gli abbonamenti clicca qui.</small></a><button class="btn btn-primary btn-block step-1 nextBtn" type="confirm">Avanti <i class="fa fa-angle-right"></i></button></div></div></div><div class="row setup-content" id="step-4"><div class="col-12"><div class="col-md-12"><h3> Inviaci i tuoi menu! </h3><h6>Scatta una foto a 2 menu che proponi per gli eventi nel tuo locale, Ti creeremo un pannello di controllo personalizzato e Penseremo a tutto noi!</h6><hr><div class="form-group was-validated"><label class="control-label">Menu1</label><input type="file" name="menu1" accept=".jpg,.jpeg,.pdf,.png" required></div><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div></div><h3></h3><div class="form-group was-validated "><label class="control-label">Menu2</label><input type="file" name="menu2" accept=".jpg,.jpeg,.pdf,.png" required></div><div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div></div><hr><div class="form-group was-validated "><div class="custom-control custom-checkbox mb-3"><input type="checkbox" class="custom-control-input" value="Yes" name="declaration" id="customControlValidation1" required><label class="custom-control-label" for="customControlValidation1"><small>Dichiaro di aver letto, accettato e di concordare con le <a href="https://www.google.it/" target="_blank">Clausole Generali e l'Informativa sulla privacy.</a> Vaimenu.it permette ai locali e agli ospiti di comunicare tramite Vaimenu.it, che riceve ed elabora le comunicazioni in conformità con l'Informativa sulla privacy e le Clausole Generali di Vaimenu.it.</small></label></div><div class="form-group was-validated "><div class="custom-control custom-checkbox mb-3"><input type="checkbox" class="custom-control-input" value="Yes" name="newsletter" id="customControlValidation2" checked><label class="custom-control-label" for="customControlValidation2"><small>Voglio iscrivermi alla newsletter per ricevere promozioni ed altre comunicazione da parte di vaimenu.it</small></label></div><div class="g-recaptcha" data-sitekey="h"></div><br><button class="btn btn-primary btn-block" type="submit">Finito!</button></div></div></div></div></div></form></div>
