Failure to validate fields

Asked

Viewed 389 times

1

I have a form that only enables the forward button, when the field is filled or selected.
The fields Cód. Subscriber, Subscriber Name and the Date of Installation are allowing to delete your content after filling.
The problem is that people are filling in to enable and then delete the contents of the field and the button does not disable.
This form, only displays one question at a time and each button, is buttom type and only at the end I give a Ubmit. That’s why I can’t use the required.
Follows the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
    <head>
     <meta charset="utf-8">
        <meta charset="ISO-8859-1">
        <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
        <meta name="description" content="">
        <meta name="author" content="Gigaline">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">
        <link rel="shortcut icon" href="favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <title></title>
    <!-- Bootstrap -->
            <link rel="stylesheet" href="../mpv/css/bootstrap.min.css" type="text/css">
            <link rel="stylesheet" href="../mpv/css/bootstrap-responsive.min.css" type="text/css">
    <link rel="stylesheet" href="../mpv/css/estilo.css" type="text/css">
            <link rel="stylesheet" href="../mpv/css/habilita.css" type="text/css">

<!-- JQuery -->
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

        <script>
            $(function() {

                $("#datepicker").datepicker({

                    numberOfMonths: 1,

                    maxDate: "0D",
                    dateFormat: "yy'/'mm'/'dd",

                    showAnim: "clip",
                    firstDay: 0,

                    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                    buttonImageOnly: true,
                    yearRange: '2000:2020',
                    monthNames: ["Janeiro", "Feveveiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
                    monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
                    dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
                    onSelect: function() { 

                        $(this).click();

                    }
                });
            });
        </script>
    </head>
    <body>
    <div class="container-fluid">
            <div class="row-fluid">
                <div class="well">
                     <h2 class="centraliza_texto">Preencha abaixo os campos:</h2>
    <form action="responde_questionario.php" id="myform" method="post">
                         <div id="myform"> 
                        <div class="centraliza">
                            <fieldset>Cód. Assinante:&nbsp;

                                <input type="text" name="cod_assinante" maxlength="7" class="input-mini" title="Favor inserir o Código do Cliente (Integrator)."  />
                                    &nbsp;&nbsp;Ou&nbsp;&nbsp;Assinante:
                                    <input type="text" name="assinante" title="Favor inserir o nome do cliente." />

                                <br />
                                <button type="button" disabled="true" class="avancar btn btn-primary pull-right">Avancar</button>
                            </fieldset>
                        </div>
                        <!-- Data Instalação -->
                        <div class="centraliza">
                            <fieldset>Data Instalação:&nbsp;
                                <input id="datepicker" type="text" name="data_instalacao" />
                                <br />
                                <br />
                                <button type="button" class="voltar btn btn-primary pull-left">Voltar</button>
                                <button type="button" disabled="true" class="avancar btn btn-primary pull-right">Avancar</button>
                            </fieldset>
                        </div>
           <div class="centraliza">
                            <fieldset>
                                <div class="centraliza_texto">
                                    <h4 class="text-info centraliza_texto">
                                        <?php
                                        $query = $con->query("SELECT informacao FROM pv_informacao where ativo = 1 and cod_informacao = 2");
                                        while($reg = $query->fetch_array()) 
                                             {
                                                echo $reg["informacao"];
                                             }
                                        ?>
                                    </h4>
                                    </div>  

                                    <ol style="margin-left: 15%; margin-right: 12%;">
                                        <b><li>Informar sobre alteração de senha na página da Gigaline;</li></b>
                                        <b><li>Informar da segunda via do boleto pela página da Gigaline;</li></b>
                                        <b><li>Informar telefone e Horários de atendimento do suporte e do escritório;<br />sobre alteração de senha na página da Gigaline;</li></b>
                                        <b><li>Informar sobre chuvas com descarga eletromagnéticas.</li></b>
                                    </ol>
                                   <br />

                                   <br />
                                <button type="button" class="voltar btn btn-primary pull-left">Voltar</button>
                                <button type="submit" class="avancar btn btn-primary pull-right">Avancar</button>
                            </fieldset>
                        </div>
</div>
                    </form>
</div>
</div>
</div>
   <script type="text/javascript">
            $('.centraliza:first').show();
            $('input, select').on('click', function() {
                var fieldset = $(this).closest('fieldset')
                var campos = fieldset.find('input, select');
                var button = fieldset.find('.avancar')[0];
                var preenchido = false;

                campos.each(function() {

                    if (this.value != '') preenchido = true;
                })
                button.disabled = !preenchido;

            });
            $('.avancar').on('click', function() {
                $(this).closest('.centraliza').slideUp().next().slideDown();
//               
            });

            $('.voltar').on('click', function() {
                $(this).closest('.centraliza').slideUp().prev().slideDown();

            });
        </script>
        <script>
            function formatarData(d){
    var data = d || new Date();
    var segundos = data.getSeconds();
    var minutos = data.getMinutes();
    var horas = data.getHours();
    return [horas, minutos, segundos].join(':');
}

var inicio = new Date();
var tempos = [formatarData(inicio)];
$('button.contador').click(function () {
    var agora = new Date();
    tempos.push(formatarData(agora));
});
$('#final').click(function () {
   alert(tempos.join('\n'));
});
        </script>
        <script src="../mpv/js/bootstrap.min.js"></script>
    </body>
    </html>
javascript jquery

2 answers

2


Make jQuery check the field even if the button is enabled and the field is empty. As soon as the person clicks on the next button, before any action to redirect it to the next page, do something like:

$("#botaoAvancar").on('click', function(){

var campo = $.trim($("#CampoVerificar").val());

if(campo == ''){

$(this).attr('disabled', 'disabled');
 return false;

      }
});

  • Cool. Should I put this code in the head? Sorry, but I’m starting with Jquery.

  • Put that code with yours. This code says: After clicking the next button (#toggle button) it will capture the value of the field that has to see if it has content (#toggle field). If empty, it will disable the button and return false, and continue on the same page

  • Right. More should I put inside a script tag? Is that I tried and it didn’t work. Lebrando I’m using buttom instead of '<a href="#" >botão</a>' Thank you.

  • Your code didn’t work. I put it inside the buttom, put it in the head or what? Help me, please.

  • @Jorge B. can help me?

  • . I have no way to use '#botaoavancar' because I’m using '<button>' and not '<a href>'

Show 1 more comment

1

Put @Alisson code inside tags <script></script> Or put inside your existing function, like this:

    $('.voltar').on('click', function() {
        $(this).closest('.centraliza').slideUp().prev().slideDown(); 
        var campo = $(this).closest(':text').val();
        if(campo == ''){
            $(this).attr('disabled', 'disabled');
            return false;
        }
    });

  • Thank you for the guidance. I will run the tests.

  • Good afternoon, gentlemen. I’m sorry, but I’m not getting it. The code goes into the <script></script> inside the head. has something else to do? Thank you.

  • I’m not getting through.

Browser other questions tagged javascript jquery

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