Mandatory field message with jQuery

Asked

Viewed 1,483 times

0

People I made a validation that when the user does not fill the input my button gets disabled more wanted to display a message to inform the user that the field must be filled is possible to do this if yes 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);
        }
    });
javascript jquery html input
  • 1

    Add required="true" to the input (standard HTML message), if you want in javascript ai worth responding

  • @Felipeduarte if possible I would like it to be in js to take advantage of the code I’ve already made ^^

  • @Felipeduarte because the way it is the button is disabled but does not show any message to the user there is difficult to identify knows how is user neh hahahaha

  • 1

    You can do it by accessing the DOM and creating it at runtime (which I find a little expensive),or you can create hidden boxes and if the inputs are not filled in, you display them.

  • @Márciocristian and how would these Abels appear when the field is left unfilled and somen when fill

2 answers

2

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

KEYUP

in input, I also added disable if input is not filled in.

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>
<input type="text" id="usuario" placeholder="Usuário">
<input type="button" value="Enviar" id="btEnviar" disabled="true">

  • Maybe it would be interesting to show the message from the beginning, for the guy to set his eye and see that it is necessary to fill.

  • I will modify the code, well observed @Márciocristian

  • 1

    @Márciocristian ready, message added.

2

I don’t have a lot of time but use that 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 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>
<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>

Browser other questions tagged javascript jquery html input

You are not signed in. Login or sign up in order to post.