Fuelux-Wizard-Validierungseingabe

Question

Ich habe ein Formular verschachtelt in den fuelux-Assistenten eingefügt. Das Buchstrap-Pflichtfeld wird nicht angezeigt, wenn die Person auf die nächste Schaltfläche klickt. Gibt es irgendwelche Methoden, die es erforderlich machen, dass der Benutzer nicht fortfahren kann, indem er auf "Weiter" klickt, bis die erforderlichen Felder eingegeben wurden? Hier

ist ein Beispiel für die Eingabe

<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> 

Die Skripte für die nächsten und vorherigen Tasten

$(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

Wenn Sie ohne Absenden des Formulars überprüfen möchten, können Sie jquery.validate verwenden können . Verwenden Sie die Methode $("#form_id").valid();, sie gibt wahr oder falsch zurück, abhängig vom Status des Formulars. Fügen Sie den betreffenden Eingaben die Klasse "required" hinzu.

$('#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

Eine weitere Option ist das Umschließen jedes Schritts in einem Formular. Nach der Übergabe wird der Browser nicht fortgesetzt, bis die erforderlichen Felder ausgefüllt sind. Dies hängt davon ab, ob der Browser das Attribut 'required' im Formular als Teil der HTML5-Spezifikation unterstützt, Sie können dies jedoch möglicherweise verwenden. Es gibt einige Links, die in dieser Antwort gebrochen erscheinen, aber es gibt einige Start-Informationen auch: How to bind to the submit event when HTML5 validation is used?

Answer 3

, was ich tat:

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

Wenn Sie beide Möglichkeiten deaktivieren möchten bewegt, dann entfernen Sie einfach das data.direction ==='next' Teil .