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 type="text/javascript"><!--
// 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>
When the Submit button is clicked (or Enter on a field) to submit the form, the event "onsubmit" is triggered. The code: "return checkForm(this);" calls and returns the result of the "checkForm()" function.
- "this" represents the current object, the form.
The function returns the value of a variable (fre) initially set false.
The parameter "frm1" stores the form, passed with "this".
The code "frm1.field_name" takes the field ("field_name" is the name of the field, added in the "name" attribute).
By adding the "value" keyword, it takes its value, then, with "length" gets the number of characters.
If the values ​​do not correspond with the data to be added, an alert displays a message, the "fre" variable remains false, which determines not submitting the form.
If the values ​​are correct, the last instruction: "else fre = true;" , sets the "fre" variable true, that determines submitting the form.

- The code above will create this form:
- Name and Password must contain only numbers, letters and dashes "-", "_".
- Name between 3 and 18 characters, Password between 7 and 18 characters.



Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Check and Validate characters in form fields

Last accessed pages

  1. HTTP Errors and Logging (39)
  2. Add, Change, and Remove Attributes with jQuery (35999)
  3. Select in MySQL, Output results in HTML Table (3789)
  4. jQuery Drag and Drop Rows between two similar Tables (6875)
  5. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8371)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)