Only allow certain characters to be entered in html textinput

Solution 1:

You can change your input text as below:

<input type="text" pattern="[a-zA-Z0-9!@#$%^*_|]{6,25}" />

So the code changes look like below:

    <form action="#" method="get">
       User Name:<br />
       <input type="text" pattern="[a-zA-Z0-9!@#$%^*_|]{6,25}" /><br />
       Password:<br />
       <input type="password" /><br />
       <input type="submit" value="Log In" /> 
   </form>

This will work without using JavaScript. pattern can be used instead. It is more effective than JavaScript for form validation.

Solution 2:

use this

<script language="javascript">
document.logOn.onsubmit=validate;

function validate(){

var name=document.logOn.pw.value;
var reg=/[^a-zA-Z0-9\!\@\#\$\%\^\*\_\|]+/;
if(reg.test(name)){              
alert("Your Password Cant Have any thing other than a-zA-Z0-9!@#$%^*_| - Play It    Straight!");
return false;
}               

return true;
}

</script>