0

Gente eu fiz uma validação de que quando o usuário não preencher o input meu botão fique desabilitado mais queria exibir uma mensagem para informar para o usuário que o campo deve ser preenchido é possível fazer isso se sim poderiam me ajudar segue meu código

HTML:

<form id="form-morte">
                                <div class="form-group row">
                                    <div class="col-sm-6 col-xs-6">
                                        <input type="number" name="idade" class="form-control" id="idade"
                                               min="1" max="10" step="2"
                                               placeholder="Idade"/>
                                    </div>

                                    <div class="col-sm-6 col-xs-6">
                                        <div class="input-group">
                                            <span class="input-group-addon">R$</span>
                                            <input type="phone" name="salario" class="form-control money-mask" id="salario"
                                                   placeholder="Salário atual"/>
                                        </div>
                                    </div>
                                </div>
                                <ul class="list-inline list-unstyled">
                                    {{--<li><input type="submit" class="btn-back-morte" value="Voltar"></li>--}}
                                    <li><a class="btn-back-morte">voltar</a></li>
                                    <li><input type="submit" class="btn-next-morte" id="btn-next-morte" value="Próximo"></li>
                                    {{--<li><a class="btn-back-morte">voltar</a></li>
                                    <li><a class="btn-next-morte next-morte" disabled="disable" tabindex="-1">Próximo</a></li>--}}
                                </ul>
                            </form>

JS:

$('.btn-next-morte').attr('disabled',true);
    $('input').keyup(function(){
        if ($('#idade').val().length > 0 && $('#salario').val().length > 0){
            $('.btn-next-morte').attr('disabled', false);
        }
        /*if($(this).val().length !=0){
            $('.btn-next-morte').attr('disabled', false);
        }*/
        else
        {
            $('.btn-next-morte').attr('disabled', true);
        }
    });
5
  • 1
    Adicione required="true" no input (mensagem padrão do HTML), se quiser em javascript ai vale a pena responder 8/08/2017 às 12:56
  • @FelipeDuarte se possível gostaria que fosse em js para aproveitar o código que já fiz ^^ 8/08/2017 às 12:58
  • @FelipeDuarte porque do jeito que tá o botão fica desabilitado mais não mostra nenhuma mensagem para o usuário ai fica dificil de identificar sabe como é usuário neh hahahaha 8/08/2017 às 12:59
  • 1
    Você pode fazer acessando o DOM e criando em tempo de execução (que eu acho meio custoso),ou você pode criar labels escondidas e caso os inputs não estejam preenchidos, você exibe elas. 8/08/2017 às 13:07
  • @MárcioCristian e como ficaria essas labels que aparecem quando o campo fica sem preencher e somen quando preenchem 8/08/2017 às 13:37

2 Respostas 2

2

Não estou com muito tempo mas use essa lógica

Método insertAfter, vai exibir a mensagem ao lado do input vazio, a mensagem é personalizável, basta adicionar mais uma class ou id a ela e manipular no css. repare que criei um span ao lado, pois inputs não permitem o comando ::after do css

$('.btn-next-morte').attr('disabled',true);
    $('input').keyup(function(){
        if ($('#idade').val().length > 0 || $('#salario').val().length > 0){	
            $( "."+$(this).attr('id')+'after'+"" ).remove();
            $('.btn-next-morte').attr('disabled', false);
        }
        /*if($(this).val().length !=0){
            $('.btn-next-morte').attr('disabled', false);
        }*/
        else
        {
        		$( "."+$(this).attr('id')+'after'+"" ).remove();
        		$( "<span class="+$(this).attr('id')+'after'+">Preencha esse campo corretamente!</span>" ).insertAfter( $('#' + $(this).attr('id')) );
            $('.btn-next-morte').attr('disabled', true);
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-morte">
                                <div class="form-group row">
                                    <div class="col-sm-6 col-xs-6">
                                        <input type="number" name="idade" class="form-control" id="idade"
                                               min="1" max="10" step="2"
                                               placeholder="Idade"/>
                                    </div>

                                    <div class="col-sm-6 col-xs-6">
                                        <div class="input-group">
                                            <span class="input-group-addon">R$</span>
                                            <input type="phone" name="salario" class="form-control money-mask" id="salario"
                                                   placeholder="Salário atual"/>
                                        </div>
                                    </div>
                                </div>
                                <ul class="list-inline list-unstyled">
                                    {{--<li><input type="submit" class="btn-back-morte" value="Voltar"></li>--}}
                                    <li><a class="btn-back-morte">voltar</a></li>
                                    <li><input type="submit" class="btn-next-morte" id="btn-next-morte" value="Próximo"></li>
                                    {{--<li><a class="btn-back-morte">voltar</a></li>
                                    <li><a class="btn-next-morte next-morte" disabled="disable" tabindex="-1">Próximo</a></li>--}}
                                </ul>
                            </form>

2

Utilizei jQuery para criar uma div com uma mensagem, a questão de layout da mesma pode ser modificada a vontade, essa div é adicionada ou retirada de acordo com o

KEYUP

no input, também adicionei o disable caso o input não seja preenchido.

Outros links uteis e utilizados aqui:

PARENT

APPEND

$(function(){
  var div = $('<div class="msg">').text('Campo Obrigatório');
  $('#usuario').parent().append(div);
  $('#usuario').on('keyup',function(){
    if(this.value.trim() != ''){
      $('#btEnviar').removeAttr('disabled');
      $(div).remove();
    }else{
      $('#btEnviar').attr('disabled','true');
      $('#usuario').parent().append(div)
    }
  });
});
.msg{
  width: 130px;
  background: #ededed;
  color: #666;
  border-radius: 7px;
  text-align: center;
  margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="usuario" placeholder="Usuário">
<input type="button" value="Enviar" id="btEnviar" disabled="true">

3
  • Talvez fosse interessante mostrar a mensagem desde o início, pro cara botar o olho e ver que é necessário preencher. 8/08/2017 às 13:51
  • Irei modificar o código, bem observado @MárcioCristian 8/08/2017 às 13:52
  • 1
    @MárcioCristian pronto, mensagem adicionada. 8/08/2017 às 14:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .