koolfayfer

معتبر کردن فرم
معتبر ساختن ورودی های یک فرم با جی کوئری

17 پست در این موضوع قرار دارد

سلام دوستان

من یک فرم تماس دارم که اونو با div و جی کوئری تقسیم بر 5 بخش کردم که هر کدام به صورت تکی نمایش داده شود و در صورت کلیک کرد بر روی مرحله بعد قسمت بعدی بیاد

تنها مشکلی که هست اینه که میخوام روی دکمه بعد کلیک کنه به صفحه بعد نره تا مقادیری رو که تعیین کردم رو پر کنه

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

آها منظورت فیلد الزامی و ... هست ؟

مثلا این شکلی میتونی چک کنی :

var a = $('.field-one');
if (a.val().length != 0){
  GoToNextPage ...
}
eles{
  DontGo ... 
}
  

 

ویرایش شده در توسط majid1889
2

به اشتراک گذاری این پست


لینک به پست
در 3 دقیقه قبل، majid1889 گفته است :

آها منظورت فیلد الزامی و ... هست ؟

مثلا این شکلی میتونی چک کنی :


var a = $('.field-one');
if (a.val().length != 0){
  GoToNextPage ...
}
eles{
  DontGo ... 
}
  

 

راستش تا بحال فیلد های الزامی رو اصلا کار نکردم

من همچین فرمی دارم:

<h2>First Page</h2>
<div>
	//بخشی از ورودی های فرم در اینجاست
</div>
<ul>
  <li>صفحه بعد</li>
</ul>

<h2>Second Page</h2>
<div>
	//بخشی از ورودی های فرم در اینجاست
</div>
<ul>
  <li>صفحه قبل</li>
  <li>صفحه بعد</li>
</ul>

<h2>Third Page</h2>
<div>
	//بخشی از ورودی های فرم در اینجاست
</div>
<ul>
  <li>صفحه قبل</li>
  <li>ارسال</li>
</ul>

بیس کلی فرمی که نوشتم اینجوریه اما توی صفحه دوم یه option دارم که اگه کلیک بشه صفحه سوم ظاهر میشه و اگه کلیک نشه گزینه ارسال در همون صفحه دوم ظاهر بشه و همه چی تموم بشه!

 

لطفا کمک کنید

 

با سپاس

0

به اشتراک گذاری این پست


لینک به پست

خب شما با کلیک روی کلید بعد/Next سکشن دوم رو نمایش بدید با جکویری

با تابع show , hide در جکویری یا fade , slide

2

به اشتراک گذاری این پست


لینک به پست
در 5 ساعت قبل، Parsa گفته است :

خب شما با کلیک روی کلید بعد/Next سکشن دوم رو نمایش بدید با جکویری

با تابع show , hide در جکویری یا fade , slide

اگه بخوام برای هر دکمه دستور بدم که دکمه های مختلف با دستور های مختلف میشه

اگه فرم من 10 اسلاید باشه و پیچیده تر...

من میخوام از یک دکمه برای بعدی استفاده کنم و یک دکمه برای قبلی خودش دیگه سکشنا رو بشناسه

جی کوئری استپ خوب بود اما مشکلاتی داشت و میخوام اینو دستی جلو برم

0

به اشتراک گذاری این پست


لینک به پست

شما یک کلاس یونیک به هر سکشن بدید مانند: slide-1 ... slide-10

بعد با یک متغییر که ++ و -- میشه اسلایدهارو نمایش بدید

2

به اشتراک گذاری این پست


لینک به پست
در 21 ساعت قبل، Parsa گفته است :

شما یک کلاس یونیک به هر سکشن بدید مانند: slide-1 ... slide-10

بعد با یک متغییر که ++ و -- میشه اسلایدهارو نمایش بدید

سپاس 3>

تازه جی کوئری رو شروع کردم میشه لطفا یه مثال کوچیک بزنید!

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

سلام و تبریک سال نو میلادی به همه از جمله مسیحیان ایران عزیز

دوستان کمک...

یه فرم کلی دارم به این شکل:

<form method="post">
    <fieldset class="part1">
    	Part 1
        <input type="text" placeholder="Name">
        <input type="text" placeholder="email">
        <input type="text" placeholder="number">
        <textarea rows="10" placeholder="Message"></textarea>
    </fieldset>
    <fieldset class="part2">
    	Part 2
        <input type="text" placeholder="City">
    </fieldset>
    <fieldset class="part3">
    	Part 3
        <input type="text" placeholder="Nickname">
    </fieldset>
    <input type="submit" value="Send">
