0

pessoal precisava inserir os campos do meu formulário como obrigatórios fiz isso via jQuery porem não obtive exito a ideia e que fique uma borda vermelha nos campos que não foram preenchidos meu código não funciona seque parte do meu código do form:

HTML:

<form class="form" id="form">
                                    <div class="form-group row">
                                        <div class="col-md-12">
                                            <input type="text" name="name" class="form-control" id="name"
                                                   placeholder="NOME COMPLETO" required/>
                                        </div>
                                    </div>
                                    <div class="form-group row -inputs">
                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="birthday" class="form-control" id="data-mask"
                                                   placeholder="DATA DE NASCIMENTO" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="rg" class="form-control" id="rg-mask"
                                                   placeholder="RG" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="cpf" class="form-control" id="cpf-mask"
                                                   placeholder="CPF" required/>
                                        </div>
                                    </div>

                                    <div class="form-group row -inputs">
                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="email" class="form-control" id="mail"
                                                   placeholder="E-MAIL" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="phone" class="form-control" id="phone-mask"
                                                   placeholder="TELEFONE" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="cellphone" class="form-control" id="cel-mask"
                                                   placeholder="CELULAR" required/>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <div class="col-sm-12">
                                            <input type="text" name="address" class="form-control" id="address"
                                                   placeholder="ENDEREÇO COMPLETO" required/>
                                        </div>
                                    </div>

                                    <div class="form-group row -inputs">
                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="city" class="form-control" id="city"
                                                   placeholder="CIDADE" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="state" class="form-control" id="state"
                                                   placeholder="ESTADO" required/>
                                        </div>

                                        <div class="col-sm-4 col-xs-12">
                                            <input type="text" name="cep" class="form-control" id="cep-mask"
                                                   placeholder="CEP" required/>
                                        </div>
                                    </div>
                                </form>

<div class="border-warranty">
                        <p id="monthly-value"></p>
                        <a href="#" class="btn-warranty btn-indenizometro" id="submit-btn">
                            <img src="{{URL::asset('/img/loading.gif')}}" class="loaderImage" width="25" style="display: none;">
                            Solicitar <br><span><b>meu seguro</b></span><br>
                        </a>
                    </div>

JS:

<script>
        $(document).ready(function(){
            $("input").blur(function(){
                if($(this).val() == "")
                {
                    $(this).css({"border" : "1px solid #F00", "padding": "2px"});
                }
            });
            $("#submit-btn").click(function(){
                var cont = 0;
                $("#form input").each(function(){
                    if($(this).val() == "")
                    {
                        $(this).css({"border" : "1px solid #F00", "padding": "2px"});
                        cont++;
                    }
                });
                if(cont == 0)
                {
                    $("#form").submit();
                }
            });
        });
    </script>

OBS: Lembrando que meu botão de enviar não está dentro do <form> Dentro do meu botão de enviar tem um arquivo js que faz uma requisição via ajax acredito que isso não ira dar problema mais estou colocando o código mesmo assim para vocês verem o que esse botão faz;

JS do botão enviar:

$("#submit-btn").click(function (e) {
    e.preventDefault();

    var data = $('form').serializeArray();

    if($(this).hasClass('btn-warranty')) {
        var inputRangeValue = $('.final-value').first().text();
        var specialty_id = {name: 'specialty_id', value: $('#specialty_id').val()};
        var value = {name: 'value', value: inputRangeValue + '000'};
        data.push(specialty_id);
        data.push(value);
    }

    if($(this).hasClass('btn-indenizometro')) {
        var question_1 = $('input[name=question_1]:checked').val();
        var question_2 = $('input[name=question_2]:checked').val();
        var question_3 = $('input[name=question_3]:checked').val();
        //var reason =  {name: 'reason', value: sessionStorage.tipo };
        var monthly = {name: 'monthly', value: $('#monthly-value').text() };

        data.push(question_1);
        data.push(question_2);
        data.push(question_3);
        data.push(monthly);
        //data.push(reason);
    }

    var category = {name: 'category', value: window.location.pathname};
    data.push(category);

    //Ajax post data to server
    $.ajax({
        type: 'POST',
        url: '/request',
        data: data,
        dataType: 'json',
        success: function (data) {
            $('#modal-success').modal('show');
            $('form')[0].reset();
        },
        error: function (data) {
            //console.log(data);
        }
    });
});
0

1 Resposta 1

1

ForEach em cada input do form e verificar se eles são required

$('#form').find('input').each(function(){
   if(!$(this).prop('required')){
     // É required
   } else {
     // Não é required
   }
});

Para que com o input fica com borda vermelha, você pode utilizar jQuery para alterar o css do input, e mude o outline para cor vermelha.

3
  • no caso dentro do if eu chamaria todos os inputs que eu quero como requerid ,mais eu acho eles pelo name ou id ? Commented 1/09/2017 às 21:24
  • nao, apenas use $(this) e manipule com isso, e isso fará loop com o resto Commented 1/09/2017 às 21:27
  • mas se voce quiser manipular só alguns, você tem que verificar se eles são o que queres Commented 1/09/2017 às 21:28

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 .