Required field message with jQuery

Navigation
0

People I did a validation that when the user does not fill the input my button is disabled more wanted to display a message to inform the user that the field should be filled it is possible to do this if yes they could help me follow my code

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);
        }
    });
    
asked by anonymous 08.08.2017 / 14:52

2 answers

2

I'm not in a lot of time but use this logic

Method insertAfter , will display the message next to the empty input, the message is customizable, just add another class or id to it and manipulate in css . Notice that I created a span on the side, because inputs do not allow the command ::after of 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><formid="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>
    
08.08.2017 / 15:46
2

I used jQuery to create a div with a message, the layout question of it can be modified at will, that div is added or removed according to the

KEYUP

In the input, I also added the disable if the input is not filled.

Other useful links used here:

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><inputtype="text" id="usuario" placeholder="Usuário">
<input type="button" value="Enviar" id="btEnviar" disabled="true">
    
08.08.2017 / 15:43
How to make a query using SQL correctly SUM Send blank field to the database