Create Simple Form with validation using bootstrap and validator.js plug-ins

Features

1. Responsive form with bootstrap
2. Name validation (Alphanumeric values)
3. Email validation (include @ . and end with 2 digits)
4. Phone number validation (Ten digit numeric values)
5. Match password and confirm password validation
6. Radio button validation
7. Automatic error focus 
8. Hide Submit button when errors occur

Read only Field (Do not edit text field)

<input type="text" class="form-control" id="inputId" name="inputId" Value="00001" readonly style="cursor:no-drop" />

Required Field

<input type="text" class="form-control" id="inputName" name="inputName" placeholder="Enter Your Name" required>

Phone number validation

<input class="form-control" type="text" id="phone" name="phone" maxlength="10" pattern="[0-9]{10}" placeholder="Phone Number" required="required" />

Note: In table use “varchar=10” 

Alphanumeric with minimum one letter and maximum 15 letters

<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="" required>

Email validation

<input type="email" pattern="^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email" data-error="Hey, that email address is invalid" required>

Password validation

<input type="password" data-minlength="6" class="form-control" id="inputPassword" name="inputPassword" placeholder="Password" required>

Match password and confirm password

<input type="password" data-minlength="6" class="form-control" id="inputPassword" name="inputPassword" placeholder="Password" required>

<input type="password" class="form-control" id="inputPasswordConfirm" name="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>

Display error messages

<label>

<input type="checkbox" id="terms" name="terms" data-error="Before you wreck yourself" required>

Agree Terms & Conditions

</label>

<div class="help-block with-errors"></div>

Share on Google Plus

About Unknown

I am a PHP Developer and i am very much interested in learning Web Designing and Developing PHP Application. I am a Microsoft Certified Professional(MCP) member and also finished Microsoft Technology Associate(MTA) - Networking Fundamentals exam.