Fueluxウィザード検証入力

Question

私はfueluxウィザード内に入れ子になったフォームを作成しました。人が次のボタンをクリックした場合、ブックストラップ必須フィールドは表示されません。必要なフィールドが入力されるまで、次へをクリックしてユーザーが進行できないようにする方法がありますか？ここで

では、フォームを送信せずに検証したい場合は、jquery.validateを使用することができ、入力の例次と前のボタン

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

に使用

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

スクリプトです。メソッド$("#form_id").valid();を使用すると、フォームの追加クラス「必須」のステータスに応じて、該当する入力にtrueまたはfalseが返されます。

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

また、各ステップをフォームにラッピングしてから、送信時に必須フィールドが入力されるまでブラウザは処理を続行しません。これはHTML5仕様の一部としてフォーム内の '必須'属性をサポートするブラウザに依存しますが、これを利用できる可能性があります。この回答に壊れて表示されるいくつかのリンクがありますが、いくつかの起動情報もあります：How to bind to the submit event when HTML5 validation is used?私がやった

Answer 3

：

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

あなたは両方の方法を動かし無効にしたい場合は、単にdata.direction ==='next'一部を除去します。