Text box validation alert message using jquery

The HTML Markup consists of TextBox to enable the validation when it is loss focused from textbox or unchecked respectively and a Button to trigger the RequiredField. Jquery textbox validation using jquery validation engine js files which is : jquery.validationEngine.js and jquery.validationEngine-en.js. I used the validationEngine.jquery.css for set the style for toggle messages.

jquery-validation

Include JS and CSS files

<link rel="stylesheet" href="styles/validationEngine.jquery.css" type="text/css" media="screen" />

<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.validationEngine.js"></script>
<script type="text/javascript" src="scripts/jquery.validationEngine-en.js"></script>

validationEngine.jquery.css CSS Code

<style>
/* Z-INDEX */
 .formError { z-index: 990; }
    .formError .formErrorContent { z-index: 991; }
    .formError .formErrorArrow { z-index: 996; }
    
    .formErrorInsideDialog.formError { z-index: 5000; }
    .formErrorInsideDialog.formError .formErrorContent { z-index: 5001; }
    .formErrorInsideDialog.formError .formErrorArrow { z-index: 5006; }

.inputContainer {
	position: relative;
	float: left;
}

.formError {
	position: absolute;
	top: 300px;
	left: 300px;
	display: block;
	cursor: pointer;
}

.ajaxSubmit {
	padding: 20px;
	background: #55ea55;
	border: 1px solid #999;
	display: none
}

