Fuelux sihirbazı doğrulama girişi

Question

Fuelux sihirbazının içine yerleştirilmiş bir form hazırladım. Kişi bir sonraki düğmeye basarsa, kitap alanı zorunlu alanı gösterilmez. Gerekli alanlar girilinceye kadar kullanıcının ileriye tıklayarak ilerleyemeyeceği bir gereksinim haline getirebilecek herhangi bir yöntem var mı? İşte

Formu göndermeden doğrulamak isterseniz sonraki ve önceki düğmeleri

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

için kullanılan

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

komut dosyaları jquery.validate kullanabilirsiniz girdi örneğidir . $("#form_id").valid(); yöntemini kullanın, söz konusu girdilere "gerekli" biçim ekleme sınıfının durumuna bağlı olarak true veya false değerini döndürür.

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

Diğer bir seçenek, her bir formdaki bir formun sarılmasıdır ve daha sonra gönderilirken tarayıcı gerekli alanlar dolduruluncaya kadar devam etmeyecektir. Bu, HTML5 özelliklerinin bir parçası olarak formdaki "gerekli" özniteliği destekleyen tarayıcıya bağlıdır, ancak bunu kullanmanız mümkün olabilir. Bu cevap bozuk görünüyor bazı bağlantılar bulunmaktadır, ancak bazı başlangıç ​​bilgilerin yanı var: How to bind to the submit event when HTML5 validation is used?

Answer 3

ı yaptıklarından: Eğer her iki yönde hareket eden devre dışı bırakmak istiyorsanız

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

, o zaman sadece data.direction ==='next' bölümünü kaldırmak .