In this tutorial is presented a way to check /validate on the client side (with JavaScript) the values added in text fields in a form, the allowed characters (specified with RegExp) and their number.
Here it is presented a simple example, with 3 text fields. Takes the value from each text box, and then check one by one each box.
In the same way you can apply to forms with multiple text boxes and textarea. See the explanation below, and the comments in the code.
<i>- Name and Password must contain only numbers, letters and dashes '-', '_'.<br>
- Name between 3 and 18 characters, Password between 7 and 18 characters.</i>
<form action='#' method='post' onsubmit='return checkForm(this);'>
<label for='name1'>Name:</label> <input type='text' name='name1' id='name1' /><br>
<label for='pass1'>Password:</label> <input type='password' name='pass1' id='pass1' /><br>
<label for='email1'>E-mail:</label> <input type='text' name='email1' id='email1' /><br>
<input type='submit' name='fsubmit' id='fsubmit' value='Submit' />
</form>
<script>
// RegExp to allow only numbers, letters and dashes '-', '_'
var regx_chr = /^([a-zA-Z0-9_-]+)$/;
var regx_mail = /^([a-zA-Z0-9]+[a-zA-Z0-9._%-]*@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,4})$/; // RegExp for e-mail address
// Function accessed by 'onsubmit'
// gets the form fields and check /validate their value
function checkForm(frm1) {
var fre = false; // variabile returned by this function
// gets each text box
var name1 = frm1.name1;
var pass1 = frm1.pass1;
var email1 = frm1.email1;
// check the values (Name, Password, E-mail). If they are incorrect, it returns an alert, then selects that field
if(name1.value.length<3 || name1.value.length>18 || name1.value.search(regx_chr)==-1) {
alert('The Name must contain between 3 and 18 characters \nNumbers, Letters, - and _');
name1.select(); // select the field for Name
}
else if(pass1.value.length<7 || pass1.value.length>18 || pass1.value.search(regx_chr)==-1) {
alert('The Password must contain between 7 and 18 characters \nNumbers, Letters, - and _');
pass1.select(); // select the field for Password
}
else if(email1.value.search(regx_mail)==-1) {
alert('Add a correct e-mail address');
email1.select(); // select the field for E-mail
}
else fre = true;
return fre;
}
</script>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net