Ingresso di convalida della procedura guidata Fuelable

Question

Ho creato un modulo annidato all'interno della procedura guidata. Il campo obbligatorio di bookstrap non verrà visualizzato se la persona fa clic sul pulsante successivo. Esistono metodi che possono rendere necessario che l'utente non possa avanzare facendo clic su Avanti fino a quando non sono stati immessi i campi richiesti?

Ecco un esempio dell'ingresso

<tr> 
    <td>3</td> 
    <td><label class="control-label" for="inputCompanyCountry">Country <span style="color:red">*</span></label></td> 
    <td><div class="controls controls-extra"><input type="text" id="inputCompanyCountry" name="inputCompanyCountry" value=""required></div></td> 
    <td><div class="help-inline">Country of residence</div></td> 
    </tr> 

Gli script utilizzati per i prossimi e precedenti pulsanti

$(function() { 
$('#MyWizard').on('change', function(e, data) { 
    console.log('change'); 
    if(data.step===3 && data.direction==='next') { 
     // return e.preventDefault(); 
    } 
}); 

$('#MyWizard').on('changed', function(e, data) { 
    console.log('changed'); 
}); 
/*$('#MyWizard').on('finished', function(e, data) { 
    console.log('finished'); 
});*/ 
$('#btnWizardPrev').on('click', function() { 
    $('#MyWizard').wizard('previous'); 
}); 
$('#btnWizardNext').on('click', function() { 
    $('#MyWizard').wizard('next','foo'); 
}); 


$('#btnWizardStep').on('click', function() { 
    var item = $('#MyWizard').wizard('selectedItem'); 
    console.log(item.step); 
}); 
}); 

Answer 1

Se si desidera convalidare, senza l'invio del modulo, è possibile utilizzare jquery.validate . Utilizzare il metodo $("#form_id").valid();, restituisce true o false a seconda dello stato del modulo aggiungere la classe "required" agli input in questione.

$('#MyWizard').on('change', function(e, data) { 
    console.log('change'); 
    if(data.step===3 && data.direction==='next') { 
     if($("#form_id").valid()){ 
      // allow change 
     }else{ 
      // cancel change 
     } 
    } 
}); 

Answer 2

Un'altra opzione è avvolgente ogni passo in una forma, e poi sul conferimento il browser non procedere fino a quando i campi richiesti sono stati compilati. Questo dipende dal browser che supporta l'attributo 'required' nel modulo come parte delle specifiche HTML5, ma potresti essere in grado di farne uso. Ci sono alcuni link che sembrano rotti in questa risposta, ma c'è qualche informazione a partire così: How to bind to the submit event when HTML5 validation is used?

Answer 3

quello che ho fatto:

$('#MyWizard').on('change', function(e, data) { 
    var isValid = $('#stepId [required]').valid(); 
    if (data.direction === 'next' && !isValid) { 
     e.preventDefault(); 
    } 
}); 

Se si desidera disattivare muoversi in entrambe le direzioni, poi basta rimuovere la parte data.direction ==='next' .