.formError .formErrorContent {
	width: 100%;
	background: #0077C0;
	position:relative;
	color: #fff;
	width: 150px;
	font-size: 11px;
	border: 2px solid #ddd;
	box-shadow: 0 0 6px #000;
	-moz-box-shadow: 0 0 6px #000;
	-webkit-box-shadow: 0 0 6px #000;
	padding: 4px 10px 4px 10px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

.greenPopup .formErrorContent {
	background: #33be40;
}

.blackPopup .formErrorContent {
	background: #393939;
	color: #FFF;
}

.formError .formErrorArrow {
	width: 15px;
	margin: -2px 0 0 13px;
	position:relative;
}
body[dir='rtl'] .formError .formErrorArrow,
body.rtl .formError .formErrorArrow {
	margin: -2px 13px 0 0;
}

.formError .formErrorArrowBottom {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	margin: 0px 0 0 12px;
	top:2px;
}

.formError .formErrorArrow div {
	border-left: 2px solid #ddd;
	border-right: 2px solid #ddd;
	box-shadow: 0 2px 3px #444;
	-moz-box-shadow: 0 2px 3px #444;
	-webkit-box-shadow: 0 2px 3px #444;
	font-size: 0px;
	height: 1px;
	background: #0077C0;
	margin: 0 auto;
	line-height: 0;
	font-size: 0;
	display: block;
}

.formError .formErrorArrowBottom div {
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

.greenPopup .formErrorArrow div {
	background: #33be40;
}

.blackPopup .formErrorArrow div {
	background: #393939;
	color: #FFF;
}

.formError .formErrorArrow .line10 {
	width: 15px;
	border: none;
}

.formError .formErrorArrow .line9 {
	width: 13px;
	border: none;
}

.formError .formErrorArrow .line8 {
	width: 11px;
}

.formError .formErrorArrow .line7 {
	width: 9px;
}

.formError .formErrorArrow .line6 {
	width: 7px;
}

.formError .formErrorArrow .line5 {
	width: 5px;
}

.formError .formErrorArrow .line4 {
	width: 3px;
}

.formError .formErrorArrow .line3 {
	width: 1px;
	border-left: 2px solid #ddd;
	border-right: 2px solid #ddd;
	border-bottom: 0 solid #ddd;
}

.formError .formErrorArrow .line2 {
	width: 3px;
	border: none;
	background: #ddd;
}

.formError .formErrorArrow .line1 {
	width: 1px;
	border: none;
	background: #ddd;
}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

<style>

/* Z-INDEX */

.formError { z-index: 990; }

.formError .formErrorContent { z-index: 991; }

.formError .formErrorArrow { z-index: 996; }

.formErrorInsideDialog.formError { z-index: 5000; }

.formErrorInsideDialog.formError .formErrorContent { z-index: 5001; }

.formErrorInsideDialog.formError .formErrorArrow { z-index: 5006; }

.inputContainer {

position: relative;

float: left;

}

.formError {

position: absolute;

top: 300px;

left: 300px;

display: block;

cursor: pointer;

}

.ajaxSubmit {

padding: 20px;

background: #55ea55;

border: 1px solid #999;

display: none

}

.formError .formErrorContent {

width: 100%;

background: #0077C0;

position:relative;

color: #fff;

width: 150px;

font-size: 11px;

border: 2px solid #ddd;

box-shadow: 0 0 6px #000;

-moz-box-shadow: 0 0 6px #000;

-webkit-box-shadow: 0 0 6px #000;

padding: 4px 10px 4px 10px;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

}

.greenPopup .formErrorContent {

background: #33be40;

}

.blackPopup .formErrorContent {

background: #393939;

color: #FFF;

}

.formError .formErrorArrow {

width: 15px;

margin: -2px 0 0 13px;

position:relative;

}

body[dir='rtl'] .formError .formErrorArrow,

body.rtl .formError .formErrorArrow {

margin: -2px 13px 0 0;

}

.formError .formErrorArrowBottom {

box-shadow: none;

-moz-box-shadow: none;

-webkit-box-shadow: none;

margin: 0px 0 0 12px;

top:2px;

}

.formError .formErrorArrow div {

border-left: 2px solid #ddd;

border-right: 2px solid #ddd;

box-shadow: 0 2px 3px #444;

-moz-box-shadow: 0 2px 3px #444;

-webkit-box-shadow: 0 2px 3px #444;

font-size: 0px;

height: 1px;

background: #0077C0;

margin: 0 auto;

line-height: 0;

font-size: 0;

display: block;

}

.formError .formErrorArrowBottom div {

box-shadow: none;

-moz-box-shadow: none;

-webkit-box-shadow: none;

}

.greenPopup .formErrorArrow div {

background: #33be40;

}

.blackPopup .formErrorArrow div {

background: #393939;

color: #FFF;

}

.formError .formErrorArrow .line10 {

width: 15px;

border: none;

}

.formError .formErrorArrow .line9 {

width: 13px;

border: none;

}

.formError .formErrorArrow .line8 {

width: 11px;

}

.formError .formErrorArrow .line7 {

width: 9px;

}

.formError .formErrorArrow .line6 {

width: 7px;

}

.formError .formErrorArrow .line5 {

width: 5px;

}

.formError .formErrorArrow .line4 {

width: 3px;

}

.formError .formErrorArrow .line3 {

width: 1px;

border-left: 2px solid #ddd;

border-right: 2px solid #ddd;

border-bottom: 0 solid #ddd;

}

.formError .formErrorArrow .line2 {

width: 3px;

border: none;

background: #ddd;

}

.formError .formErrorArrow .line1 {

width: 1px;

border: none;

background: #ddd;

}

</style>

HTML Code

<form method="post" id="test">
Name : <input type="text" name="name" class="validate[required]" /><br /><br />
E-mail : <input type="text" name="email" class="validate[required]" /><br /><br />
<input type="submit" name="submit" value="submit" />
</form>

Name : <input type="text" name="name" class="validate[required]" /><br /><br />

E-mail : <input type="text" name="email" class="validate[required]" /><br /><br />

</form>

Include at the bottom of file

<script type="text/javascript">
$("#test").validationEngine('attach', {showOneMessage: true});
</script>

$("#test").validationEngine('attach', {showOneMessage: true});

</script>

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

Text box validation alert message using jquery

Recommended Posts:

webmentor