فعال / غیرفعال کردن دکمه بر اساس اعتبارسنجی در jQuery
در این آموزش jQuery , قصد داریم به شما نحوه فعال / غیرفعال کردن دکمه submit بر اساس نتیجه اعتبارسنجی فرم را به شما نمایش بدیم.در مثال های قبلی, نحوه اعتبارسنجی فرم ها در php با کلیک روی دکمه سابمیت را دیدم.در اینجا, ما یک فرم HTML به همراه دکمه غیرفعال را داریم. و سپس, آن را با در بر اساس اعتبارسنجی در jQuery فعال می کنیم.فرم HTML با دکمه غیرفعالاین کد به شما یک فرم HTML با دکمه ارسال از قبل غیرفعال شده را نشان می دهد.
Name
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 نهایت استفاده را برده باشید .