Make validating input form using JavaScript in HTML

How to Make validating input form using JavaScript in HTML – How to validate a Input in HTML form fields using JS

We all know the importance of validation in all manners. A web Developer must need to validate Input form to escape from Hacking or other unauthorized access. In this article we will learn how to make validating Input Form Using JavaScript in HTML. We will start from basic to some what high level of validation rules.

First we must have to know what is means by validate input? Answer is quit simple. Validation means rules and encapsulation of data entering in a specific field. for example you have to take input in a field label as Email. In term of its validation. The input  data in this field must have “@” sign and must have “.” character after “@” sign. These rules and specifications are called validation.

Mostly we use JS (JavaScript) for validation. You may also use Ajax and other Server side language. In this tutorial we will deal with easy way to validate simple input form in HTML sing JavaScript :) . you may also like to read how to create simple php forum or Discussion Board.

 

Validating Input Form Using JavaScript (Simple Form) :

<form>
<p>name</p>
<input type=”text” pattern=”\w*” required>
<p>email</p>
<input type=”text” pattern=”[a-zA-Z0-9_-]*\@[a-zA-Z]{1,9}\.[a-z]{3}” required>
<p> phone number(11 digits)</p>
<input type=”text” pattern=”\d{11}” required >
<input type=”submit”>
</form>

This is the simple form which will look like this :

Another JavaScript Validate Input Form with more fields :

<form name=”form1″ method=”post”>

<table cellspacing=”2″ cellpadding=”2″ border=”0″>
<tr>
<td align=”right”>First Name</td>
<td><input type=”text” name=”Firstname” required onclick=”fname() pattern=”[A-Za-z]{1,10}” title=”plz write only letter.”/></td>
</tr>
<tr>
<td align=”right”>LastName</td>
<td><input type=”text” name=”Lastname”  required pattern=”[A-Za-z]{1,10}” title=”plz write only letter.” /></td>
</tr>
<tr>
<td align=”right”>user name</td>
<td><input type=”text” name=”FullName” required  /></td>
</tr>
<tr>
<td align=”right”>Email</td>
<td><input type=”text” name=”Email”  onclick=”xname()” required  /></td>
</tr>
<tr>
<td align=”right”>Password</td>
<td><input type=”password”  name=”Password” onclick=”email()” required  /></td>
</tr>
<tr>
<td align=”right”>Re-password</td>
<td><input type=”password” name=”Re-password”  required  /></td>
</tr>
<tr>
<td>D.O.B</td>
<td><input type=”date”  name=”D.O.B”  required     /></td>
</tr>
<tr>
<td align=”right”>Mobile</td>
<td><input type=”text” name=”Mobile” required pattern=”[0-9]{11}” title=”plz write only digit.” /></td>
</tr>

<tr>
<td align=”right”>Country</td>
<td>
<select name=”Country”>
<option value=”-1″ selected>[choose yours]</option>
<option value=”1″>USA</option>
<option value=”2″>UK</option>
<option value=”3″>INDIA</option>
<option value=”4″>pakistan</option>
</select>
</td>
</tr>
<tr>
<td align=”right”>Zip Code</td>
<td><input type=”text” name=”Zip”   required pattern=”[0-9]{5}” title=”plz write only 5 digit.”/></td>
</tr>
<tr>

<td>Gender</td>
<td>
<input type=”radio”  name=”male” value=”male” required />Male<br>
<input type=”radio”  name=”male” value=”female” />female<br>
</td>

</tr>
<tr>
<td align=”right”></td>
<td><input type=”checkbox” name=”chk” required />I agree with Terms & Conditions</td>

</tr>

<tr>
<td align=”right”></td>
<td><input type=”submit” value=”Submit” /></td>
</tr>
</table>

</form>

Its output will be look like this :)

These are two simple and most basic example of Input validation. I hope you like it and enjoy it. Feel free to ask any question if you have. If you want to learn PHP, HTML, XHTML and other web development as well as designing language feel free to request us for tutorial. We will make tutorials for you. you may also like to Create Dynamic Website in PHP MySQL with admin Panel.