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

پاسخ هوش مصنوعی

برای جلوگیری از پاک شدن فیلدها پس از اعتبار سنجی و رفرش نشدن صفحه در استفاده از AJAX، شما می توانید از روش های زیر بهره برداری نمایید:

اولین مرحله این است که از AJAX برای ارسال فرم استفاده کنید تا نیازی به رفرش صفحه نباشد. جهت این کار می توانید با استفاده از jQuery AJAX فرم را ارسال کنید:

$(document).ready(function() {
    $('#yourFormId').submit(function(e) {
        e.preventDefault(); // جلوگیری از رفرش صفحه
        $.ajax({
            type: 'POST',
            url: 'Student_Profile.aspx',
            data: $(this).serialize(), // داده های فرم را ارسال کنید
            success: function(response) {
                // پردازش پاسخ از سرور
                $('#responseDiv').html(response);
            },
            error: function() {
                alert('Error occurred. Please try again.');
            }
        });
    });
});

در این جا:

• #yourFormId را با ID فرم خود جایگزین کنید.
• #responseDiv منطقه ای است که نتایج سرور در آن نمایش داده می شوند.

سپس در کد ASP خود، لازم است که پیامی که می خواهید به کاربر نشان دهید را به شکلی مناسب در response ارسال کنید. به عنوان مثال، می توانید پیامی بخوانید، و خطا را به صورت HTML ارسال کنید:

If strMelCode.Length < 10 Then
    Dim str1 As String = "
کد ملی بایستی 10 رقمی باشد
"
    Response.Write(str1)
Else
    ' ادامه پردازش فرم
    Response.Write("
فرم با موفقیت ارسال شد!
")
End If

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

اعتبارسنجی فیلدها توسط جی کوئری

قطعا برای اینکه صفحه شما رفرش نشود باید از اعتبارسنجی های سمت کلاینت استفاده بشه. این اعتبارسنجی توسط جاوا اسکریپت با جی کوئری انجام می شود. شما باید نحوه کار با ایجکس رو یاد بگیرید در مرحله اول. البته انجام این کار خیلی ساده است. براتون یک مثال رو به صورت ساده البته با استفاده از Asp.net Core می نویسم چون با Asp Classic کار نکردم ولی خب تفاوتی هم نمیکنه.

اعتبارسنجی فیلدها با استفاده از Jquery

در ابتدا فرض کنید form زیر را دارید.

<form>
    <input type='text' id='txtname' />
    <input type='text' id='txtfamily' />
    <input type='number' id='txtage' />


   <button type='submit' class='btn'>ثبت اطلاعات</button>
</form>

به صورت خیلی ساده 3 تگ input جهت ورود اطلاعات داریم. حالا شما میتونید با استفاده از دستورات جی کوئری به راحتی این فیلدها رو اعتبارسنجی کنید.

پس کدهای زیر رو به انتهای این form در View اضافه می کنیم.

<script>
   var myname = $("#txtname").val();
   var myfamily = $("#txtfamily").val();
   var myage = $("#txtage").val();

   if (myname == '' || myname == null)
   {
      alert('نام خالی است.');
      return false;
   }
   if (myfamily == '' || myfamly == null)
   {
      alert('نام خانوادگی وارد نشده است');
      return false;
   }
   if (myfamily.length() < 5)
   {
      alert('نام خانوادگی حداقل باید 5 کاراکتر باشد');
      return false;
   }
   if (myage < 10)
   {
      alert('سن نمی تواند کمتر از 10 سال باید');
      return false;
   }

   $.ajax({
     ....
   })
</script>

همونطوری که می بینید به راحتی فیلدها اعتبارسنجی شدن. شما هر اعتبار سنجی دیگه ای که بخواید هم میتونید انجام بدید.

اگر بخواید به صورت حرفه ای تری اعتبارسنجی رو انجام بدید میتونید از پلاگین jquery validation هم استفاده کنید.

Form Validation using Ajax

خیلی ساده و زیبا پاسخ دادید سپاسگذارم.

درود یک مسئله ای رو در پاسخ شما دقت نکردم  دوست عزیز، شما مسئله اعتبار سنجی منو اشتباه متوجه شدید کنترل مقدار یا نوع ورودی ها من در سمت کلاینت انجام نمیشه بلکه در سمت سرور است مشکل اینجاست

1- مقدار ورودی رو چک کن

2- اگر ورودی واردنشده بود یا مشمول شرط نبود پیامی نشان بده و از این روتین خارج شو.

برنامه برای نمایش پیام با sweetalert میره سمت کلاینت و بر میگرده به سرور و این باعث میشه کل جعبه متنهای روی صفحه من خالی بشن(صفحه رفرش بشه) در واقع المنتهای صفحه من همگی به مقدار اولیه ست بشن من می خواستم مانع این کار بشم و در سایتهای مختلف بهترین راهکار رو استفاده از ajax پیشنهاد کرده بودن که چون به آزاکس مسلط نیستم ناچارا المنتها رو از سمت کلاینت تبدیل کردم به سمت سرور  مثلاً

<"input type="text"> تبدیل شد به <asp:TextBox> و مشکل حل شد

درود دو عرض ادب ، مشکل هنوز باقی است شاید بیان من ناقص بوده

در صفحه وب سایت من که در asp.net است تعدادی ورودی وجود دارد مثلاً جعبه متن،دکمه،لیست بازشو و...

هر گاه من با یکی از اینها عملی انجام دهم مثل کلیک روی دکمه، تعییر گزینه در لیست بازشو یا فشار کلیدی خاص در جعبه متن یک روتین سمت سرور اجرا میشود مثلا مجموعه دستورات c# یا vb، فرضا پیامی ظاهر شده و پاسخی دریافت میشود اما موقع برگشت به صفحه تمام فیلدها به مقدار اولیه اشان بر می گردند یا ریست میشوند دوستان عزیز در سری های قبل زحمت کشیده با جاوا اسکریپ یا jquery پاسخ داده اند آیا راهی ندارد با امکانات خود زبان سمت سرور این مشکل حل شود؟