</form>

و با این استایل:

fieldset
	{
		height:auto;
		background:#eee;
		border-radius:10px;
		border:none;
		margin-bottom:10px;
		padding:15px;
	}
	input,textarea
	{
		border:none;
		width:100%;
		margin-bottom:10px;
		padding:15px;
		box-sizing:border-box;
	}

میخوام که ابتدا پارت 1 نشون داده بشه و پایینش دکمه send وقتی روی send کلیک شد بگه که نام و پیغام ضروریه بعد از این که ضروری ها پر شد send زده شد پارت یک مخفی بشه و پارت 2 ظاهر بشه و فیلد پارت دو هم ضروری و بعد بره پارت 3 و اون ضروری نباشه که بعد از این سه پارت تازه فرم رو ارسال کنه

 

دوستان خواهشا کمک بسیار مهمه

 

حالا روش از این بهتر یا بهینه تر سراغ دارین بگین لطفا

 

منتظرم...

ویرایش شده در توسط koolfayfer
0

به اشتراک گذاری این پست


لینک به پست

کسی نبود بلد باشه؟

0

به اشتراک گذاری این پست


لینک به پست

این چطور شده ؟

https://jsfiddle.net/majid1889/vnkvkc2y/

فقط از حالت فرم خارجش کردم ک تو سایت ارور نده خودت تگ فرم رو اضافه کن بش ;)

 

5

به اشتراک گذاری این پست


لینک به پست
در 1 ساعت قبل، majid1889 گفته است :

این چطور شده ؟

https://jsfiddle.net/majid1889/vnkvkc2y/

فقط از حالت فرم خارجش کردم ک تو سایت ارور نده خودت تگ فرم رو اضافه کن بش ;)

 

یه دنیییییییییییییییییییییییییا سپاس

شیرمادر حلالت...

بووووووووس

یه لایک خدایی کمته...

0

به اشتراک گذاری این پست


لینک به پست
در 1 ساعت قبل، majid1889 گفته است :

این چطور شده ؟

https://jsfiddle.net/majid1889/vnkvkc2y/

فقط از حالت فرم خارجش کردم ک تو سایت ارور نده خودت تگ فرم رو اضافه کن بش ;)

 

 

راستی توی هر صفحه بخوام دکمه صفحه قبل بزارم و به جای سابمیت صفحه بعد باشه و در انتها بزنه سامیت چی؟

0

به اشتراک گذاری این پست


لینک به پست
در 16 ساعت قبل، koolfayfer گفته است :

 

راستی توی هر صفحه بخوام دکمه صفحه قبل بزارم و به جای سابمیت صفحه بعد باشه و در انتها بزنه سامیت چی؟

مرسی ممنون

شرمنده من از دیروز نبودم دیگه
اینو ی چک بکن :

https://jsfiddle.net/majid1889/vnkvkc2y/

2

به اشتراک گذاری این پست


لینک به پست
در در 1/4/2017 at 07:28، majid1889 گفته است :

مرسی ممنون

شرمنده من از دیروز نبودم دیگه
اینو ی چک بکن :

https://jsfiddle.net/majid1889/vnkvkc2y/

مجید خان دستم به دامنت

فرم یه کم پیچیده شد و کلا قاطی کردم و باید تحویل بدم اما نمی رسم

اگه محبت کنی انجام بدی برام ان شا الله از شرمندگیت در میام

لینک فرم:

http://s8.picofile.com/file/8281522942/form.zip.html

ببین کل فرم 5 بخشه...

ابتدا بخش اول ظاهر باشه با گزینه مرحله بعد

فیلدهای عنوان خود را وارد کنید و انتخاب شهر و استان و توضیحات الزامی

بعد که پر کرد بره مرحله بعدی

که توی این مرحله دکمه برگشت به مرحله قبل هم باشه

این مرحله آپلود تصاویر الزامی نیست و بتونه بره مرحله بعد

مرحله بعد یه نکته داره همون مرحله اطلاعات تکمیلی

توی این بخش مسئول آگهی مدت آگهی و نوع آگهی الزامی باشه که اگه نوع آگهی رو رایگان زد دیگه بخش پنجم ظاهر نشه و کار توی بخش چهارم که پیوست فایل هست بره برای درج آگهی در غیر این صورت اگر نوع آگهی رو ویژه زد بره مرحله بعد و در اونجا فایل پیوست کنه و در نهایت مرحله پنجم هم بره و در اونجا دکمه درج آگهی رو ببینه (توی هر مرحله هم که دکمه مرحله قبل رو داریم)

 

