آخرین بازبینی: ۱۴۰۰/۱۰/۰۴

الزامی کردن تمام فیلدهای فرم با jQuery

برای الزامی کردن تمامی فیلدهای وارد شده در فرم با استفاده از جی‌کوئری می‌توانیم به شکل زیر عمل کنیم.

ابتدا به فرم مورد نظر یک شناسه تخصیص می‌دهیم و فیلدهای دلخواه را در آن درج می‌کنیم:

<form id="my-form">
	<label for="fname">نام</label>
	<input type="text" id="fname" name="fname">

	<label for="lname">نام خانوادگی</label>
	<input type="text" id="lname" name="lname">

	<label for="gender">جنسیت</label>
	<select name="gender" id="gender">
		<option value="0">انتخاب کنید</option>
		<option value="f">زن</option>
		<option value="m">مرد</option>
	</select>

	<input type="submit">
</form>

<label for="lname">نام خانوادگی</label>

<label for="gender">جنسیت</label>

<option value="0">انتخاب کنید</option>

</select>

</form>

سپس کدهای جاوااسکریپت زیر را به صفحه اضافه می‌کنیم:

$( pageLoad );

function pageLoad() {
	$( '#my-form' ).on( 'submit', formSubmit );
}

function formSubmit( evt ) {
	var errors = false;

	// all fields are required
	$( '#my-form' ).find( 'input[type=text], select' ).each( function( i, el ) {

		if(
			el.nodeName == 'INPUT' && el.value.trim() == '' ||
			el.nodeName == 'SELECT' && el.selectedIndex == 0
		) {
			el.focus();
			errors = true;
			return false;
		}

	} );

	if( errors ) {
		alert( 'وارد کردن اطلاعات تمامی فیلدها الزامی است' );
		evt.preventDefault();
		return;
	}

}

$( pageLoad );

function pageLoad() {

$( '#my-form' ).on( 'submit', formSubmit );

}

function formSubmit( evt ) {

var errors = false;

// all fields are required

$( '#my-form' ).find( 'input[type=text], select' ).each( function( i, el ) {

if(

el.nodeName == 'INPUT' && el.value.trim() == '' ||

el.nodeName == 'SELECT' && el.selectedIndex == 0

) {

el.focus();

errors = true;

return false;

}

} );

if( errors ) {

alert( 'وارد کردن اطلاعات تمامی فیلدها الزامی است' );

evt.preventDefault();

return;

}

عملکرد کدهای جاوااسکریپت بالا به این صورت است:

در کدهای بالا ابتدا روی رویداد submit فرم یک تابع تعریف می‌کنیم که پیش از ارسال فرم به سرور بررسی‌های لازم را انجام دهد.
هنگام submit فرم، ابتدا تمامی فیلدهای input متنی و تمامی selectهای موجود در فرم را جستجو می‌کنیم.
اگر مقدار وارد شده در input خالی باشد یا مقدار انتخاب شده در select اولین مورد باشد، فرض بر این است که کاربر فیلد مورد نظر را خالی گذاشته است.
در صورت خالی بودن هر یک از فیلدها، جستجو متوقف می‌شود و پیام خطا نمایش داده می‌شود.
پس از نمایش پیام خطا، با استفاده از preventDefault، ارسال فرم متوقف می‌شود و اولین فیلد خالی انتخاب می‌شود تا کاربر مقدار آن را وارد کند.

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

لازم به ذکر است که ارزیابی ورودی کاربر تنها در سمت فرانت‌اند کافی نیست و پیش از ذخیره‌سازی اطلاعات در سمت بک‌اند هم باید ارزیابی‌های مشابه را انجام دهید تا از ذخیره‌سازی اطلاعات ناقص یا نادرست جلوگیری شود.

۲ نظر در مورد «الزامی کردن تمام فیلدهای فرم با jQuery»

حسین می‌گوید: ۱۳۹۸/۱۰/۱۰ ساعت ۱۶:۴۴

سلام
ممنون
چطور میشه input هایی رو دریافت کرد که ویژگی required دارند؟

پاسخ
- روکا می‌گوید: ۱۳۹۸/۱۰/۱۰ ساعت ۱۶:۴۶
  
  با سلام
  در مقابل selector جی‌کوئری کد input به این صورت می‌شود
  input[type=text][required]
  
  پاسخ

الزامی کردن تمام فیلدهای فرم با jQuery

بیشتر بخوانید:

۲ نظر در مورد «الزامی کردن تمام فیلدهای فرم با jQuery»

دیدگاهتان را بنویسید لغو پاسخ