Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Username validation help

    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?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 629 Times in 628 Posts
    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>

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,438
    Thanks
    23
    Thanked 629 Times in 628 Posts
    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"

  • Users who have thanked sunfighter for this post:

    niralupatel (04-01-2012)

  • #5
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    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>
    Last edited by Mishu; 04-01-2012 at 08:30 AM.

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •