Question posted in
You can find the official documentation here.

In Ajax how to show validation of the input that the user interacts with? – Jquery ajax

In Ajax I just want to show the validation of the input that the user interacts with. Not the show all validations. In my script if you write anything to any input you will get all inputs validations in the same time. Its show all validations.

I mean if you write 3 in fullname input then validations says: "Fullname must be alphanumerical" but in the same time also show username, email and password validations too. It shows all the validations. I try to prevent this thing but can’t catch the logical vision. How can I achieve this?

<script type="text/javascript">
    $(document).ready(function() {

        $("#register-form").keyup(function(event) {

            event.preventDefault();

            var fullname = $("#fullname").val();
            var username = $("#username").val();
            var email = $("#email").val();
            var password = $("#password").val();
            
            $.ajax({
                type: "POST",
                url: "registercontrol.php",
                data: {
                    fullname: fullname,
                    username: username,
                    email: email,
                    password: password
                },
                dataType: "json",
                success: function(result) {
                    
                    $('.hidden').show();
                    $('#result').html(result);

                    $("#vfullname").html("");
                    $("#fullname").removeClass();
                    $("#fullname").addClass("form-control form-control-user border-success");

                    $("#vusername").html("");
                    $("#username").removeClass();
                    $("#username").addClass("form-control form-control-user border-success");

                    $("#vemail").html("");
                    $("#email").removeClass();
                    $("#email").addClass("form-control form-control-user border-success");

                    $("#vpassword").html("");
                    $("#password").removeClass();
                    $("#password").addClass("form-control form-control-user border-success");

                    if (result.fni) {
                        $("#vfullname").html(result['fni']);
                        $("#vfullname").removeClass();
                        $("#vfullname").addClass("text-info");
                        $("#fullname").removeClass();
                        $("#fullname").addClass("form-control form-control-user border-info");
                    }
                    if (result.fnw) {
                        $("#vfullname").html(result['fnw']);
                        $("#vfullname").removeClass();
                        $("#vfullname").addClass("text-warning");
                        $("#fullname").removeClass();
                        $("#fullname").addClass("form-control form-control-user border-warning");
                    }
                    
                    if (result.uni) {
                        $("#vusername").html(result['uni']);
                        $("#vusername").removeClass();                      
                        $("#vusername").addClass("text-info");
                        $("#username").removeClass();
                        $("#username").addClass("form-control form-control-user border-info");
                    }
                    if (result.unw) {
                        $("#vusername").html(result['unw']);
                        $("#vusername").removeClass();                      
                        $("#vusername").addClass("text-warning");
                        $("#username").removeClass();
                        $("#username").addClass("form-control form-control-user border-warning");
                    } 
                    if (result.une) {
                        $("#vusername").html(result['une']);
                        $("#vusername").removeClass();                      
                        $("#vusername").addClass("text-danger");
                        $("#username").removeClass();
                        $("#username").addClass("form-control form-control-user border-danger");
                    }

                    if (result.mi) {
                        $("#vemail").html(result['mi']);
                        $("#vemail").removeClass();                     
                        $("#vemail").addClass("text-info");
                        $("#email").removeClass();
                        $("#email").addClass("form-control form-control-user border-info");
                    }
                    if (result.mw) {
                        $("#vemail").html(result['mw']);
                        $("#vemail").removeClass();                     
                        $("#vemail").addClass("text-warning");
                        $("#email").removeClass();
                        $("#email").addClass("form-control form-control-user border-warning");
                    }
                    if (result.me) {
                        $("#vemail").html(result['me']);
                        $("#vemail").removeClass();                     
                        $("#vemail").addClass("text-danger");
                        $("#email").removeClass();
                        $("#email").addClass("form-control form-control-user border-danger");
                    }

                    if (result.pwi) {
                        $("#vpassword").html(result['pwi']);
                        $("#vpassword").removeClass();                      
                        $("#vpassword").addClass("text-info");
                        $("#password").removeClass();
                        $("#password").addClass("form-control form-control-user border-info");
                    } 
                    if (result.pww) {
                        $("#vpassword").html(result['pww']);
                        $("#vpassword").removeClass();                      
                        $("#vpassword").addClass("text-warning");
                        $("#password").removeClass();
                        $("#password").addClass("form-control form-control-user border-warning");
                    }                            
                }
            });         
        });
    });
</script>

