Ввод подтверждения мастера Fuelux

Question

Я сделал форму, вложенную внутри мастера Fuelux. Поле требуемой книги не будет отображаться, если пользователь нажимает следующую кнопку. Существуют ли какие-либо методы, которые могут потребовать, чтобы пользователь не мог проработать, нажав кнопку «Далее» до тех пор, пока не будут введены необходимые поля?

Вот пример ввода

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

Сценарии, используемые для следующей и предыдущей кнопки

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

Если вы хотите проверить без отправки формы, вы можете использовать jquery.validate , Используйте метод $("#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

Другой вариант заключается в упаковке каждого шага в форме, а затем при отправке браузер не будет действовать до тех пор, пока не будут заполнены необходимые поля. Это зависит от браузера, который поддерживает атрибут «required» в форме как часть спецификации 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' часть ,