آقا مجید و سایر دوستان لطفا هر کدوم می تونید برام انجام بدید حد اکثر تا فردا باید تحویل بدم

ان شا الله از شرمندگیتون بیرون میام...

 

بامهر

0

به اشتراک گذاری این پست


لینک به پست

کسی نبود؟

0

به اشتراک گذاری این پست


لینک به پست

خب رفیق اینجوری ک شما سوال پرسیدی پروژه رو دادی میگی کامل کن باس حداقل دوبار همه ی کدها رو بخونیم تا بفهمیم تا اینجا چیکارا کردی ...

تیکه تیکه سوال بپرس هر جایی ب مشکل برخورده رو بگو حلش میکنیم

0

به اشتراک گذاری این پست


لینک به پست

سلام از پلاگین  jquery validate استفاده کنید ، پلاگین وردپرس نیست ....  پلاگین  جکوئری هست

مخصوص همین کارا هست .....

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط unid_user
      سلام و درود
      دوستان گرامی من با تابع addclass در جی کوئری به مشکل خوردم. می خوام کلاس buy-butt رو به یک تگ a خاص اضافه کنم اما جواب نمیده!؟
      $( ".package-info .textwidget p a" ).addClass( "buy-butt" );  
    • توسط unid_user
      سلام و درود
      دوستان من یه سری کد نوشتم که توی یه گالری تصاویر استفاده میشه. متاسفانه برای هر تصویر باید این کدها تکرار بشه و خوب توی داینامیک کردن با وردپرس قطعا به مشکل میخورم. می خواستم بدونم راهی وجود داره که من این کدهای جی کوئری رو طوری بنویسم که با اضافه کردن هر توصویر کدهای جی کوئری رو اتوماتیک اضافه کنه؟
      ممنون.
      کدهای html:
      <table id="gallery"> <tr> <td> <div class="image"> <img src="images/img1.jpg" alt="" id="img1"> </div> </td> <td> <div class="image"> <img src="images/img2.jpg" alt="" id="img2"> </div> </td> <td> <div class="image"> <img src="images/img3.jpg" alt="" id="img3"> </div> </td> </tr> <tr> <td> <div class="image"> <img src="images/img4.jpg" alt="" id="img4"> </div> </td> <td> <div class="image"> <img src="images/img5.jpg" alt="" id="img5"> </div> </td> <td> <div class="image"> <img src="images/img6.jpg" alt="" id="img6"> </div> </td> </tr> </table> <div id="bigimage"> <div id="close"></div> <img src="" alt=""> <div id="next"></div> <div id="prev"></div> </div> کدهای css:
      .image:hover { cursor: pointer; } .image img { border: 2px solid #333; border-radius: 5px; } .image:hover img { transform: scale(0.98); } #bigimage { height: 100vh; width: 100%; background-color: rgba(0,0,0,.8); position: fixed; top: 0; left: 0; display: none; } #bigimage img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 5px; } #bigimage #close { height: 40px; width: 45px; position: sticky; top: 30px; right: 40px; background: transparent url('../images/cancel.png') no-repeat center center /contain; background-size: 24px; } #bigimage #close:hover { cursor: pointer; } #next { height: 100px; width: 30px; background: transparent url('../images/arrow_right.png') no-repeat center center /contain; background-size: 32px; line-height: 100px; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); } #next:hover { cursor: pointer; } #prev { height: 100px; width: 30px; background: transparent url('../images/arrow_left.png') no-repeat center center /contain; background-size: 32px; line-height: 100px; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); } #prev:hover { cursor: pointer; کدهای جی کوئری:
      $(document).ready(function() { flag=0; $("#img1").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img1.jpg'); flag=1; }); $("#img2").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img2.jpg'); flag=2; }); $("#img3").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img3.jpg'); flag=3; }); $("#img4").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img4.jpg'); flag=4; }); $("#img5").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img5.jpg'); flag=5; }); $("#img6").click(function() { $("#bigimage").fadeIn(); $("#bigimage img").attr('src', 'images/img6.jpg'); flag=6; }); $("#close").click(function() { $("#bigimage").fadeOut(); }); $("#next").click(function() { if (flag==1) { $("#bigimage img").attr('src', 'images/img1.jpg'); flag=2; } else if (flag==2) { $("#bigimage img").attr('src', 'images/img2.jpg'); flag=3; } else if (flag==3) { $("#bigimage img").attr('src', 'images/img3.jpg'); flag=4; } else if (flag==4) { $("#bigimage img").attr('src', 'images/img4.jpg'); flag=5; } else if (flag==5) { $("#bigimage img").attr('src', 'images/img5.jpg'); flag=6; } else if (flag==6) { $("#bigimage img").attr('src', 'images/img6.jpg'); flag=1; } }); $("#prev").click(function() { if (flag==1) { $("#bigimage img").attr('src', 'images/img6.jpg'); flag=6; } else if (flag==2) { $("#bigimage img").attr('src', 'images/img1.jpg'); flag=1; } else if (flag==3) { $("#bigimage img").attr('src', 'images/img2.jpg'); flag=2; } else if (flag==4) { $("#bigimage img").attr('src', 'images/img3.jpg'); flag=3; } else if (flag==5) { $("#bigimage img").attr('src', 'images/img4.jpg'); flag=4; } else if (flag==6) { $("#bigimage img").attr('src', 'images/img5.jpg'); flag=5; } }); });  

    • توسط unid_user
      سلام و دورود
      دوستان من یه اسلایدر ساختم که متاسفانه بخش جی کوئری و کدهای جاوا اسکریپت کار نمیکنه!؟
      ممنون
      کد جاوا اسکریپت:
      $(document).ready(function(){ $("a:nth-child(1)").css("background-color","white"); $("#circle1").click(function(){ $("#slider").animate({'left':'5%'},500); $("#data").fadeIn(700); $("#data2,#data3,#data4").fadeOut(500); $(".line").animate({'left':'60%'}); $("a:nth-child(1)").css("background-color","white"); $("a:nth-child(2),a:nth-child(3),a:nth-child(4)").css("background-color","black"); }); $("#circle2").click(function(){ $("#slider").animate({'left':'-30%'},500); $("#data2").fadeIn(700); $("#data,#data3,#data4").fadeOut(500); $(".line").animate({'left':'25%'}); $("a:nth-child(2)").css("background-color","white"); $("a:nth-child(1),a:nth-child(3),a:nth-child(4)").css("background-color","black"); }); $("#circle3").click(function(){ $("#slider").animate({'left':'-190%'},500); $("#data3").fadeIn(700); $("#data,#data2,#data4").fadeOut(500); $(".line").animate({'left':'55%'}); $("a:nth-child(3)").css("background-color","white"); $("a:nth-child(1),a:nth-child(2),a:nth-child(4)").css("background-color","black"); }); $("#circle4").click(function(){ $("#slider").animate({'left':'-240%'},500); $("#data4").fadeIn(700); $("#data,#data2,#data3").fadeOut(500); $(".line").animate({'left':'25%'}); $("a:nth-child(4)").css("background-color","white"); $("a:nth-child(1),a:nth-child(2),a:nth-child(3)").css("background-color","black"); }); });  
      site_4.zip
    • توسط unid_user
      سلام و درود
      دوستان گرامی، من می خوام کدی رو معرفی بفرمایید که وقتی روی تصویر شاخص در یک پست کلیک میکنم تصویر در سایز بزرگ به صورته آنچه که در سایت زیر مشاهده می فرمایید به نمایش در بیاد.
      سپاس و تشکر.
      نمونه سایتی که گفتم.
    • توسط kias
      با عرض سلام 
      من سایتم رو طبق اموزش هایی که گزاشته بودن و مطالبی که خوندم تو انجکن چون با کلمه کلیدی من تو صفحه گوگل نمیومد بهینه کردم طبق فرمایش یکی از دوستان با gtmrtix
      بعد از اینکه بهینه کردم و کار تموم شد دیگه قالب درست کار نمیکنه مثلا اسلایدر هدر کار نمیکنه اسلایدر وبلاگ از کار افتاده ایکون هام حذف شدن
      و تو موبایل هم علاوه بر اینا بعضی دکمه ها کثل فهرست ها دیگه باز نمیشه و کار نمیکنه 
      سرچ کردم فهمیدم از جی کوئری هست ولی چون هیچی از کد نویسی نمیدونم کسی هست بتونه کمکم کنه که مشکلم حل بشه لطفا
      با سپاس
       [visabook . [ir