CODEWITHSUNDEEP
javascriptjqueryforms
Neagu Claudiu Alexandru
Neagu Claudiu Alexandru

Reputation: 29

Have a function if another one is true

I am trying to have a form validation. I managed to make the validation function and stored it under a variable to be much easier to write in the future.

var a = $('#email').keyup(function(){
      var emailRegexp = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/;
      if (emailRegexp.test($('#email').val())) {
        $('#email').addClass('correct');
        $('#email').removeClass('error');
        $('.email-error').html("");
        return true;
      } else {
        $('#email').addClass('error');
        $('.email-error').html("Invalid e-mail");
        return false;
      }
    });

and I have a second function that should be have 2 cases if a === true or a=== false: 

  $(document).ready(function(){
        $('#next1').click(function(){
          if (a === true) {
            $('.first-nav').css({
              "color":"white",
              "background-color":"rgba(133,179,181,1)"});
          } else if(a === false) {
            $('.first-nav').css({
              "color":"white",
            "background-color":"red"});
          }
        });
      });

however in the first function even if the condition is meet, it doesn't return anything so the 2nd function does not work. I was thinking that for the second function to change and not get the true/false value but instead to try and get the attribute class of the id = email.

Upvotes: 0

Views: 133

Answers (2)

Terry
Terry

Reputation: 66103

Your variable a refers to a jQuery object and not a boolean, so it will fail both a === true and a === false checks. What you want is to update the variable in the keyup event handler:

// Assume invalid by default
var a = false;

// Update variable when email is filled out
$('#email').keyup(function(){
  var emailRegexp = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/;
  if (emailRegexp.test($('#email').val())) {
    $('#email').addClass('correct');
    $('#email').removeClass('error');
    $('.email-error').html("");
    a = true;
  } else {
    $('#email').addClass('error');
    $('.email-error').html("Invalid e-mail");
    a = false;
  }
});

Then, you can evaluate a as you're doing now. Since it is always a boolean, you don't have to use === comparison:

$('#next1').click(function(){
  if (a) {
    // If email is valid
  } else {
    // If email is invalid
  }
});

Pro-tip: instead of listening to the keyup event, simply binding to the input event will work. That is because it is possible that the value of #email will mutate without a keyboard event, e.g. when the user pastes an email using right clicking + context menu.

$('#email').on('input', function() {
  // Email validation logic here
});

Upvotes: 0

DubZ
DubZ

Reputation: 582

it does not exactly answer your question, but I want to mention that you can also use html5 pattern attribute instead of javascript. so you have a pure html5/css form validation possibility.

you can have a look for explanation and example including css for design your fields if form is valid/invalid here: https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145

Upvotes: 1

Related Questions