SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: form letters

  1. #1
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form letters

    in the form fields for username below how can i make it only let people type in numbers, letters and whitespaces?

    Code:
    							<b>Guest login</b><br>
    						<form name="authenticate" method="post" action="authguest.php">
    						<p align="center">&nbsp;<p align="center"><b>Username:</b>  <input name="username" type="text" value="" size="20"/><br>
    						<br>
    			<input type="submit" name="submit" value="Login"/>
    </form><br>
    	</br>
    	<b>Member login</b><br>
    	<form name="authenticate" method="post" action="authmember.php">
    					<p align="center">&nbsp;<p align="center"><b>Username:</b>  <input name="username" type="text" value="" size="20"/><br>
    					<b>Password:</b>  <input name="password" type="password" value="" size="20"/><br>
    					<br>
    		<input type="submit" name="submit" value="Login"/>
    </form>
    Animated Chatrooms - www.121chatrooms.net

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Place an identifier on each username input, called guestUsername and memberUsername respectfully.

    The guest username would then become

    Code HTML4Strict:
    <input name="username" id="guestUsername" type="text" value="" size="20" />

    And you would want to do something similar with the member one.

    use document.getElementById to retrieve each element, and use the onkeypress property to attach the name of a function to accept or reject the keystroke.

    The line to attach an event to the guest is

    Code Javascript:
    document.getElementById('guestUsername').onkeypress = validateKey;

    A similar line will attach the event to the member username.

    The function that processes the keystrokes will get it from the event, then use a regular expression to check if it's allowed.

    Code Javascript:
    function validateKey(evt) {
        // get event and key
        // check key
    }

    You can find that character that was pressed with evt.charCode || evt.keyCode

    Code Javascript:
    var evt = evt || window.event;
    var key = String.fromCharCode(evt.charCode || evt.keyCode);

    See http://www.quirksmode.org/js/keys.html for more details

    You can use a regular expression to check if the keypress is allowed. The regular expression to use would be /[0-9a-zA-Z\s]/

    If the keystroke fails the test you can disallow it by returning false. Returning anything else will allow it, although it's best to return true for the sake of clarity.

    Code Javascript:
    if (key.match(/[0-9a-zA-Z\s]/)) {
        return true;
    }
    return false;

    Code that up and let's see how it goes.
    Last edited by paul_wilkins; Feb 2, 2008 at 00:53.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm didnt do anything i just using it ont he guest form atm:

    Code:
    				<script type="text/javascript">
    				document.getElementById('guestUsername').onkeypress = validateKey;
    				function validateKey(evt) {    // get event and key    // check key}
    				var evt = evt || window.event;var key = String.fromCharCode(evt.charCode || evt.keyCode);
    				if (key.match(/[0-9a-zA-Z\s]/)) {    return true;}return false;
    				</script>
    
    				<b>Guest login</b><br>
    						<form name="authenticate" method="post" action="authguest.php">
    						<p align="center">&nbsp;<p align="center"><b>Username:</b>  <input name="username" type="text" value="" size="20"/><br>
    						<br>
    			<input type="submit" name="submit" value="Login"/>
    </form><br>
    	</br>
    	<b>Member login</b><br>
    	<form name="authenticate" method="post" action="authmember.php">
    					<p align="center">&nbsp;<p align="center"><b>Username:</b>  <input name="username" id="guestUsername" type="text" value="" size="20" /><br>
    					<b>Password:</b>  <input name="password" type="password" value="" size="20"/><br>
    					<br>
    		<input type="submit" name="submit" value="Login"/>
    </form>
    Animated Chatrooms - www.121chatrooms.net

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Move the id="guestUsername" off the member username and on to the guest username and try again.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still no difference

    Code:
    				<script type="text/javascript">
    				document.getElementById('guestUsername').onkeypress = validateKey;
    				function validateKey(evt) {    // get event and key    // check key}
    				var evt = evt || window.event;var key = String.fromCharCode(evt.charCode || evt.keyCode);
    				if (key.match(/[0-9a-zA-Z\s]/)) {    return true;}return false;
    				</script>
    
    				<b>Guest login</b><br>
    						<form name="authenticate" method="post" action="authguest.php">
    						<p align="center">&nbsp;<p align="center"><b>Username:</b>  <input name="username" id="guestUsername" type="text" value="" size="20" /><br>
    						<br>
    			<input type="submit" name="submit" value="Login"/>
    </form><br>
    	</br>
    	<b>Member login</b><br>
    	<form name="authenticate" method="post" action="authmember.php">
    					<p align="center">&nbsp;<p align="center"><b>Username:</b>  <input name="username" id="memberUsername" type="text" value="" size="20" /><br>
    					<b>Password:</b>  <input name="password" type="password" value="" size="20"/><br>
    					<br>
    		<input type="submit" name="submit" value="Login"/>
    </form>
    Animated Chatrooms - www.121chatrooms.net

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Because the script is above the form, when it runs it has no knowledge about the input elements.

    Place the script after the form, or preferably, at the bottom of the page, just before the closing body tag.
    Last edited by paul_wilkins; Feb 2, 2008 at 08:21.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do u mean like
    PHP Code:
                    <b>Guest login</b><br>
                            <
    form name="authenticate" method="post" action="authguest.php">
                            <
    p align="center">&nbsp;<p align="center"><b>Username:</b>  <input name="username" id="guestUsername" type="text" value="" size="20" /><br>
                            <
    br>
                <
    input type="submit" name="submit" value="Login"/>
    </
    form><br>
        </
    br>
        <
    b>Member login</b><br>
        <
    form name="authenticate" method="post" action="authmember.php">
                        <
    p align="center">&nbsp;<p align="center"><b>Username:</b>  <input name="username" id="memberUsername" type="text" value="" size="20" /><br>
                        <
    b>Password:</b>  <input name="password" type="password" value="" size="20"/><br>
                        <
    br>
            <
    input type="submit" name="submit" value="Login"/>
            
                            <
    script type="text/javascript">
                            
    document.getElementById('guestUsername').onkeypress validateKey;
                            function 
    validateKey(evt) {    // get event and key    // check key}
                            
    var evt evt || window.event;var key String.fromCharCode(evt.charCode || evt.keyCode);
                            if (
    key.match(/[0-9a-zA-Z\s]/)) {    return true;}return false;
                    
    </script>
                    
    </form> 
    because it not working
    Animated Chatrooms - www.121chatrooms.net

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You haven't properly closed off the function.

    The script should look like this:

    Code Javascript:
    document.getElementById('guestUsername').onkeypress = validateKey;
    function validateKey(evt) {
        // get event and key
        var evt = evt || window.event;
        var key = String.fromCharCode(evt.charCode || evt.keyCode);
        // check key
        if (key.match(/[0-9a-zA-Zs]/)) {
            return true;
        }
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks that works it dosnt let me use whitespaces tho how can i enable white spaces?
    Animated Chatrooms - www.121chatrooms.net

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The match section is different from the originally posted code.

    It is \s that denotes whitespace
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have noticed backspace dosnt work
    Animated Chatrooms - www.121chatrooms.net

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The backspace key is keycode number 8
    You can add that particular key as follows

    Code Javascript:
    document.getElementById('guestUsername').onkeypress = validateKey;
    function validateKey(evt) {
        // get event and key
        var evt = evt || window.event;
        var charCode = evt.charCode || evt.keyCode;
        if (charCode != 8) { // backspace
            var key = String.fromCharCode(charCode);
            // check key
            if (key.match(/[0-9a-zA-Zs]/)) {
                return true;
            }
            return false;
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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