JQuery Form Validation & Button Ripple

Question

I found this login form on http://codepen.io/suez/pen/dPqxoM, So basically when you click the button it does a ripple effect and what I'm trying to do is adjust the code so that it does the effect only after it has validated that the user exists within the database.

Original Code -

$(document).on("click", ".login_facebook", function(e) {
if (animating) return;
animating = true;
var that = this;
ripple($(that), e);
$(that).addClass("processing");
setTimeout(function() {
  $(that).addClass("success");
  setTimeout(function() {
    window.location = 'home.html';
  }, submitPhase2 - 70);
  setTimeout(function() {
    $login.hide();
    $login.addClass("inactive");
    animating = false;
    $(that).removeClass("success processing");
  }, submitPhase2);
}, submitPhase1);
});

My Code Change.

$(document).on("click", ".login__submit", function(e) {
var username = $("#username").val();
var password = $("#password").val();

if( username ==''){
  $('.login__row:eq(0)').css("border","2px solid red");
  $('.login__row:eq(0)').css("box-shadow","0 0 3px red");
  $('.message').show("fast");

}
else
  if(password == '')
  {
    $('.login__row:eq(1)').css("border","2px solid red");
    $('.login__row:eq(1)').css("box-shadow","0 0 3px red");
    $('.message').show("fast");
  }

  if(username != "" && password != "")
  {
    var UrlToPass = 'action=login&username='+username+'&password='+password;
    $.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
    type : 'POST',
    data : UrlToPass,
    url  : 'login.php',
    success: function(responseText){ // Get the result and asign to each cases
      if(responseText == 0){
        $('.login__row').css("border","2px solid yellow");
        $('.login__row').css("box-shadow","0 0 3px yellow");

      }
      else if(responseText == 1)
      {
            if (animating) return;
            animating = true;
            var that = this;
            ripple($(that), e);
            $(that).addClass("processing");
            setTimeout(function() {
              $(that).addClass("success");
              setTimeout(function() {
                window.location = 'home.html';
              }, submitPhase2 - 70);
              setTimeout(function() {
                $login.hide();
                $login.addClass("inactive");
                animating = false;
                $(that).removeClass("success processing");
              }, submitPhase2);
            }, submitPhase1);            
      }
      else{
      alert('Problem with sql query');
    }
  }
  });
  }

  });

Thanks in advance

I have had some experinces with codepen.io i have had some times nothing they do works some times it does — The Beast, Dec 10 '15 at 14:51

score 1 · Accepted Answer · edited May 23 '17 at 11:44

I'd say you have several issues.

Basically, responseText is a String. So, when you check if (responseText == 0) and if (responseText == 1) it simply doesn't match.

In JavaScript, variables types matter. A String is not equal to an Int.

Try to use responseText * 1 to convert your String into an Int. Then you should be abble to compare them.

Another issue I see is a scope issue. var that = this; totally depends on when it is called.

You have to call it the same way the code you provided did - i.e. in the event function not in the ajax success callback function

More info about scope : What is the scope of variables in JavaScript

$(document).on("click", ".login__submit", function(e) {
    var that = this; // scope issue solved

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

    if( username =='') {
        $('.login__row:eq(0)').css("border","2px solid red");
        $('.login__row:eq(0)').css("box-shadow","0 0 3px red");
        $('.message').show("fast");
    } else if(password == '') {
        $('.login__row:eq(1)').css("border","2px solid red");
        $('.login__row:eq(1)').css("box-shadow","0 0 3px red");
        $('.message').show("fast");
    }

    if(username != "" && password != "") {
        var UrlToPass = 'action=login&username='+username+'&password='+password;
        $.ajax({
            type : 'POST',
            data : UrlToPass,
            url  : 'login.php',
            success: function(responseText) {
                if(responseText * 1 === 0) { // comparison issue solved
                    $('.login__row').css("border","2px solid yellow");
                    $('.login__row').css("box-shadow","0 0 3px yellow");
                } else if(responseText * 1 === 1) { // comparison issue solved
                    if (animating) return;
                    animating = true;

                    ripple($(that), e);
                    $(that).addClass("processing");
                    setTimeout(function() {
                        $(that).addClass("success");
                        setTimeout(function() {
                            window.location = 'home.html';
                        }, submitPhase2 - 70);
                        setTimeout(function() {
                            $login.hide();
                            $login.addClass("inactive");
                            animating = false;
                            $(that).removeClass("success processing");
                        }, submitPhase2);
                    }, submitPhase1);            
                } else {
                    alert('Problem with sql query');
                }
            }
        });
    }
});

Hi, thank you very much, it worked. I'm still new to JQuery, so I didn't understand much about the scope variable. But Thanks! — Greg Sithole, Dec 11 '15 at 07:05

JQuery Form Validation & Button Ripple

1 Answers1