Thank you

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    With help of AlwaysHelping.

    I made some the validations on Javascript side that do not require database connection and Php and I processed each one separately in the .keyup function, so only the input that was actually interacting was giving the validations error and resolved other Ajax-requiring verification in a single Ajax call.

    <script type="text/javascript">
    $(document).ready(function() {

        //Input Validations
        $("#fullname").keyup(function(event) {
            event.preventDefault();
            var fullname = $("#fullname").val();
            $("#vfullname").html("");
            $("#fullname").removeClass();
            $("#fullname").addClass("form-control form-control-user border-success");
            var fullnameregex = /^([a-zA-Z-_ ’'‘ÆÐƎƏƐƔIJŊŒẞÞǷȜæðǝəɛɣijŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊIJĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịijĵķƙĸĺļłľŀʼnńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]+)$/;
            if (!fullnameregex.test(fullname)) {
                $("#vfullname").html("Please enter a valid name.");
                $("#vfullname").removeClass();
                $("#vfullname").addClass("text-info");
                $("#fullname").removeClass();
                $("#fullname").addClass("form-control form-control-user border-info");
            }
        });

        $("#username").keyup(function(event) {
            event.preventDefault();
            var username = $("#username").val();
            $("#vusername").html("");
            $("#username").removeClass();
            $("#username").addClass("form-control form-control-user border-success");
            var usernameregex = /^[a-z0-9_-]{3,16}$/;
            if (!usernameregex.test(username)) {
                $("#vusername").html("Please enter a valid username.");
                $("#vusername").removeClass();
                $("#vusername").addClass("text-info");
                $("#username").removeClass();
                $("#username").addClass("form-control form-control-user border-info");
            }
        });

        $("#email").keyup(function(event) {
            event.preventDefault();
            var email = $("#email").val();
            $("#vemail").html("");
            $("#email").removeClass();
            $("#email").addClass("form-control form-control-user border-success");
            var emailregex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
            if (!emailregex.test(email)) {
                $("#vemail").html("Please enter a valid email");
                $("#vemail").removeClass();
                $("#vemail").addClass("text-info");
                $("#email").removeClass();
                $("#email").addClass("form-control form-control-user border-info");
            }
        });

        $("#password").keyup(function(event) {
            event.preventDefault();
            var password = $("#password").val();
            $("#vpassword").html("");
            $("#password").removeClass();
            $("#password").addClass("form-control form-control-user border-success");
            var passwordregex = /^.*(?=.{8,})(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;
            if (!passwordregex.test(password)) {
                $("#vpassword").html("The password must contain at least one upper and lower case character, a number and a special character.");
                $("#vpassword").removeClass();
                $("#vpassword").addClass("text-info");
                $("#password").removeClass();
                $("#password").addClass("form-control form-control-user border-info");
            }
        });

        //Ajax Validations
        $("#register-form").keyup(function(event) {

            event.preventDefault();

            var fullname = $("#fullname").val();
            var username = $("#username").val();
            var email = $("#email").val();
            var password = $('#password').val();

            $.ajax({
                type: "POST",
                url: "registercontrol.php",
                data: {
                    fullname: fullname,
                    username: username,
                    email: email,
                    password: password
                },
                dataType: "json",
                success: function(result) {

                    if (result.une) {
                        $("#vusername").html(result['une']);
                        $("#vusername").removeClass();
                        $("#vusername").addClass("text-danger");
                        $("#username").removeClass();
                        $("#username").addClass("form-control form-control-user border-danger");
                    }

                    if (result.me) {
                        $("#vemail").html(result['me']);
                        $("#vemail").removeClass();
                        $("#vemail").addClass("text-danger");
                        $("#email").removeClass();
                        $("#email").addClass("form-control form-control-user border-danger");
                    }
                }
            });
        });

    }); 
</script>

  2. 0

    Here is much simpler answer for you by using this and use of .attr instead of doing multiple keyup functions i am only doing one and using if conditions to match .attr of input i am typing in.

    I have also assigned unique class .validate_input to all inputs to do keyup function on that and then i checking by this .attr to get the typed input .val()

    Run snippet below to check all validation is working nicely as you want.

    $(document).ready(function() {

  //RegEx
  var fullnameregex = /^([a-zA-Z-_ ’'‘ÆÐƎƏƐƔIJŊŒẞÞǷȜæðǝəɛɣijŋœĸſßþƿȝĄƁÇĐƊĘĦĮƘŁØƠŞȘŢȚŦŲƯY̨Ƴąɓçđɗęħįƙłøơşșţțŧųưy̨ƴÁÀÂÄǍĂĀÃÅǺĄÆǼǢƁĆĊĈČÇĎḌĐƊÐÉÈĖÊËĚĔĒĘẸƎƏƐĠĜǦĞĢƔáàâäǎăāãåǻąæǽǣɓćċĉčçďḍđɗðéèėêëěĕēęẹǝəɛġĝǧğģɣĤḤĦIÍÌİÎÏǏĬĪĨĮỊIJĴĶƘĹĻŁĽĿʼNŃN̈ŇÑŅŊÓÒÔÖǑŎŌÕŐỌØǾƠŒĥḥħıíìiîïǐĭīĩįịijĵķƙĸĺļłľŀʼnńn̈ňñņŋóòôöǒŏōõőọøǿơœŔŘŖŚŜŠŞȘṢẞŤŢṬŦÞÚÙÛÜǓŬŪŨŰŮŲỤƯẂẀŴẄǷÝỲŶŸȲỸƳŹŻŽẒŕřŗſśŝšşșṣßťţṭŧþúùûüǔŭūũűůųụưẃẁŵẅƿýỳŷÿȳỹƴźżžẓ]+)$/;
  var usernameregex = /^[a-z0-9_-]{3,16}$/;
  var emailregex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
  var passwordregex = /^.*(?=.{8,})(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;

  //Input Validations
  $('.validate_inputs').keyup(function(event) {
    event.preventDefault();
    if ($(this).attr('id') == 'fullname') {
      if (!fullnameregex.test($(this).val())) {
        $("#vfullname").html("Please enter a valid name.");
        $("#vfullname").removeClass();
        $("#vfullname").addClass("text-info");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-info");
      } else {
        $("#vfullname").html("");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-success");
      }
    } else if ($(this).attr('id') == 'username') {
      if (!usernameregex.test($(this).val())) {
        $("#vusername").html("Please enter a valid username.");
        $("#vusername").removeClass();
        $("#vusername").addClass("text-info");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-info");
      } else {
        $("#vusername").html("");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-success");
      }
    } else if ($(this).attr('id') == 'email') {
      if (!emailregex.test($(this).val())) {
        $("#vemail").html("Please enter a valid email");
        $("#vemail").removeClass();
        $("#vemail").addClass("text-info");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-info");
      } else {
        $("#vemail").html("");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-success");
      }
    } else if ($(this).attr('id') == 'password') {
      if (!passwordregex.test($(this).val())) {
        $("#vpassword").html("The password must contain at least one upper and lower case character, a number and a special character.");
        $("#vpassword").removeClass();
        $("#vpassword").addClass("text-info");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-info");
      } else {
        $("#vpassword").html("");
        $(this).removeClass();
        $(this).addClass("form-control form-control-user border-success");
      }
    }
  });


  //Ajax Validations
  $("#register-form").keyup(function(event) {

    event.preventDefault();

    var fullname = $("#fullname").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var password = $('#password').val();

    $.ajax({
      type: "POST",
      url: "registercontrol.php",
      data: {
        fullname: fullname,
        username: username,
        email: email,
        password: password
      },
      dataType: "json",
      success: function(result) {

        if (result.une) {
          $("#vusername").html(result['une']);
          $("#vusername").removeClass();
          $("#vusername").addClass("text-danger");
          $("#username").removeClass();
          $("#username").addClass("form-control form-control-user border-danger");
        }

        if (result.me) {
          $("#vemail").html(result['me']);
          $("#vemail").removeClass();
          $("#vemail").addClass("text-danger");
          $("#email").removeClass();
          $("#email").addClass("form-control form-control-user border-danger");
        }
      }
    });
  });

});
    input {
  display: block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  Name <input type="text" class="validate_inputs" id="fullname" />
  <div id="vfullname"></div>
  Username <input type="text" class="validate_inputs" id="username" />
  <div id="vusername"></div>
  Email <input type="text" class="validate_inputs" id="email" />
  <div id="vemail"></div>
  Password <input type="email" class="validate_inputs" id="password" />
  <div id="vpassword"></div>

  <button id="register-form">Submit</button>


</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search