CODEWITHSUNDEEP
javascriptjquery
Gosi
Gosi

Reputation: 2003

Javascript validating function values

I have a form which has no input button. It has to capture data as the user types. So I've came up with the following code:

<form>
    <input type="text" name="nameValidation" id="nameValidation" placeholder="Name">
    <input type="number" name="phoneValidation" id="phoneValidation" placeholder="Phone">
    <input type="email" name="emailValidation" id="emailValidation" placeholder="Email">
</form>

<script>
    $(function() {

        var phoneIsValid;
        var emailIsValid;

        $('#nameValidation').on('input', function() {
            var nameValisession = $(this).val();
            sessionStorage.setItem("nameValiSession", nameValisession);
            var nameValisession = sessionStorage.getItem("nameValiSession");
        }); 

        $('#phoneValidation').on('input', function() {
            var phoneValisession = $(this).val();
            sessionStorage.setItem("phoneValiSession", phoneValisession);

            // Start of phone validation - make sure its not empty
            if(phoneValisession != "") {
                phoneIsValid = 1;
                alert(phoneIsValid);
                return phoneIsValid;
            } else {
                phoneIsValid = 0;
                alert(phoneIsValid);
                return phoneIsValid;
            }
            // End of phone validation
        }); 

        $('#emailValidation').on('input', function() {
            var emailValisession = $(this).val();
            sessionStorage.setItem("emailValiSession", emailValisession);

            // Start of email validation - check if have @ sign
            var emailValid = emailValisession.includes("@");
            if(emailValid==true) {
                emailIsValid = 1;
                alert(emailIsValid);
            } else {
                emailIsValid = 0;
                alert(emailIsValid);
            }   
            // End of email validation
        }); 

    }); 

</script>

You can ignore namevalidation for now. So basically I want to check if emailIsvalid = 1 AND emailIsValid = 1. If both are, then I want to display alert("success"); else, I want to display alert("fail");.

So, I tried this:

var sample = phoneFunc();
    $(document).ready(function() { 
        $("#phoneValidation").change(function() { 

            if(sample==1) {
                alert("success!");
            } else {
                alert("fail");
              }
        }); 
    });

However, this just keeps showing me fail. How do I go about fixing this or where am I going wrong?

Upvotes: 0

Views: 95

Answers (3)

Mamun
Mamun

Reputation: 68933

Since you have declared phoneIsValid as a global variable, you do not need the function (phoneFunc) to return that variable. Simply get the value from the variable (phoneIsValid) inside the change event:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="phoneValidation"/>

<script>
    $(function() {

        var phoneIsValid;

        //function phoneFunc() {
          $('#phoneValidation').on('input', function() {
              var phoneValisession = $('#phoneValidation').val().trim();
              //sessionStorage.setItem("phoneValiSession", phoneValisession);

              // Start of phone validation - make sure its not empty
              if(phoneValisession != "") {
                  phoneIsValid = 1;
              } else {
                  phoneIsValid = 0;
              }
              // End of phone validation
          }); 
        //}
        
        $(document).ready(function() { 
            $("#phoneValidation").change(function() { 
                //var sample = phoneFunc();
                if(phoneIsValid==1) {
                  alert("success!");
                } else {
                  alert("fail");
                }
            }); 
        }); 
    }); 

</script>

Your way by calling/invoking the function inside $(document).ready:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="phoneValidation"/>

<script>
    $(function() {

        var phoneIsValid;

        function phoneFunc() {
          $('#phoneValidation').on('input', function() {
              var phoneValisession = $('#phoneValidation').val().trim();
              //sessionStorage.setItem("phoneValiSession", phoneValisession);

              // Start of phone validation - make sure its not empty
              if(phoneValisession != "") {
                  phoneIsValid = 1;
              } else {
                  phoneIsValid = 0;
              }
              // End of phone validation
          }); 
          return phoneIsValid;
        }
        
        $(document).ready(function() { 
            phoneFunc();
            $("#phoneValidation").change(function() { 
                var sample = phoneFunc();
                //console.log(sample);
                if(sample==1) {
                  alert("success!");
                } else {
                  alert("fail");
                }
            }); 
        }); 
    }); 

</script>

Upvotes: 1

Ali Naghipour
Ali Naghipour

Reputation: 13

you can try this:

<input id="phoneValidation" type="text" />

<script>
    $(function() {

        var phoneIsValid;
        var sample;

            $('#phoneValidation').change( function() {
            var phoneValisession = $(this).val();
            sessionStorage.setItem("phoneValiSession", phoneValisession);
            sample=phoneFunc(phoneValisession);
        }); 
        function phoneFunc(phoneValisession) {
            var getVlue;
            if(phoneValisession != null) {
                phoneIsValid = 1;
                alert(phoneIsValid);
                getVlue = phoneIsValid;

            } else {
                phoneIsValid = 0;
                alert(phoneIsValid);
                getVlue = phoneIsValid;

            }
        return getVlue;
        }


 function phoneValidationCheck() {

            $("#phoneValidation").change(function() { 

                if(sample==1) {
                    alert("success!");
                } else {
                    alert("fail");
                  }
            }); 

}
phoneValidationCheck();

    }); 
</script>

Upvotes: 0

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

You can use $(this).val() to get the value and then check.

$(function() {
  var phoneIsValid;
  $(document).ready(function() {
    $("#phoneValidation").keyup(function() {
      if ($(this).val().trim() == 1) {
        phoneIsValid = true;
        alert("success!");
      } else {
        alert("fail");
        phoneIsValid = false;
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="phoneValidation" />

Upvotes: 0

Related Questions