Username validation help

niralupatel · 03-30-2012, 08:57 PM

OK I am not so good with java scripting.

I am trying to create a .html file that will validate a username(which starts with a letter and includes at least one digit and minimum of 8 characters)

I was able to get this by quick research but I am not getting anything when I open in browser.

Code:

<html>
<head>
<script type="text/javascript">
function validateUsername(fld) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fld.value == "") {
        fld.style.background = 'Yellow'; 
        error = "You didn't enter a username.\n";
    } else if ((fld.value.length < 5) || (fld.value.length > 15)) {
        fld.style.background = 'Yellow'; 
        error = "The username is the wrong length.\n";
    } else if (illegalChars.test(fld.value)) {
        fld.style.background = 'Yellow'; 
        error = "The username contains illegal characters.\n";
    } else {
        fld.style.background = 'White';
    } 
    return error;
}
</script>
</head>

<body>
<form>


</body>
</html>

I cannot tell how thankfull I will be if someone can help me out. Can anyone mind posting a correction to my codes so it would work?

sunfighter · 03-31-2012, 03:04 PM

Try this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>New document</title>

<script type="text/javascript">

function validateUsername(fld)
{
	var name = document.getElementById(fld).value;
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores

    if (name == "")
	{
		document.getElementById(fld).style.background =  'Yellow';
        document.getElementById('message').innerHTML  = "You didn't enter a username.";
    }
	else if ((name.length < 8) || (name.length > 15))
	{
        document.getElementById(fld).style.background =  'Yellow';
        document.getElementById('message').innerHTML  = "The username is the wrong length.<br />Must be between 8 and 15 characters long.";
    }
	else if (illegalChars.test(name))
	{
        document.getElementById(fld).style.background =  'Yellow';
        document.getElementById('message').innerHTML  = "The username contains illegal characters.";
    } else {
        document.getElementById(fld).style.background = 'White';
		document.getElementById('message').innerHTML  = '';
    }
    //return error;
}
</script>

</head>

<body>
<form>

Name : <input type="text" id="slug" onblur="validateUsername('slug')" /><div id="message"></div>

</form>
</body>
</html>

niralupatel · 03-31-2012, 04:28 PM

Thank you, the code seems good but can you tell me how to put a submit button so I can have error messages to show up if they write the username wrong.

sunfighter · 04-01-2012, 05:28 AM

Normally the opening form tag has a few more definitions in it; the action, the id, the method. It looks like this:

Code:

<form id="myform" action="form_action.php" method="post">

The submit button normally uses this info to send the form data to the form_action.php script which acts upon the data sent.

You are validating the form data using javascript before it is submitted. The submit button calls the js function using onclick instead of of the input using onblur, but they both call the js valadation function and when that finishes the js submits the form data.

Remove the onblur from:

Code:

<input type="text" id="slug" onblur="validateUsername('slug')" />

Add a submit button:

Code:

<form id="myform" action="ajax.php" method="post">
Name : <input type="text" id="slug" /><div id="message"></div>
<input type="submit" value="Submit" onclick="validateUsername('slug')" />
</form>

And then when the js validates everything as good you call the submit function:

Code:

    } else {
        document.getElementById(fld).style.background = 'White';
		document.getElementById('message').innerHTML  = '';
		document.getElementById("myform").submit();
    }

You can find all of this on http://www.w3schools.com/jsref/met_form_submit.asp or google something like "submit a form with js"

Mishu · 04-01-2012, 07:41 AM

I can't remember the syntax for look ahead regexps off the top of my head, so I've taken the quick and easy way out and use multiple regexps

Code:

        <form action="url1" method="post" onsubmit="return validateForm();">
            <input type="text" id="txtUsername" name="txtUsername" />
            <input type="submit" value="Submit" />
        </form>

        <script type="text/javascript">
            function validateForm(){
                var username = document.getElementById('txtUsername').value.replace(/^\s+|\s+$/g, "");
                return checkUsername(username);

            }
            function checkUsername(str){
                return (/^[a-zA-Z]/.test(str) && /^.+\d+/.test(str) && /^[\w\d]{8,}$/.test(str))? true : false;
            }
        </script>

niralupatel · 04-01-2012, 09:23 PM

Quote:

Originally Posted by sunfighter

Normally the opening form tag has a few more definitions in it; the action, the id, the method. It looks like this:

Code:

<form id="myform" action="form_action.php" method="post">

The submit button normally uses this info to send the form data to the form_action.php script which acts upon the data sent.

You are validating the form data using javascript before it is submitted. The submit button calls the js function using onclick instead of of the input using onblur, but they both call the js valadation function and when that finishes the js submits the form data.

Remove the onblur from:

Code:

<input type="text" id="slug" onblur="validateUsername('slug')" />

Add a submit button:

Code:

<form id="myform" action="ajax.php" method="post">
Name : <input type="text" id="slug" /><div id="message"></div>
<input type="submit" value="Submit" onclick="validateUsername('slug')" />
</form>

And then when the js validates everything as good you call the submit function:

Code:

    } else {
        document.getElementById(fld).style.background = 'White';
		document.getElementById('message').innerHTML  = '';
		document.getElementById("myform").submit();
    }

You can find all of this on http://www.w3schools.com/jsref/met_form_submit.asp or google something like "submit a form with js"

thanks i'll be spending lot more time on tht website now...