Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
jQuery Validation Plugin to Validate Web Forms
WhatsApp
Manoj Bhoir
9y
30.4k
0
3
100
Article
jQuery.mbValidations.zip
Introduction
This article presents an example of using the jQuery.mbValidation plugin. Click here for the
Live Demo
of the jQuery.mbValidation plugin.
Background
The
jQuery.mbValidation Plugin
is an excellent tool for web pages to validate data entries at the client side using JavaScript. It is very easy to integrate this plugin into your web application and do many validations on web forms.
This is an Open Source project I have begun on Github for easy web application development, to simplify web page validations and to get maximum output with less coding.
Validation Properties
ForceOnlyNumeric:
This property used to allow only numbers or numeric values in input field
.
ForceOnlyAlpha:
This property used to allow only alphabets or numeric values in input field
.
ForceOnlyAlphaNumeric:
This property used to allow only alphabets and numbers or alpha/numeric values in input field
.
MaxLength(Number):
This property used to restrict maximum length of value in input field.
ForceAmount:
This property used to validate amount values in input field.
ForceEmail:
This property used to validate Email Id in input field.
ForceContactNumber:
This property used to validate contact number in input field.
MinLength(Number):
This property used to validate minimum length in input field.
ForceURL
: This property used to validate URL in input field.
Code
The structure of the attached Microsoft Visual Studio 2012 solution is as follows:
The
jQuery.mbValidation Plugin
relies on jQuery plugin to work, so I included the
jquery-1.10.2.js
file in the Scripts folder. You can also use the Compressed jQuery file that is
jquery.min.js
. I have added
jquery-ui.css
for the demo page and
mb-ui.css
that is required for the jQuery.mbValidatioin plugin.
Here is the structure of the
mb-ui.css
file.
You can customize the jQuery.mbValidation plugin error message by modifying this CSS file
.
body {
font
:
62.5%
"Trebuchet MS"
,
sans-serif
;
}
.custom-error {
z-index
:
1000
;
position
:
absolute
;
background-color
:
white
;
color
:
red
;
border
:
1px
solid
gray
;
padding
:
3px
;
font
:
62.5%
"Trebuchet MS"
,
sans-serif
;
border-radius:
5px
;
-moz-border-radius:
5px
;
-webkit-border-radius:
5px
;
font-size
:
1.1em
;
font-family
:
Verdana
,
Arial
,
sans-serif
;
}
The following is the demo page that is the
index.html
file:
<!DOCTYPE html
>
<
html
>
<
head
>
<
title
>
jQuery.mbValidation Demo
</
title
>
<
script
type
=
"text/javascript"
src
=
"Scripts/jquery-1.10.2.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/jquery-ui.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/jQuery.mbValidations.js"
>
</
script
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"Styles/mb-ui.css"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"Styles/jquery-ui.css"
/>
</
head
>
<
body
>
<
center
>
<
h2
>
jQuery.mbValidation Plugin Demo 1.0
</
h2
>
<
table
style
=
"font-size: 1.1em;font-family: Verdana,Arial,sans-serif;padding:1em"
>
<
tr
>
<
td
>
<
label
>
Enter Number Here :
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField1"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Enter Alphabet Here :
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField2"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Enter Number or Alphabet Here :
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField3"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Enter Text Having Length 8 Here:
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField4"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Enter Text With Minimum Length 3 Here:
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField9"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Enter Amount Here :
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField5"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Enter Email Id Here :
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField6"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Enter Contact Number Here :
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField7"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Enter Data For Required Field :
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField8"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Enter URL :
</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"txtDemoField10"
class
=
"text ui-widget-content ui-corner-all required"
/>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"text-align:center"
>
<
input
type
=
"checkbox"
id
=
"txtDemoField11"
name
=
"accept"
value
=
"accept"
class
=
"required"
>
I Agree
</
td
>
</
tr
>
<
tr
>
<
td
>
</
td
>
<
td
>
<
button
id
=
"btnValidate"
type
=
"button"
onClick
=
"PerformValidations();"
>
Validate
</
button
>
<
button
id
=
"btnClear"
type
=
"button"
onClick
=
"ClearRequiredMark();"
>
Clear
</
button
>
</
td
>
</
tr
>
</
table
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
$("#txtDemoField1").ForceOnlyNumeric();
$("#txtDemoField2").ForceOnlyAlpha();
$("#txtDemoField3").ForceOnlyAlphaNumeric();
$("#txtDemoField4").MaxLength(8);
$("#txtDemoField5").ForceAmount();
$("#txtDemoField6").ForceEmail();
$("#txtDemoField7").ForceContactNumber();
$("#txtDemoField9").MinLength(3);
$("#txtDemoField10").ForceURL();
});
$(function () {
$("#btnValidate").button();
$("#btnClear").button();
});
</
script
>
</
body
>
</
html
>
For required field validation specify
class="required"
for input and call
PerformValidations()
on the button's onClick event.
<
input
type
=
"text"
id
=
"txtDemoField1"
class
=
"required"
/>
<
button
id
=
"btnValidate"
type
=
"button"
onClick
=
"PerformValidations();"
>
Validate
</
button
>
Contribute
To contribute
FORK
jQuery.mbValidatioin Plugin on Github.
.Net
C#
HTML
Javascript
jQuery
Validatioins
Web Applicatioins
Up Next
Ebook Download
View all
Frontend Developer Interview Questions and Answers
Read by 950 people
Download Now!
Learn
View all
Membership not found