Works one moment, but not the next.

[White_Lily]

Hi, I have a new problem in that I managed to get my validation working last night, but because it was getting close to 4am, I decided it was time for bed, I woke up a few hours later to work on the script some more, and when I go to my site to see where I left off, I find that the script no longer works, but it did just before I went to bed?

 

Here is the code I typed out:

 

<script type="text/javascript">
$(function(){
var $submit = $("div.submitBtn input");
var $required = $(".required");
function containsBlanks(){
var blanks = $required.map(function(){
return $(this).val() == "";
});
return $.inArray(true,blanks) != -1;
}

function isValidEmail(email){
return email.indexOf("@") != -1;
}

function requiredFields(){
if(containsBlanks()
|| $("#usernameLength input").val().length < 6
|| $("#usernameLength input").val().length > 30/* || !isValidEmail($("#email").val())*/)
$submit.attr("disabled","disabled");
else
$submit.removeAttr("disabled");
}

$("#registerOverlay span").hide();
$("#signIn").click(function(){
$("div.popOverlay").fadeIn("slow");
$("div#registerOverlay").fadeIn("slow");
});
$("div.popOverlay").click(function(){
$(this).fadeOut("slow");
$("div#registerOverlay").fadeOut("slow");
});
$("#registerOverlay input").focus(function(){
$(this).next().fadeIn("slow").css({
background: "pink",
border: "1px solid red"
});
}).blur(function(){
$(this).next().fadeOut("slow");
}).keyup(function(){
// check all required fields
requiredFields();
});

$("#usernameLength input").keyup(function(){
//check string length of username
if($("#usernameLength input").val().length < 6)
$(this).next().removeClass("pass").css({
background: "pink",
border: "1px solid red"
});
else if($("#usernameLength input").val().length > 30)
$(this).next().removeClass("pass").css({
background: "pink",
border: "1px solid red"
});
else
$(this).next().removeClass("error").css({
background: "lightgreen",
border: "1px solid green"
});
});

/*$("#email").keyup(function(){
// check for valid email
if(isValidEmail($(this).val()))
$(this).next().removeClass("error").addClass("pass");
else
$(this).next().removeClass("pass").addClass("error");
});*/

requiredFields();
});
</script>

 

The error that Google Chromes "Inspect Element" is giving me is:

 

"Uncaught TypeError: Cannot read property 'length' of undefined"

 

I've searched google but have not found a solution relevant to my problem.

 

Any help is appreciated

[jazzman1]

Is it jquery API code? You need to include a source code of that library.

[White_Lily]

Yeah I have the latest jQuery from jquery.com's website and it is included, but like I said the code above worked one moment then a few hours later I go to try and work on it and it doesnt work at all.

[jazzman1]

I think to get the "length" of particular DOM element in jQuery, you need to type something like that:

To be sure, check in jquery web site.

 

$("#usernameLength").length

[White_Lily]

So it calculates the number of elements, not the number of characters in a user entered string?

[jazzman1]

So, you're right.

I've made a simple test:

 

Working

 

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
	 var value = $("#usernameLength").val().length;
	 console.log(value);

});
</script>
<input type="text" id="usernameLength" value="" />

 

Not working:

 

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
	 var value = $("#usernameLength input").val().length;
	 console.log(value);

});
</script>
<input type="text" id="usernameLength" value="" />

 

EDIT: If you want to use an input selector, it should be something like this:

http://api.jquery.com/input-selector/

 

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
	 var value = $(":input#usernameLength").val().length;
	 console.log(value);

});
</script>
<input type="text" id="usernameLength" value="" />

Edited January 12, 2013 by jazzman1

[White_Lily]

that doesnt seem to work either

[jazzman1]

Well, I've tested into my local server and the example #1 and #3 works just fine.

How did you test it?

[White_Lily]

by implenting the changes and uploading the document then running it on the live site.

 

the site im working on is the Forum Development in my signature, if you go there and "Sign In" at the top of the page, youll notice nothing happens, and both chrome and firebug are complaining about .length being "Undefined"

[jazzman1]

Well, it doesn't work b/s you use a div html element with id: usernameLength, not input element with id:usernameLength.

[White_Lily]

so the input field needs the id of usernameLength, not the div?

[jazzman1]

so the input field needs the id of usernameLength, not the div?

It depends what you want to do.

 

For now rid the selector off your code.

 

Example:

 

console.log($("#usernameLength").val().length);

[White_Lily]

d'yah what all I want to do is get the jQuery to calculate the minimum and maximum length of the users entered string, if its less than 6 then show an error, if its more than 30 show an error, anything inbetween is acceptable... thats all i wanna do.

[jazzman1]

That one should work, b/s you have ids to input elements.

 

console.log($(":input#username").val().length);

[White_Lily]

okay, its working now not entirely sure what went wrong, i implemented the changes you suggested, refreshed the page - nothing happened, so i re-uploaded and now it is working... anyway, thanks for your help :-)