Disable characters with javascript in form field

Dev Articles Community Forums Sponsor:

November 27th, 2003, 07:09 PM

velocityX

Contributing User

Join Date: Jun 2003

Posts: 72

Time spent in forums: 11 m 36 sec
Reputation Power: 6

Disable characters with javascript in form field

Does anyone know the code to disable everything except "a-z" and "_" in a form field?

December 1st, 2003, 12:01 AM

MadCowDzz

I'm Internet Famous

Dev Articles Frequenter (2500 - 2999 posts)

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 14 m 9 sec
Reputation Power: 8

Here's a simple javascript example using Regular Expressions:

Code:

<script>
	function validate() {
		var box = document.frm1.box;

	        re=/^[a-zA-Z\_]*$/;

	        if(!re.exec(box.value)) {
	            alert("Invalid Entry:\nOnly Alphabetic characters or Underscore allowed!");
	            box.focus();
	            return;
	        }//end name if
	}
</script>

<form name="frm1">
<input type="text" name="box" onchange="validate();">
</form>

I made the method call when the text is changed. Feel free to play around with onkeypress() or onblur()

Some good resources for Javascript Regular Expressions:
http://www.sitepoint.com/article/286
http://devedge.netscape.com/library...ide/regexp.html
http://www.webreference.com/js/column5/

__________________
Daryl's Homepage | My Blogroll | My Profile | Firefox supporter!
DevArticles Forum Moderator

"The net is a waste of time, and that's exactly what's right about it." -- William Gibson

December 1st, 2003, 02:31 AM

velocityX

Contributing User

Join Date: Jun 2003

Posts: 72

Time spent in forums: 11 m 36 sec
Reputation Power: 6

THX, now can you help me modify the code to allow numbers too?

I tried

PHP Code:


		
			
<script>

    function validate() {

        var box = document.frm1.box;



            re=/^[a-zA-Z_0-9]*$/;



            if(!re.exec(box.value)) {

                alert("Invalid Entry:\nOnly Alphabetic characters or Underscore allowed!");

                box.focus();

                return;

            }//end name if

    }

</script>



<form name="frm1">

<input type="text" name="box" onchange="validate();">

</form>

but it doesnt work if i put in stuff like @$%^%&@!*

December 1st, 2003, 09:27 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 14 m 9 sec
Reputation Power: 8

i haven't tested it, but try:
re=/^[0-9a-zA-Z\_]*$/;

December 1st, 2003, 07:46 PM

velocityX

Contributing User

Join Date: Jun 2003

Posts: 72

Time spent in forums: 11 m 36 sec
Reputation Power: 6

yup the number worked but i found out that it still lets the form continue on. Is there a small change that will empty that form field if the message pops up?

December 1st, 2003, 09:32 PM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 14 m 9 sec
Reputation Power: 8

Instead of doing a submit button (like i assume you have) you could make a regular button and make the onclick event call validate()

Wait, even better... make a seperate function like validateForm() which calls validate() then submits the form.

For example:

Code:

<script>
...
function validateForm() {
    if (validate()) {
       document.frm1.submit()
    }
}
...
</script>

Modify the code I gave you in an earlier post... where it says "return;", have it say return false... then add a return true to the end of the validate() function (but outside the if statement)

I hope this makes sense to you...
There's great examples of Javascript Form Validation on the internet... [check some of the links I posted early]

December 1st, 2003, 09:38 PM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 14 m 9 sec
Reputation Power: 8

I just noticed, an article was posted on Devshed today:

Validation with Javascript
http://www.devshed.com/Client_Side/...ript/page1.html

January 8th, 2005, 11:23 PM

Anibal

Contributing User

Join Date: Jan 2005

Posts: 176

Time spent in forums: 1 Day 4 h 20 m 48 sec
Reputation Power: 4

Hey Mate!. The code is quite nice. I'd suggest however to do the following:

1) place a parameter on the function like validate(txt) and after the alert part, set txt.value = "" (if you want, you can place a document.form...submit() if no error occurs)

2) call the function like this: <input type="text" name="..." onChange="validate(this)">

Hope this works...

Anibal

Quote:

Originally Posted by velocityX

yup the number worked but i found out that it still lets the form continue on. Is there a small change that will empty that form field if the message pops up?

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: