تمـ 
مع أن قليل استخدامي للـ jquery وما بعرف الدوال ,,, البركة بـ مصطفى ربنا يخليهولي :$:$
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("input, textarea, select").focus(function () {
var hint_form=$(this).next(".hint");
var id_name=($(this).attr("id"));
hint_form.empty();
$(this).next(".hint").addClass('tooltips');
if(id_name=="user"){
$(this).next(".hint").fadeIn().append("Please enter your " + id_name + ", between 4 and 8 characters");
}
else if (id_name=="password"){
$(this).next(".hint").fadeIn().append("Please enter your " + id_name + ", between 5 and 12 characters");
}
else if (id_name=="email"){
$(this).next(".hint").fadeIn().append("Please enter a valid " + id_name);
}
else {$(this).next(".hint").fadeIn().append("Please enter " + id_name);}
});
$("input, textarea, select").blur(function () {
var name=($(this).attr("name"));
var value=($(this).attr("value"));
var hint_form=$(this).next(".hint");
$(this).next(".hint").removeClass('tooltips')
$(this).next(".hint").fadeOut(400);
if(value==undefined)
{
hint_form.addClass('red')
hint_form.append("Required");
}
else if((name=="user") && (value==0 || value==null || value.length < 4 || value.length > 10))
{
//Validate user value (special characteres)
hint_form.fadeIn().empty().append("Please enter a valid User name");
hint_form.addClass('red')
}
else if((name=="password") && (value==0 || value==null || value.length < 5 || value.length > 12))
{
//Validate passward value
hint_form.fadeIn().empty().append("Please enter a valid passwaord");
hint_form.addClass('red')
}
else if((name=="email") && (value==0 || value==null || !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)))
{
//Validate E-mail value
hint_form.fadeIn().empty().append("Please Enter your valid Email ID");
hint_form.addClass('red')
}
});
});
//]]>
</script>
<style type="text/css">
.hint {
padding:5px 5px 5px 40px;
width:120px;
position:absolute;
margin: 2px 0 0 14px;
display:none;
background: #fffacd url(images/InlineHelpIcon.png) no-repeat center
left;
border: 1px solid #6495ed;
}
.tooltips {
display:inline;
}
.red {
color:#FF0000;
}
.green {
color:#00bb00;
}
</style>
</head>
<body>
<div>User Name<br>
<input id="user" type="text" name="user" />
<!--Enter User Name-->
<span class="hint"></span>
</div>
<div>Password<br>
<input id="password" type="password" name="password" />
<!--Enter Password-->
<span class="hint"></span>
</div>
<div>E-Mail<br>
<input id="email" type="text" name="email" />
<!--Enter E-Mail-->
<span class="hint"></span>
</div>
<div>Select<br>
<select id="select" name="select"></select>
<!--Select an option-->
<span class="hint"></span>
</div>
<div>Message<br>
<textarea id="messgae" name="message"></textarea>
<!--Your message here -->
<span class="hint"></span>
</div>
</body>
</html>
رد مع اقتباس
