فعال / غیرفعال کردن دکمه بر اساس اعتبارسنجی در jQuery

در این آموزش jQuery , قصد داریم به شما نحوه فعال / غیرفعال کردن دکمه submit بر اساس نتیجه اعتبارسنجی فرم را به شما نمایش بدیم.در مثال های قبلی, نحوه اعتبارسنجی فرم ها در php با کلیک روی دکمه سابمیت را دیدم.در اینجا, ما یک فرم HTML به همراه دکمه غیرفعال را داریم. و سپس, آن را با در بر اساس اعتبارسنجی در jQuery فعال می کنیم.فرم HTML با دکمه غیرفعالاین کد به شما یک فرم HTML با دکمه ارسال از قبل غیرفعال شده را نشان می دهد.

Name

Email

Submit

123456789101112131415   Name                      Email                   Submit    فعال / غیرفعال کردن دکمه بر اساس اعتبارسنجی در jQueryاین اسکریپت jQuery , مقدار متنی وارد شده در فیلدهای نام و ایمیل را اعتبارسنجی می کند. در ابتدا بررسی می کند که هر دو از فیلدها خالی نباشند.حتما بخوانید  ساخت preloader با جی کوئری و CSS3و همچنین با الگوی regex (آموزش regular Expression) چک می کند که آیا فیلد ایمیل شامل آدرس ایمیل معتبر است یا خیر. همین که فرم اعتبارسنجی شد یک مقدار true برای فعال سازی دکمه سابمیت برگشت داده می شود.

function validate() { var valid = true; valid = checkEmpty($("#name")); valid = valid && checkEmail($("#email")); $("#btn-submit").attr("disabled",true); if(valid) { $("#btn-submit").attr("disabled",false); } } function checkEmpty(obj) { var name = $(obj).attr("name"); $("."+name+"-validation").html(""); $(obj).css("border",""); if($(obj).val() == "") { $(obj).css("border","#FF0000 1px solid"); $("."+name+"-validation").html("Required"); return false; } return true; } function checkEmail(obj) { var result = true; var name = $(obj).attr("name"); $("."+name+"-validation").html(""); $(obj).css("border",""); result = checkEmpty(obj); if(!result) { $(obj).css("border","#FF0000 1px solid"); $("."+name+"-validation").html("Required"); return false; } var email_regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,3})+$/; result = email_regex.test($(obj).val()); if(!result) { $(obj).css("border","#FF0000 1px solid"); $("."+name+"-validation").html("Invalid"); return false; } return result; }

امیدوارم از آموزش اعتبارسنجی در jQuery نهایت استفاده را برده باشید .

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

آدرس ایمیل شما منتشر نخواهد شد.