Jump to content

JavaScript validate input


Cod-nes

Recommended Posts

I want to use javascript to validate input of a username. I want the username to only allow letters and numbers, but I can't seem to do it. :)

function letnum (ele){ ele = document.getElementById(ele); var patt = RegExp('[a-zA-Z0-9]'); if(patt.test(ele.value)) { alert("ok"); } else { alert("Only letters and numbers allowed."); }}

Link to comment
Share on other sites

I think you need a "new" keyword preceding "RegExp()"And the expression you're using will validate as long as a single letter or number is found in the string, even if there are invalid characters.

Link to comment
Share on other sites

Make sure you recheck it in your php. This is extremely hackable. All anyone has to do is copy your page, remove the javascript, and submit the form to your php handling page. They can do it from their desktops if they wanted to.

Link to comment
Share on other sites

var re=/^[0-9a-z]{5,32}$/i /* Match from 5-32 digits or letters, case insensitive */if (re.test(ele.value)) ...http://www.w3schools.com/jsref/jsref_obj_regexp.asphttp://www.w3schools.com/jsref/jsref_regexp_test.asp
Thanks it works. ^^ By the way, what does the dollar sign do?
Make sure you recheck it in your php. This is extremely hackable. All anyone has to do is copy your page, remove the javascript, and submit the form to your php handling page. They can do it from their desktops if they wanted to.
Thanks. :)
Link to comment
Share on other sites

Hi!Try These Examples:

// EXAMPLE 1: E-Mail format checking script. if (document.formname.fieldname.value.length >0) {	 i=document.formname.fieldname.value.indexOf("@")	 j=document.formname.fieldname.value.indexOf(".",i)	 k=document.formname.fieldname.value.indexOf(",")	 kk=document.formname.fieldname.value.indexOf(" ")	 jj=document.formname.fieldname.value.lastIndexOf(".")+1	 len=document.formname.fieldname.value.length 	if ((i>0) && (j>(1+1)) && (k==-1) && (kk==-1) && (len-jj >=2) && (len-jj<=3)) { 	} 	else { 		alert("Please enter an exact email address.\n" +		document.formname.fieldname.value + " is invalid.");		return false; 	} } // EXAMPLE 2: Check if field has special characters.  var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";  for (var i = 0; i < document.formname.fieldname.value.length; i++) {  	if (iChars.indexOf(document.formname.fieldname.value.charAt(i)) != -1) {  	alert ("Your username has special characters. \nThese are not allowed.\n Please remove them and try again.");  	return false;  	}  } // EXAMPLE 3: Check if certian radio buttons have not been selected.    if (!document.formname.fieldname[0].checked &&    	!document.formname.fieldname[1].checked &&    	!document.formname.fieldname[2].checked &&    	!document.formname.fieldname[3].checked) {    	alert("Please choose a group designation.\n");    	return false;    }  // EXAMPLE 4: Check if textbox has any characters in it.     if (document.formname.fieldname.value.length == 0) {          alert("Please fill out your name.\n");	  return false;     }     // EXAMPLE 5: Check if multiple checkboxes have not been selected.Replace false with true to see if all are selected.     if (document.formname.fieldname.checked == false &&         document.formname.fieldname.checked == false &&	 document.formname.fieldname.checked == false) {	  	 alert("Please select at least one checkbox.\n");	 return false;     }  // EXAMPLE 6: Check drop down has been selected. Set drop down's value to Not_Selected for this to work.     if (document.formname.fieldname.value == 'Not_Selected') {          alert("Please provide us with a selection.\n");          return false;     } // EXAMPLE 7: Scan values in a field and if they are all letters then alert. The second block of code does the same but for numbers alert on finding all letters.    var noalpha = /^[a-zA-Z]*$/;if (noalpha.test(document.formname.fieldname.value)) {     alert("Please enter at least one number in the \"username\" field.");     return false;}// EXAMPLE 8: alert on finding all numbersvar nonums = /^[0-9]*$/;if (nonums.test(document.formname.fieldname.value)) {     alert("Please enter at least one letter in the \"username\" field.");     return false;} // EXAMPLE 9: Remove special characters from a string.function clearText() {     document.formname.fieldname.value=filterNum(document.formname.fieldname.value)     function filterNum(str) {          re = /\$|,|@|#|~|`|\%|\*|\^|\&|\(|\)|\+|\=|\[|\-|\_|\]|\[|\}|\{|\;|\:|\'|\"|\<|\>|\?|\||\\|\!|\$|\./g;          // remove special characters like "$" and "," etc...          return str.replace(re, "");     }}  // EXAMPLE 10: Detect special characters in text box. Or any character you subsitute for the special characters.     var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";        for (var i = 0; i < document.formname.fieldname.value.length; i++) {                if (iChars.indexOf(document.formname.fieldname.value.charAt(i)) != -1) {                     alert ("The box has special characters. \nThese are not allowed.\n");                     return false;                }        }

Link to comment
Share on other sites

One big problem with all of those examples: they use dot notation.Ex.document.formname.fieldnameThat's not the proper way to get a reference to an element. The correct way is to assign id's to elements and use getElementById to get a reference.Ex.HTML:<input type='text' name='textBox' id='txtOne' />JS:document.getElementById("txtOne")

Link to comment
Share on other sites

These All Are Form Based Examples My Friend...
That doesn't matter. Whether getting a reference for a form element or any other element you should always use getElementById.
<div id='aDiv'>This is a div</div><form action='' method='post'>   <input type='text' id='txtInput' name='textOne' /></form>

With the above code you would use getElementById to get a reference to the div and the input. Notice I don't have a name attribute on the form. That's because it's deprecated and shouldn't be used (thus making dot notation invalid).

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...