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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post

    only a-z, A-Z, 0-1,_,- available

    ok so in my registration form i want user's name can only be filled with:

    a-z, A-Z, 0-9, - , _

    any other character will give the user an error.
    How do I do this?
    Formerly MysticScript

    6+ years club

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Code:
    if(!/\w\-_/.test(theText)) {
      bad
    }
    else {
      good
    }
    Trinithis

  • #3
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    err explain?
    Formerly MysticScript

    6+ years club

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Quote Originally Posted by Trinithis View Post
    Code:
    if(!/\w\-_/.test(theText)) {
      bad
    }
    else {
      good
    }
    It should be
    Code:
    if(/\w\-_/.test(theText)) {
      good
    }
    else {
      bad
    }
    @MysticScript
    What is happening is you define a regular expression(/\w-_/) containing the characters you want to allow that is compared to the users input if the input tests true and only has those characters then it passes and will execute the script normally (good) or it fails and does something else that you've defined (bad)

  • #5
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Can you put it in this:

    <input name='username' type='text'>


    :-)
    Formerly MysticScript

    6+ years club

  • #6
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Yeah you can but you would have to make it a function first like so:
    Code:
    function checkInput(el){
         if(/\w\-_/.test(el.value)) {
              good
         }else {
              bad
         }
    }
    Code:
    <input name='username' type='text' onchange="checkInput(this);" />

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by ninnypants View Post
    Yeah you can but you would have to make it a function first like so:
    Code:
    function checkInput(el){
         if(/\w\-_/.test(el.value)) {
              good
         }else {
              bad
         }
    }
    Code:
    <input name='username' type='text' onchange="checkInput(this);" />
    Sorry, but Trinithis is entirely correct.
    But \w means a-z A-Z 0-9 and underscrore, so _ is redundant.
    What about names with an apostrophe such as O'Neill? And I don't know of any proper names containing digits.

    The regex is not correct as it stands as if(/\w\-_/.test(el.value)) { means "if the value of el includes any (single) character from the range a-zA-Z0-9 or hyphen or underscore then return true (good)". So for example ***a&&& returns true as the letter a is found.

    What is wanted is the converse-

    If the value of el includes any (single) character other than a-zA-Z-_' then return false (bad).

    So I would suggest:-

    function
    Code:
    checkInput(el) {
    if (!/[a-z]\-\_\'/gi.test(el.value)) {     // ! means not    i means ignore case
    bad (return false)  }
    else {
    good (return true which is the default so the part in green is not necessary).
    }
    }

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 08-09-2008 at 08:51 AM. Reason: Code tags added

  • #8
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Wait so what happens if they get it wrong and return falses happens?

    Also, is this a good example?

    Code:
    <html><title>Hi</title>
    
    <head>
    <script>
    checkInput(el) {
    if (!/[a-z]\-\_\'/gi.test(el.value)) {     // ! means not    i means ignore case
    bad (return false)  }
    else {
    good (return true which is the default so the part in green is not necessary).
    }
    }
    </script>
    </head>
    <body>
    <input name='username' type='text' onchange="checkInput(el);" /><br><br><input value='Submit' type='submit'>
    </body>
    </html>
    Last edited by UrbanTwitch; 08-09-2008 at 06:49 PM.
    Formerly MysticScript

    6+ years club

  • #9
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    You can use it to stop the form from being submitted until they conform to the standard that you created

    Thanks Philip M for correcting me

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    function checkInput(el) {

    onchange = "checkInput(this)"

    If the test fails and the regex returns false then you need to have something like:-

    Code:
    alert ("Invalid entry.  Try again!");
    document.formname.elementname.value = "";  // clear the text box
    document.formname.elementname.focus();  // re-focus on the box 
    return false;
    Last edited by Philip M; 08-09-2008 at 11:00 PM.

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    I forgot to surround my regex with "[^" "]". Aka:
    Code:
    /[^\w\-_]/
    But as Philip pointed out, the underscore is redundant. If you want to make it smaller, you can take out the \ before the - in this case too.

    Philip's regex is incorrect as well. (Guess it wasn't our lucky days!)

    My new regex:
    Code:
    if(!/[^\w-]/.test(theText)) {
      bad
    }
    else {
      good
    }
    Trinithis

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Below are completely functional examples that do the job. My regular expression (/^[A-z0-9\-_]+$/) is slightly different from the previous ones.

    Live:


    HTML:
    Code:
    <!doctype html public "-//W3C//DTD HTML 4.01//EN">
    
    <html lang="en-Latn">
    	<head>
    
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<meta http-equiv="Content-Script-Type" content="application/ecmascript">
    		<meta http-equiv="Content-Style-Type" content="text/css">
    		<title>Demo for CodingForums.com Thread 146246 (HTML)</title>
    		<meta name="Author" content="Patrick Garies">
    		<meta name="Created" content="2008-08-09">
    		<meta name="Revised" content="2008-08-09">
    		<style type="text/css" media="all">
    			* { margin: 0; padding: 0; }
    			html, h1, input { font: 16px/1.2 sans-serif; }
    			html { background: #ded url("bg_c.png"); color: black; }
    			h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
    			a { color: black; }
    			p { padding: 1em; }
    			label::after { content: ":"; }
    			*#username_restrictions { margin: 1em 1em 0; background: #ddd; }
    			*#username_group { margin: 0 1em; padding: 1em; background: #eee; }
    			*#username_group + div { margin: 1em 3em 1em 1em; text-align: right; }
    			*#username_error { margin: 1em 0 0; border: 1px solid; background: crimson; color: palegoldenrod; font-weight: bolder; }
    			*#username_confirmation { margin: 1em; background: forestgreen; color: palegoldenrod; font-weight: bolder; }
    		</style>
    		<!--[if IE]>
    			<style type="text/css" media="all">
    				h1 { zoom: 1; filter: alpha(opacity=80); }
    			</style>
    		<![endif]-->
    
    	</head>
    	<body>
    
    		<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=146246">CodingForums.com Thread 146246</a></h1>
    		<form id="sign-up" method="post" action="">
    			<div>
    				<p id="username_restrictions">Usernames may contain the characters A&#xa0;through&#xa0;Z, a&#xa0;through&#xa0;z, 0&#xa0;through&#xa0;9, -, and _ and must be, at least, one character in length.</p>
    				<div id="username_group">
    					<label for="username">Select a Username</label>
    					<input id="username" name="username" type="text" size="36">
    				</div>
    				<div>
    					<input type="submit" value="Submit Username">
    				</div>
    			</div>
    		</form>
    		<!--[if !IE]>-->
    		<script type="application/ecmascript" defer="defer">
    			var d = document;
    			var signup = d.getElementById("sign-up");
    			var username = d.getElementById("username");
    			function check_username(event) {
    				if (username.value === "") {
    					event.preventDefault();
    					generate_username_error("Your username must be, at least, one character in length!");
    				}
    				else if (!/^[A-z0-9\-_]+$/.test(username.value)) {
    					event.preventDefault();
    					generate_username_error("The username " + username.value + " contains one or more invalid characters!");
    				}
    				else {
    					if (Boolean(d.getElementById("username_error"))) {
    						d.getElementById("username_error").parentNode.removeChild(d.getElementById("username_error"));
    					}
    				}
    			};
    			function generate_username_error(error_message) {
    				if (Boolean(d.getElementById("username_error"))) {
    					d.getElementById("username_error").firstChild.data = error_message;
    				}
    				else {
    					var username_error = d.createElement("p");
    					username_error.setAttribute("id", "username_error");
    					username_error.appendChild(d.createTextNode(error_message));
    					username.parentNode.appendChild(username_error);
    				}
    			}
    			signup.addEventListener("submit", check_username, false);
    			username.addEventListener("change", check_username, false);
    		</script>
    
    		<!--<![endif]-->
    		<!--[if IE]>
    			<script type="text/ecmascript" defer="defer">
    				var d = document;
    				var signup = d.getElementById("sign-up");
    				var username = d.getElementById("username");
    				function check_username(event) {
    					if (username.value === "") {
    						event.returnValue = false;
    						generate_username_error("Your username must be, at least, one character in length!");
    					}
    					else if (!/^[A-z0-9\-_]+$/.test(username.value)) {
    						event.returnValue = false;
    						generate_username_error("The username " + username.value + " contains one or more invalid characters!");
    					}
    					else {
    						if (Boolean(d.getElementById("username_error"))) {
    							d.getElementById("username_error").parentNode.removeChild(d.getElementById("username_error"));
    						}
    					}
    				};
    				function generate_username_error(error_message) {
    					if (Boolean(d.getElementById("username_error"))) {
    						d.getElementById("username_error").firstChild.data = error_message;
    					}
    					else {
    						var username_error = d.createElement("p");
    						username_error.setAttribute("id", "username_error");
    						username_error.appendChild(d.createTextNode(error_message));
    						username.parentNode.appendChild(username_error);
    					}
    				}
    				signup.attachEvent("onsubmit", check_username);
    				username.attachEvent("onchange", check_username);
    			</script>
    		<![endif]-->
    
    	</body>
    </html>
    XHTML:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    
    <html xml:lang="en-Latn" xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    
    		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"></meta>
    		<meta http-equiv="Content-Script-Type" content="application/ecmascript"></meta>
    		<meta http-equiv="Content-Style-Type" content="text/css"></meta>
    		<title>Demo for CodingForums.com Thread 146246 (XHTML)</title>
    		<meta name="Author" content="Patrick Garies"></meta>
    		<meta name="Created" content="2008-08-09"></meta>
    		<meta name="Revised" content="2008-08-09"></meta>
    		<style type="text/css" media="all"><![CDATA[
    			* { margin: 0; padding: 0; }
    			html, h1, input { font: 16px/1.2 sans-serif; }
    			html { background: #ded url("bg_c.png"); color: black; }
    			h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
    			a { color: black; }
    			p { padding: 1em; }
    			label::after { content: ":"; }
    			*#username_restrictions { margin: 1em 1em 0; background: #ddd; }
    			*#username_group { margin: 0 1em; padding: 1em; background: #eee; }
    			*#username_group + div { margin: 1em 3em 1em 1em; text-align: right; }
    			*#username_error { margin: 1em 0 0; border: 1px solid; background: crimson; color: palegoldenrod; font-weight: bolder; }
    			*#username_confirmation { margin: 1em; background: forestgreen; color: palegoldenrod; font-weight: bolder; }
    		]]></style>
    
    	</head>
    	<body>
    
    		<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=146246">CodingForums.com Thread 146246</a></h1>
    		<form id="sign-up" method="post" action="">
    			<div>
    				<p id="username_restrictions">Usernames may contain the characters A&#xa0;through&#xa0;Z, a&#xa0;through&#xa0;z, 0&#xa0;through&#xa0;9, -, and _ and must be, at least, one character in length.</p>
    				<div id="username_group">
    					<label for="username">Select a Username</label>
    					<input id="username" name="username" type="text" size="36"></input>
    				</div>
    				<div>
    					<input type="submit" value="Submit Username"></input>
    				</div>
    			</div>
    		</form>
    		<script type="application/ecmascript" defer="defer"><![CDATA[
    			var d = document;
    			var XHTML_NS = "http://www.w3.org/1999/xhtml";
    			var signup = d.getElementById("sign-up");
    			var username = d.getElementById("username");
    			function check_username(event) {
    				if (username.value === "") {
    					event.preventDefault();
    					generate_username_error("Your username must be, at least, one character in length!");
    				}
    				else if (!/^[A-z0-9\-_]+$/.test(username.value)) {
    					event.preventDefault();
    					generate_username_error("The username " + username.value + " contains one or more invalid characters!");
    				}
    				else {
    					if (Boolean(d.getElementById("username_error"))) {
    						d.getElementById("username_error").parentNode.removeChild(d.getElementById("username_error"));
    					}
    				}
    			};
    			function generate_username_error(error_message) {
    				if (Boolean(d.getElementById("username_error"))) {
    					d.getElementById("username_error").firstChild.data = error_message;
    				}
    				else {
    					var username_error = d.createElementNS(XHTML_NS, "p");
    					username_error.setAttributeNS(null, "id", "username_error");
    					username_error.appendChild(d.createTextNode(error_message));
    					username.parentNode.appendChild(username_error);
    				}
    			}
    			signup.addEventListener("submit", check_username, false);
    			username.addEventListener("change", check_username, false);
    		]]></script>
    
    	</body>
    </html>
    HTML with PHP:
    PHP Code:
    <?php
        ob_start
    ();
        
    header("Content-Type: text/html; charset=UTF-8");
        
    header("Content-Script-Type: application/ecmascript");
        
    header("Content-Style-Type: text/css");
    ?>
    <!doctype html public "-//W3C//DTD HTML 4.01//EN">

    <html lang="en-Latn">
        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta http-equiv="Content-Script-Type" content="application/ecmascript">
            <meta http-equiv="Content-Style-Type" content="text/css">
            <title>Demo for CodingForums.com Thread 146246 (HTML)</title>
            <meta name="Author" content="Patrick Garies">
            <meta name="Created" content="2008-08-09">
            <meta name="Revised" content="2008-08-09">
            <style type="text/css" media="all">
                * { margin: 0; padding: 0; }
                html, h1, input { font: 16px/1.2 sans-serif; }
                html { background: #ded url("bg_c.png"); color: black; }
                h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
                a { color: black; }
                p { padding: 1em; }
                label::after { content: ":"; }
                *#username_restrictions { margin: 1em 1em 0; background: #ddd; }
                *#username_group { margin: 0 1em; padding: 1em; background: #eee; }
                *#username_group + div { margin: 1em 3em 1em 1em; text-align: right; }
                *#username_error { margin: 1em 0 0; border: 1px solid; background: crimson; color: palegoldenrod; font-weight: bolder; }
                *#username_confirmation { margin: 1em; background: forestgreen; color: palegoldenrod; font-weight: bolder; }
            </style>
            <!--[if IE]>
                <style type="text/css" media="all">
                    h1 { zoom: 1; filter: alpha(opacity=80); }
                </style>
            <![endif]-->

        </head>
        <body>

            <h1>Demo for <a href="!146246!http://www.codingforums.com/showthread.php?t=146246">CodingForums.com Thread 146246</a></h1>
            <?php
                $validity_code 
    0;
                
    $error_message "";
                
    import_request_variables("p""FRV_");
                if (
    is_string($FRV_username) && $FRV_username === "") {
                    
    $validity_code 1;
                    
    $error_message "\n\t\t\t\t\t<p id=\"username_error\">Your username must be, at least, one character in length!</p>";
                }
                else if (
    is_string($FRV_username) && preg_match("/^[A-z0-9\-_]+$/"$FRV_username) === 0) {
                    
    $validity_code 2;
                    
    $error_message "\n\t\t\t\t\t<p id=\"username_error\">The username " $FRV_username " contains one or more invalid characters!</p>";
                }
                else if (
    is_string($FRV_username)) {
                    
    $validity_code 3;
                    echo 
    "<p id=\"username_confirmation\">Thank you. Your username, " $FRV_username ", has been successfully submitted!</p>";
                }
            
            if (
    $validity_code 3) {
                echo 
    "<form id=\"sign-up\" method=\"post\" action=\"\">
                <div>
                    <p id=\"username_restrictions\">Usernames may contain the characters A&#xa0;through&#xa0;Z, a&#xa0;through&#xa0;z, 0&#xa0;through&#xa0;9, -, and _ and must be, at least, one character in length.</p>
                    <div id=\"username_group\">
                        <label for=\"username\">Select a Username</label>
                        <input id=\"username\" name=\"username\" type=\"text\" size=\"36\">"
     
    $error_message "
                    </div>
                    <div>
                        <input type=\"submit\" value=\"Submit Username\">
                    </div>
                </div>
            </form>"
    ;
            }
            
    ?>

            <!--[if !IE]>-->
            <script type="application/ecmascript" defer="defer">
                var d = document;
                var signup = d.getElementById("sign-up");
                var username = d.getElementById("username");
                function check_username(event) {
                    if (username.value === "") {
                        event.preventDefault();
                        generate_username_error("Your username must be, at least, one character in length!");
                    }
                    else if (!/^[A-z0-9\-_]+$/.test(username.value)) {
                        event.preventDefault();
                        generate_username_error("The username " + username.value + " contains one or more invalid characters!");
                    }
                    else {
                        if (Boolean(d.getElementById("username_error"))) {
                            d.getElementById("username_error").parentNode.removeChild(d.getElementById("username_error"));
                        }
                    }
                };
                function generate_username_error(error_message) {
                    if (Boolean(d.getElementById("username_error"))) {
                        d.getElementById("username_error").firstChild.data = error_message;
                    }
                    else {
                        var username_error = d.createElement("p");
                        username_error.setAttribute("id", "username_error");
                        username_error.appendChild(d.createTextNode(error_message));
                        username.parentNode.appendChild(username_error);
                    }
                }
                signup.addEventListener("submit", check_username, false);
                username.addEventListener("change", check_username, false);
            </script>
            <!--<![endif]-->
            <!--[if IE]>
                <script type="text/ecmascript" defer="defer">
                    var d = document;
                    var signup = d.getElementById("sign-up");
                    var username = d.getElementById("username");
                    function check_username(event) {
                        if (username.value === "") {
                            event.returnValue = false;
                            generate_username_error("Your username must be, at least, one character in length!");
                        }
                        else if (!/^[A-z0-9\-_]+$/.test(username.value)) {
                            event.returnValue = false;
                            generate_username_error("The username " + username.value + " contains one or more invalid characters!");
                        }
                        else {
                            if (Boolean(d.getElementById("username_error"))) {
                                d.getElementById("username_error").parentNode.removeChild(d.getElementById("username_error"));
                            }
                        }
                    };
                    function generate_username_error(error_message) {
                        if (Boolean(d.getElementById("username_error"))) {
                            d.getElementById("username_error").firstChild.data = error_message;
                        }
                        else {
                            var username_error = d.createElement("p");
                            username_error.setAttribute("id", "username_error");
                            username_error.appendChild(d.createTextNode(error_message));
                            username.parentNode.appendChild(username_error);
                        }
                    }
                    signup.attachEvent("onsubmit", check_username);
                    username.attachEvent("onchange", check_username);
                </script>
            <![endif]-->

        </body>
    </html>
    XHTML with PHP:
    (Note: The forum keeps reformatting the second \n\t\t\t\t\t into nttttt for some reason.)
    PHP Code:
    <?php
        ob_start
    ();
        
    header("Content-Type: application/xhtml+xml; charset=UTF-8");
        
    header("Content-Script-Type: application/ecmascript");
        
    header("Content-Style-Type: text/css");
        echo 
    "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
    ?>

    <html xml:lang="en-Latn" xmlns="http://www.w3.org/1999/xhtml">
        <head>

            <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"></meta>
            <meta http-equiv="Content-Script-Type" content="application/ecmascript"></meta>
            <meta http-equiv="Content-Style-Type" content="text/css"></meta>
            <title>Demo for CodingForums.com Thread 146246 (XHTML)</title>
            <meta name="Author" content="Patrick Garies"></meta>
            <meta name="Created" content="2008-08-09"></meta>
            <meta name="Revised" content="2008-08-09"></meta>
            <style type="text/css" media="all"><![CDATA[
                * { margin: 0; padding: 0; }
                html, h1, input { font: 16px/1.2 sans-serif; }
                html { background: #ded url("bg_c.png"); color: black; }
                h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
                a { color: black; }
                p { padding: 1em; }
                label::after { content: ":"; }
                *#username_restrictions { margin: 1em 1em 0; background: #ddd; }
                *#username_group { margin: 0 1em; padding: 1em; background: #eee; }
                *#username_group + div { margin: 1em 3em 1em 1em; text-align: right; }
                *#username_error { margin: 1em 0 0; border: 1px solid; background: crimson; color: palegoldenrod; font-weight: bolder; }
                *#username_confirmation { margin: 1em; background: forestgreen; color: palegoldenrod; font-weight: bolder; }
            ]]></style>

        </head>
        <body>

            <h1>Demo for <a href="!146246!http://www.codingforums.com/showthread.php?t=146246">CodingForums.com Thread 146246</a></h1>
            <?php

                $validity_code 
    0;
                
    $error_message "";
                
    import_request_variables("p""FRV_");
                if (
    is_string($FRV_username) && $FRV_username === "") {
                    
    $validity_code 1;
                    
    $error_message "\n\t\t\t\t\t<p id=\"username_error\">Your username must be, at least, one character in length!</p>";
                }
                else if (
    is_string($FRV_username) && preg_match("/^[A-z0-9\-_]+$/"$FRV_username) === 0) {
                    
    $validity_code 2;
                    
    $error_message nttttt<p id="username_error\">The username " $FRV_username " contains one or more invalid characters!</p>";
                }
                else if (
    is_string($FRV_username)) {
                    
    $validity_code 3;
                    echo 
    "<p id=\"username_confirmation\">Thank you. Your username, " $FRV_username ", has been successfully submitted!</p>";
                }
            
            if (
    $validity_code 3) {
                echo 
    "<form id=\"sign-up\" method=\"post\" action=\"\">
                <div>
                    <p id=\"username_restrictions\">Usernames may contain the characters A&#xa0;through&#xa0;Z, a&#xa0;through&#xa0;z, 0&#xa0;through&#xa0;9, -, and _ and must be, at least, one character in length.</p>
                    <div id=\"username_group\">
                        <label for=\"username\">Select a Username</label>
                        <input id=\"username\" name=\"username\" type=\"text\" size=\"36\"></input>"
     
    $error_message "
                    </div>
                    <div>
                        <input type=\"submit\" value=\"Submit Username\"></input>
                    </div>
                </div>
            </form>"
    ;
            }
            
    ?>

            <script type="application/ecmascript" defer="defer"><![CDATA[
                var d = document;
                var XHTML_NS = "http://www.w3.org/1999/xhtml";
                var signup = d.getElementById("sign-up");
                var username = d.getElementById("username");
                function check_username(event) {
                    if (username.value === "") {
                        event.preventDefault();
                        generate_username_error("Your username must be, at least, one character in length!");
                    }
                    else if (!/^[A-z0-9\-_]+$/.test(username.value)) {
                        event.preventDefault();
                        generate_username_error("The username " + username.value + " contains one or more invalid characters!");
                    }
                    else {
                        if (Boolean(d.getElementById("username_error"))) {
                            d.getElementById("username_error").parentNode.removeChild(d.getElementById("username_error"));
                        }
                    }
                };
                function generate_username_error(error_message) {
                    if (Boolean(d.getElementById("username_error"))) {
                        d.getElementById("username_error").firstChild.data = error_message;
                    }
                    else {
                        var username_error = d.createElementNS(XHTML_NS, "p");
                        username_error.setAttributeNS(null, "id", "username_error");
                        username_error.appendChild(d.createTextNode(error_message));
                        username.parentNode.appendChild(username_error);
                    }
                }
                signup.addEventListener("submit", check_username, false);
                username.addEventListener("change", check_username, false);
            ]]></script>

        </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    WOW thanks!

    Hmm in HTML with PHP.

    Does

    Code:
    <?php
        ob_start();
        header("Content-Type: text/html; charset=UTF-8");
        header("Content-Script-Type: application/ecmascript");
        header("Content-Style-Type: text/css");
    ?>
    have to be at very top? Also... in the available characters can you add the SPACE also?
    Formerly MysticScript

    6+ years club

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    My regular expression (/^[A-z0-9\-_]+$/) is slightly different from the previous ones.
    I think you intend:-

    (!/^[A-z0-9\-_]+$/) // ! means not. That is, only the specified characters and no others are allowed. Your regex returns true if any of the specified characters are found in the string - which is quite different.

    One more time, proper or personal names do not contain digits, and you need to allow for names which contain an apostophe such as O'Reilly.

    Also A-z is not exactly the same as A-Za-z or a-z/i. The range A-z includes the ASCII characters 91-96 inclusive which are [/]^_ and grave accent. Presumably these are not desired. The correct regex is:-

    if (/[^a-z\s\-\_\']/gi.test(theText.value)) {

    That is, if any character other than those specified is found anywhere in the string, return true.

    As Arbitrator says, additional checks are needed to strip leading spaces and check that the field length is greater than zero:-

    theText.value = theText.value.replace(/^\s+/,"");
    if (theText.value.length == 0 ) {
    alert ("You must fill in a user name");
    return false
    }

    Edit:

    I now realise that the OP wants "user name" or screen name, which may include digits, (such as Philip99) as opposed to personal or proper name. So Abritrator's regex (as amended) (!/^[a-z0-9\-_]+$/i) is fine.

    My version of the regex is:-

    if (/[^a-z0-9\s\-\_]/gi.test(theText.value)) {

    That is, if any character other than those specified is found anywhere in the string, return true.
    But presumably leading or trailing spaces are not allowed so a preliminary test is necessary:-

    if (/(^\s)|(\s$)/.test(theText.value)) {
    alert ("Your user name may not begin with or end with a space");
    return false;
    }



    Haikus are easy
    But sometimes they don't make sense.
    Refrigerator.
    Last edited by Philip M; 08-10-2008 at 11:27 AM. Reason: Noted request to add space to permitted characters

  • #15
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by MysticScript View Post
    Does

    Code:
    <?php
        ob_start();
        header("Content-Type: text/html; charset=UTF-8");
        header("Content-Script-Type: application/ecmascript");
        header("Content-Style-Type: text/css");
    ?>
    have to be at very top? Also... in the available characters can you add the SPACE also?
    Based upon what Iíve read, ob_start() needs to be at the top. The purpose of ob_start() is so that the header function calls need not be the first things in the document; this is particularly useful if you encode your documents as UTF-8 with a byte order mark (BOM) since the BOM causes problems otherwise. Presumably, use of ob_start() would allow you to move the header function calls even further into the document.

    Quote Originally Posted by Philip M View Post
    I think you intend:-

    (!/^[A-z0-9\-_]+$/) // ! means not.
    If you look at my code, youíll see that Iíve used the not operator in the appropriate places. I didnít use it in the particular sentence that you quoted since that operator is (A) not a part of the regular expression and (B) not used when I use that regular expression in the PHP portion of the code.

    Quote Originally Posted by Philip M View Post
    Also A-z is not exactly the same as A-Za-z or a-z/i. The range A-z includes the ASCII characters 91-96 inclusive which are [/]^_ and grave accent. Presumably these are not desired.
    I wasnít aware of this; those additional characters were not desired. Iíll correct the demos (but not the post) when my server comes back up and Iíve verified your assertion to be correct (not that I really doubt it).
    Last edited by Arbitrator; 08-13-2008 at 09:21 AM. Reason: I added some missing |icode| tags.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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