Javascript validating function values

Question

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?

Mamun · Accepted Answer · 2019-08-27 06:30:08Z

1

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>

edited Aug 27, 2019 at 6:30

answered Aug 27, 2019 at 4:31

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gosi Over a year ago

Mamum, that is not what I want, infact I've already done that. Basically, why I want it outside of that function is so I can validate another such function.

Gosi Over a year ago

Infact, if you look at my code, I actually just want to change the part var=sample onwards.. the above is working, just need to know how I can call the value of that particular function (variable's value) so that I can call multiple variables from different functions and do an if statement to valdiate.

Gosi Over a year ago

Ok I'll edit the question now, and add the other function as well, so its easier to see.

Nidhin Joseph · Accepted Answer · 2019-08-27 04:34:39Z

0

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" />

answered Aug 27, 2019 at 4:34

Nidhin Joseph

10.3k4 gold badges28 silver badges49 bronze badges

Comments

Ali Naghipour · Accepted Answer · 2019-08-27 06:10:24Z

0

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>

answered Aug 27, 2019 at 6:10

Ali Naghipour

135 bronze badges

1 Comment

Gosi Over a year ago

this shows that if there is a value , it shows success, but if you were to backspace the value, it still shows success (it should show fail here now)

Collectives™ on Stack Overflow

Javascript validating function values

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related