Jump to content

username validation code is crashing my browser (FF)


Modify_inc

Recommended Posts

I'm trying to understand why my username validation code is not working correctly. For the most part it works, but if you enter the username format wrong two or three times, the browser locks up and requires a forced restart of the browser. I'm a newbie at JavaScript, so keep that in mind when looking at my code. I assume it's related to a while or if statement, although I'm not experienced enough to figure it out at this point. If I enter a username with less than 8 characters, it prompts me that I must have at least 8. If I enter 8 characters with a number for the first character, it prompts me that the first character must be a letter. If then I enter all characters for the username, the browser crashes. (During this time, it should be checking that at least one digit was used)

< html > < body > < script type = "text/javascript" >// Declare variablesvar username; // potential username entered by uservar anyDigits = false; // variable to signify presence of digitsvar index; // loop variable for extracting charactersvar BR = "<br />";var ES = "";// Display program heading and requirements and ask for usernamedocument.write("This program helps you set up a valid username." + BR);document.write("Your username must be at least 8 characters long," + BR);document.write("   start with a letter, and contain at least 1 digit." + BR);username = prompt("Please enter your name: ", ES);// Check for length of usernamewhile (username.length < 8 ) {	document.write("ERROR...your username must be at least 8 characters long." + BR);	username = prompt("Please enter your new username: ", ES);}// Check that first character is a letter// Substring function has three arguments: string, starting position, and ending positionchar1 = username.substr(0, 1);while (!(isNaN(char1))) {	document.write("ERROR: the first character of your username must be a letter." + BR);	username = prompt("Please enter your new username: ", ES);	char1 = username.substr(0, 1);}// Check that there's at least one digit in the usernamewhile (anyDigits !== true) {	// Check each character, set anyDigits to true if a digit	for (index = 0; index < username.length; index++) {		char1 = username.substr(index, 1);		if (!(isNaN(parseInt(char1)))) {			anyDigits = true;		}	}	// If anyDigits is still false, no digits were present	if (anyDigits !== true) {		document.write("ERROR:...your username must include at least 1 digit." + BR);		//username = prompt("Please enter your new username: ", ES);	}}// Thank the user and end the programdocument.write("Thank you! Your new username is: " + username);< /script></body > < /html>

Thanks Mike

Link to comment
Share on other sites

Start over. Don't use document.write(). Don't use prompts. Don't validate using while loops. Put a text input on the page. Get its value when the user blurs (clicks outside the input). Evaluate the whole string at that time. Here's a basic tutorial on handling events. Instead of creating a button, create a text input. Instead listening for an onclick event, listen for an onblur event. Ask questions.

Edited by Deirdre's Dad
Link to comment
Share on other sites

You should be using Firebug or something similar. Also try to avoid using document.write().

<!DOCTYPE html><html><head><title>Written my Mike Modify_inc</title><script type="text/javascript" src="jonerror.js"></script><script type="text/javascript">window.onload = function() {var out = document.getElementById('out');var BR = "<br />";// Display program heading and requirements and ask for usernameout.innerHTML = "This program helps you set up a valid username." + BR;out.innerHTML += "Your username must be at least 8 characters long," + BR;out.innerHTML += "   start with a letter, and contain at least 1 digit." + BR;out.innerHTML += "Please enter your username: " + BR;document.getElementById('btn1').onclick = fnvalidate;}function fnvalidate(){// Declare variablesvar out = document.getElementById('out');var errout = document.getElementById('errout');username = document.getElementById('in').value;var username; // potential username entered by uservar anyDigits = false; // variable to signify presence of digitsvar index; // loop variable for extracting charactersvar BR = "<br />";var error = false;// Check for length of usernameif (username.length < 8 ) {	    errout.innerHTML = "ERROR...your username must be at least 8 characters long." + BR;	    error = true;}// Check that first character is a letter// Substring function has three arguments: string, starting position, and ending positionchar1 = username.substr(0, 1);while (!(isNaN(char1)) && !error) {	    errout.innerHTML = "ERROR: the first character of your username must be a letter." + BR;	    error = true;	    char1 = username.substr(0, 1);}// Check that there's at least one digit in the usernamewhile (anyDigits !== true && !error) {	    // Check each character, set anyDigits to true if a digit	    for (index = 0; index < username.length; index++) {			    char1 = username.substr(index, 1);			    if (!(isNaN(parseInt(char1)))) {					    anyDigits = true;			    }	    }	    // If anyDigits is still false, no digits were present	    if (anyDigits !== true) {			    errout.innerHTML = "ERROR:...your username must include at least 1 digit." + BR;			    error = true;	    }}// Thank the user and end the programif (!error){out.innerHTML += BR + "Thank you! Your new username is: " + username + BR;errout.innerHTML = '';document.getElementById('in').style.display = 'none';document.getElementById('btn1').style.display = 'none';}}</script></head><body><div id="out"></div><input type="text" id="in"/><input type="button" id="btn1" value="Submit"/><div id="errout"></div></body></html>

Edited by davej
Link to comment
Share on other sites

I'm sure !== is legal, since === is legal, but you would not need it here. http://www.w3schools...comparisons.asp Let me go ahead and revert the original and then edit more carefully. There were many strange elements left in there such as unnecessary while loops. I'll also enable multiple error warnings.

<!DOCTYPE html><html><head><title>Written my Mike Modify_inc</title><script type="text/javascript">window.onload = function() {var out = document.getElementById('out');var BR = "<br />";// Display program heading and requirements and ask for usernameout.innerHTML = "This program helps you set up a valid username." + BR;out.innerHTML += "Your username must be at least 8 characters long," + BR;out.innerHTML += "   start with a letter, and contain at least 1 digit." + BR;out.innerHTML += "Please enter your username: " + BR;document.getElementById('btn1').onclick = fnvalidate;} function fnvalidate(){// Declare variablesvar out = document.getElementById('out');var errout = document.getElementById('errout');var username = document.getElementById('in').value; // potential username entered by uservar anyDigits = false; // variable to signify presence of digitsvar error = false;var index; // loop variable for extracting charactersvar BR = "<br />";var char1;// Check for length of usernameif (username.length < 8 ) {   errout.innerHTML = "ERROR...your username must be at least 8 characters long." + BR;   error = true;}else {   errout.innerHTML = '';}// Check that first character is a letter// Substring function has three arguments: string, starting position, and ending positionchar1 = username.substr(0, 1);if (!(isNaN(char1))) {	errout.innerHTML += "ERROR: the first character of your username must be a letter." + BR;	error = true;}// Check that there's at least one digit in the username// Check each character, set anyDigits to true if a digitfor (index = 0; index < username.length; index++) {	char1 = username.substr(index, 1);	if (!(isNaN(parseInt(char1)))) {		anyDigits = true;	}}// If anyDigits is still false, no digits were presentif (!anyDigits) {	errout.innerHTML += "ERROR:...your username must include at least 1 digit." + BR;	error = true;}// Thank the user and end the programif (!error){	out.innerHTML += BR + "Thank you! Your new username is: " + username + BR;	errout.innerHTML = '';	document.getElementById('in').style.display = 'none';	document.getElementById('btn1').style.display = 'none';}}</script></head> <body> <div id="out"></div> <input type="text" id="in"/><input type="button" id="btn1" value="Submit"/> <div id="errout"></div> </body></html>

Edited by davej
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...