What do you think about my javascript/jquery code?

[greenace92]

I made this login form, and this is the javascript that I included as an external link.

I'm concerned about mixing the way clicks are handled eg. onclick="someFunction();" vs. $(document).on("click"...) vs. $(document.ready(...

 

The form accomplishes the following:

- checks for empty fields, if empty, turn their borders red, and shake.

- when clicking into a field(or tabbing from username to passwrod field), the borders are reverted back to the original color if they're red, error message goes away

- then form is submitted, and redirect occurs

 

Also if you have any formatting tips, indents vs. space, that sort of thing, or where brackets should go, I'm not sure if javascript follows similar formatting as PHP where I'm going to adopt the PSR-2 formatting.

 

I also think it's possible I'm making things way more difficult than they need to be.

 

Thanks for any help.

 

Images are for reference.

 

<script type="text/javascript">
    function showRegister() {
      window.location = "http://directory";
    }
    var lastState = "login";
    function displayTos() {
      var currentLabel = $("#tosB").html();
      if(currentLabel == "Terms of Service"){
	$("#login-form").hide();
	$("#tos").show();
	$("#tosB").html('back');
      }
      else {
	$("#tosB").html('Terms of Service');
	// back to login
	$("#tos").hide();
	$("#register-form").hide();
	$("#login-form").show();
      }
    }
    $(document).ready(function() {
      $('#password').on('focus', function() {
	if($("#password").css("borderTopColor") == "rgb(255, 0, 0)") {
	  $('#password').css("border-color", "#282828");
	  $("#error-message").hide();  
	}
      });
    });
    $(document).on("submit", "form", function(e) {
      loginCheck();
    });
    $(document).on("click", ".input", function() {
      selectedId = $(this).attr('id');
      if($('#'+selectedId).css("borderTopColor") == "rgb(255, 0, 0)") {
	$('#'+selectedId).css("border-color", "#282828");
      }
      if($('#'+selectedId).css("borderTopColor") == "rgb(255, 0, 0)") {
	$('#'+selectedId).css("border-color", "#282828");
      }
      var usernameBorder = $("#username").css("borderTopColor");
      var passwordBorder = $("#password").css("borderTopColor");
      if( (usernameBorder != "rgb(255, 0, 0)") && (passwordBorder != "rgb(255, 0, 0)") ) {
	$("#error-message").hide();
      }
    });
    // errors
    function showError() {
      $("#error-message").show();
    }
    function usernameError() {
      showError();
      $("#username").css("border-color", "red");
      $("#username").effect("shake", {times:1, distance:5}, 300);
    }
    function passwordError() {
      showError();
      $("#password").css("border-color", "red");
      $("#password").effect("shake", {times:1, distance:5}, 300);
    }
    function loginCheck() {
      // check if any of the fields are empty
      // get values
	var $username = $('#username').val();
	var $password = $('#password').val();
	// check if values are present
	if(($username == '') || ($password == '')) {
	  passwordError();
	  usernameError();
	  // return false;
	}
	if($username && $password != '') {
	    $.post("login.php", {
	      username:$username,
	      passsword:$password
	    }).done(function() {
		alert('Success');
	    }).fail(function() {
		alert('fail');
	    });
	  // return true;
	}
    }
</script>

[Strider64]

What happens if someone disables Javascript? Can they bypass the checks? 

 

I personally do the validation checks using PHP that way I know nothing gets bypassed. Then if I wanted to add I can add Javascript/JQuery validation after I get the php validation working.

Edited April 4, 2016 by Strider64