Eu sei que esta pergunta já foi respondida e a mais sugerida é usar readonly
atributos.
Eu só quero compartilhar meu cenário e responder.
Depois de adicionar o readonly
atributo ao meu elemento HTML , enfrentei o problema de não conseguir criar esse atributo tão required
dinamicamente.
Mesmo tentei definir como ambos readonly
erequired
no momento da criação do HTML.
Então, vou sugerir não usar readonly
se você quiser configurá-lo como required
também.
Em vez disso, use
$("#my_txtbox").datepicker({
// options
});
$("#my_txtbox").keypress(function(event) {
return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
Isso permite pressionar tab
apenas a tecla.
Você pode adicionar mais códigos de chave que deseja ignorar.
Eu abaixo do código desde que adicionei os dois readonly
e required
ele ainda envia o formulário.
Depois de removê- readonly
lo, funciona corretamente.
https://jsfiddle.net/shantaram/hd9o7eor/
$(function() {
$('#id-checkbox').change( function(){
$('#id-input3').prop('required', $(this).is(':checked'));
});
$('#id-input3').datepicker();
$("#id-input3").keypress(function(event) {
return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>
<form action='https://jsfiddle.net/'>
Name: <input type="text" name='xyz' id='id-input3' readonly='true' required='true'>
<input type='checkbox' id='id-checkbox'> Required <br>
<br>
<input type='submit' value='Submit'>
</form>