Jquery / Ajax / PHP field validation

0

I read a few questions here on the PT, but I did not find what I wanted. I made a basic validation with ajax and jquery that is working, but it has an unforeseen. There are two fields: email and time .

HTML

 <p><div class="input-group">
         <span class="inreg input-group-addon glyphicon glyphicon-envelope" aria-hidden="true" id="basic-addon1"></span>
         <input type="email" id="email" class="form-control cartolaInput2" placeholder="Email" name="email" required aria-describedby="basic-addon1">
       </div></p>
 <p> <div class="input-group">
        <span class="inreg input-group-addon glyphicon glyphicon-user" aria-hidden="true" id="basic-addon1"></span>
        <input type="text" id="time" class="form-control cartolaInput2" placeholder="Nome do seu Clube" maxlength="30" name="time" required aria-describedby="basic-addon1">
      </div><p style="font-family:cartolaiff-light;font-size: 12px;color: #666;width:80%"><i>*Este é o nome que ficará em exibição para os outros jogadores! Escolha qualquer nome, sem restrições, desde que não esteja em uso!</i></p></p>

     <div class="botoes" style="width: 100%;text-align:center;">
       <input type="submit" id="confirmar" value="Enviar!"  class="botao-confirmar"/>
     </div>

jQuery / ajax

  $(document).ready(function() {
      $("#email").on("keyup", function() {
          $.ajax({
              context: 'this',
              dataType: 'html',
              url: "./componentes/email.php",
              type: "post",
              data: ({
                  email: $("#email").val()
              }),
              success: function(respostae) {
                  if (respostae == "sim") {
                      $("#email").css('border-color', 'rgb(38, 202, 94)');
                      $("#email").parent().find('span').css('border-color', 'rgb(38, 202, 94)');
                      $("#email").parent().find('span').css('color', 'rgb(38, 202, 94)');
                      $("#confirmar").prop('disabled', false);
                      $("#confirmar").css('opacity', '1');
                  } else {
                      $("#email").css('border-color', 'red');
                      $("#email").parent().find('span').css('border-color', 'red');
                      $("#email").parent().find('span').css('color', 'red');
                      $("#confirmar").prop('disabled', true);
                      $("#confirmar").css('opacity', '0.5');
                  }
              }
          });
      });


      $("#time").on("keyup", function() {
          $.ajax({
              context: 'this',
              dataType: 'html',
              url: "./componentes/nomet.php",
              type: "post",
              data: ({
                  time: $("#time").val()
              }),
              success: function(respostat) {
                  if (respostat == "sim") {
                      $("#time").css('border-color', 'rgb(38, 202, 94)');
                      $("#time").parent().find('span').css('border-color', 'rgb(38, 202, 94)');
                      $("#time").parent().find('span').css('color', 'rgb(38, 202, 94)');
                      $("#confirmar").prop('disabled', false);
                      $("#confirmar").css('opacity', '1');
                  } else {
                      $("#time").css('border-color', 'red');
                      $("#time").parent().find('span').css('border-color', 'red');
                      $("#time").parent().find('span').css('color', 'red');
                      $("#confirmar").prop('disabled', true);
                      $("#confirmar").css('opacity', '0.5');
                  }
              }
          });
      });

  });

The php codes will not be important because they already work, so I did not put them.

What happens is that if the email inserted by the user already exists , the email red and the confirm button will be disabled (So long, alright) . However, if I put the time and the validation is ok (ie not having any team with the same name) the confirm button will be available strong> again

I could not think of something to solve. This is only a primary validation (I do the php validation too and it is 100%), but I wanted this validation as it gets easier for users.

    
asked by anonymous 05.10.2017 / 19:00

1 answer

0

You can make your function keyup validate both by calling both ajax and thus validating as you wish.

It would look something like this:

$(document).ready(function() {
    $("#email").on("keyup", function() {
        $.ajax({
            context: 'this',
            dataType: 'html',
            url: "./componentes/email.php",
            type: "post",
            data: ({
                email: $("#email").val()
            }),
            success: function(respostae) {
                if (respostae == "sim") {

                    $.ajax({
                        context: 'this',
                        dataType: 'html',
                        url: "./componentes/nomet.php",
                        type: "post",
                        data: ({
                            time: $("#time").val()
                        }),
                        success: function(respostat) {
                            if (respostat == "sim") {
                                $("#time").css('border-color', 'rgb(38, 202, 94)');
                                $("#time").parent().find('span').css('border-color', 'rgb(38, 202, 94)');
                                $("#time").parent().find('span').css('color', 'rgb(38, 202, 94)');

                                $("#email").css('border-color', 'rgb(38, 202, 94)');
                                $("#email").parent().find('span').css('border-color', 'rgb(38, 202, 94)');
                                $("#email").parent().find('span').css('color', 'rgb(38, 202, 94)');

                                $("#confirmar").prop('disabled', false);
                                $("#confirmar").css('opacity', '1');
                            } else {
                                $("#time").css('border-color', 'red');
                                $("#time").parent().find('span').css('border-color', 'red');
                                $("#time").parent().find('span').css('color', 'red');
                                $("#confirmar").prop('disabled', true);
                                $("#confirmar").css('opacity', '0.5');
                            }
                        }
                    });
                } else {
                    $("#email").css('border-color', 'red');
                    $("#email").parent().find('span').css('border-color', 'red');
                    $("#email").parent().find('span').css('color', 'red');
                    $("#confirmar").prop('disabled', true);
                    $("#confirmar").css('opacity', '0.5');
                }
            }
        });
    });
});

And then you would do that for both functions keyup

    
05.10.2017 / 19:12