Skip to main content
adicionou 941 caracteres ao conteúdo
Fonte Link
D. Watson
  • 944
  • 2
  • 14
  • 38

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.

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.

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.

Fonte Link
D. Watson
  • 944
  • 2
  • 14
  • 38

Como criar um atributo para uma tag HTML? Algo semelhante ao já existente "required"

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.