CODEWITHSUNDEEP
javascriptjquery
Alexey Tseitlin
Alexey Tseitlin

Reputation: 1309

Function error: Uncaught TypeError: undefined is not a function

Made a script that checks if: $("#password") has 9 symbols and if $("#password") = $("#confirm_password").

The problem is when I try to enable the "submit" button... What is wrong with "function submitButton()"?

$("form span").hide();
$('input[type="submit"]').attr("disabled", "true");

var samePass = false;
var eight = false;

var $password01 = $("#password");
var $password02 = $("#confirm_password")

//Why this function doesn't work?
function submitButton() {
  if (samePass && eight){
    $('input[type="submit"]').removeAttr('disabled');
  };
};

//Checks if the pass has 8 symbles
function passwordEvent() {
  if ($password01.val().length > 8) { 
    eight = true;
    $password01.next().hide().submitButton();

  } else {
    $password01.next().show();
  };
};

//Checks if the two passwards are the same
function passwordCheck() {
  if($password02.val() !== $password01.val()) {
    $password02.next().show();
  } else {
    samePass = true;
    $password02.next().hide().submitButton();

  };
};



$password01.focus(passwordEvent).keyup(passwordEvent).focus(passwordCheck).keyup(passwordCheck);
$password02.focus(passwordCheck).keyup(passwordCheck);


$("form span").hide();
$('input[type="submit"]').attr("disabled", "true");

var samePass = false;
var eight = false;

var $password01 = $("#password");
var $password02 = $("#confirm_password")

//Why this function doesn't work?
function submitButton() {
  if (samePass && eight){
    $('input[type="submit"]').removeAttr('disabled');
  };
};

//Checks if the pass has 8 symbles
function passwordEvent() {
  if ($password01.val().length > 8) { 
    eight = true;
    $password01.next().hide().submitButton();

  } else {
    $password01.next().show();
  };
};

//Checks if the two passwards are the same
function passwordCheck() {
  if($password02.val() !== $password01.val()) {
    $password02.next().show();
  } else {
    samePass = true;
    $password02.next().hide().submitButton();

  };
};



$password01.focus(passwordEvent).keyup(passwordEvent).focus(passwordCheck).keyup(passwordCheck);
$password02.focus(passwordCheck).keyup(passwordCheck);
body {
  background: #384047;
  font-family: sans-serif;
  font-size: 10px
}

form {
  background: #fff;
  border-radius: 10px;
  padding: 4em 4em 2em;
  box-shadow: 0 0 1em #222;
  
  max-width: 400px;
  margin: 100px auto;
}

p {
  margin: 0 0 3em 0;
  position: relative;
}

label {
  font-size: 1.6em;
  font-weight:600;
  color: #333;
  
  display: block;
  margin: 0 0 .5em;
}

input {
  display: block;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  outline: none
}

input[type="text"], 
input[type="password"] {
  background: #f5f5f5;
  border: 1px solid #F0F0F0;
  border-radius: 5px;
  
  font-size: 1.6em;
  padding: 1em 0.5em;
}

input[type="text"]:focus, 
input[type="password"]:focus {
  background: #fff
}

span {
  border-radius: 5px;
  padding: 7px 10px;
  background: #2F558E;
  color: #fff;
  
  width: 160px;
  display: block; /* Needed for the width to work */
  
  text-align: center; /* For the inner text */
  
  position: absolute;
  left: 105%;
  top: 25px;
}

span:after {
  content: " ";
  
  position: absolute;
/*  pointer-events: none;*/
  right: 100%;
  top: 50%;
/*
  height: 0;
  width: 0;
*/
  
  border: solid transparent;
/*  border-color: rgba(136, 183, 213, 0);*/
  border-right-color: #2F558E;
  border-width: 8px;
  margin-top: -8px;
}

.enableSub {
  background: #0099FF;
  border: none;
  border-radius: 5px;
  color: white;
  height: 50px;
  box-shadow: 0 3px 0 0 #005C99;
}

.disableSub {
  background: #AEAEAE;
  border: none;
  border-radius: 5px;
  color: white;
  height: 50px;
  }
<!DOCTYPE html>
<html>
<head>
	<title>Sign Up Form</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>

	<form action="#" method="post">
		<p>
			<label for="username">Username</label>
			<input id="username" name="username" type="text">
		</p>
		<p>
			<label for="password">Password</label>
			<input id="password" name="password" type="password">
			<span>Enter a password longer than 8 characters</span>
		</p>
		<p>
			<label for="confirm_password">Confirm Password</label>
			<input id="confirm_password" name="confirm_password" type="password">
			<span>Please confirm your password</span>
		</p>
		<p>
			<input type="submit" class="disableSub" value="SUBMIT">
		</p>
	</form>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

Upvotes: 0

Views: 453

Answers (1)

Matt
Matt

Reputation: 75307

$password01.next().hide().submitButton();

et al. won't work. You instead need to do;

$password01.next().hide();
submitButton();

You've declared submitButton as a function, not a method on a jQuery object, hence you need to call it as such.

The "undefined is not a function" error appears cryptic at first, but becomes clear once understood.

Since the jQuery object returned from hide() doesn't have a submitButton property (or method), hide().submitButton returns undefined. You're then trying to call that as a function (with the ()), hence JavaScript is telling you that undefined is not a function.

As well as the above, your logic is also flawed. Namely samePass is being set to true the second you click into the password1 field (since, on focus, when they're both blank, $password02.val() === $password01.val()). That means that as soon as password is > 8 chars, both conditions will match, and your submit will be enabled.

To fix this, you should probably be setting samePass and eight to false when they don't match their criteria, and calling submitButton() in all cases to update the state

//Why this function doesn't work?
    function submitButton() {
        if (samePass && eight) {
            $('input[type="submit"]').removeAttr('disabled');
        } else {
            $('input[type="submit"]').attr('disabled', "true");
        }
    };

//Checks if the pass has 8 symbles
function passwordEvent() {
    if ($password01.val().length > 8) {
        eight = true;
        $password01.next().hide();
        submitButton();
    } else {
        eight = false;
        $password01.next().show();
        submitButton();
    };
};

//Checks if the two passwards are the same
function passwordCheck() {
    if ($password02.val() !== $password01.val()) {
        samePass = false;
        $password02.next().show();
        submitButton();
    } else {
        samePass = true;
        $password02.next().hide();
        submitButton();
    };
};

... which then works; http://jsfiddle.net/9qqnqLxm/

Upvotes: 3

Related Questions