Tenho uma pagina com vários <input>
e alguns deles são obrigatórios, esses <input>
não estão em uma tag <form>
, logo, creio que o required
não consegue trabalhar nessa situação. Tenho feito a verificação na mão mesmo:
if(codBarras == null || codBarras == '')
toastr.error('O Código de Barras é obrigatório!');
else if(dataVencimento == null || dataVencimento == '')
toastr.error('A Data de Vencimento é obrigatório!');
else
console.log('Faça algo!');
Porém, eu gostaria de saber se é possível criar uma espécie de atributo para eu colocar nos <input>
para fazer essa verificação, ficando da seguinte maneira:
Até o momento:
<input type="text" class="form-control" name="iptCodBarras">
Após a criação do atributo:
<input type="text" class="form-control" name="iptCodBarras" needed="true">
Minha intenção seria colocar o "atributo" needed="true"
nos <input>
que eu gostaria que fossem obrigatórios.
Resposta:
Segui a resposta do Marcel Felipe e consegui exatamente o que eu precisava, aproveitei o inicio each
que ele menciona na resposta e criei o seguinte bloco:
var emBranco = 0;
$("[needed=true]").each(function(){
if($(this).val() == '' || $(this).val() == null)
{
emBranco++;
toastr.error('Existem campos obrigatórios em branco!');
$(this).css({'border': '1px solid salmon'});
$(this).on('focus', function(){
$(this).removeAttr('style');
});
}
});
if(emBranco == 0)
console.log('Todos os campos obrigatorios estão preenchidos!');
O bloco anterior verifica todos os <inputs>
que estão com o atributo needed="true"
se estão preenchidos, caso algum não esteja, irá incrementar a variável emBranco
e mostrar o toastr
de erro, caso todos estão preenchidos, a variavel terá continuará com o valor 0 e executará a ação desejada. Os <inputs>
que estiverem em branco, irão ficar com a borda avermelhada (semelhante ao required
) e quando o usuário clicar nesses <inputs>
em branco, removerá a borda avermelhada.