عدة طرق لتحويل النموذج باستخدام JS وتحقق (مقالة يجب قراءتها)

في العمل، لاحظت مشكلة سهولة إرسال النموذج، حيث أن بعض الأحيان يعمل النموذج بشكل جيد في متصفح Internet Explorer، ولكن عند استخدام Firefox يظهر مشكلة، ولا يعمل زر الارسال، وبالتالي نجح استخدام JavaScript، ولا أعرف لماذا. بعد دفع المشرف، قمت بتلخيص النماذج العشرة الشائعة لإرسال النموذج.

الطريقة الأولى:إرسال النموذج، أضف حدث onsubmit في علامة التبويب form للتحقق من نجاح إرسال النموذج

<script type="text/javascript">
   function validate(obj) {
    if (confirm("هل تريد تقديم النموذج؟")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="https://ar.oldtoolbag.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—لاحظ طريقة كتابة المعاملات-->
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
  </form>
</body>

الطريقة الثانية:تُشغل أحداث إرسال النموذج عن طريق زر button، حيث سيُتجاهل الخصائص الأخرى مثل خاصية onsubmit في علامة التبويب form. في هذه الحالة، من أجل إجراء التحقق من النموذج، يمكنك وضع كود التحقق داخل دالة submitForm();

<script type="text/javascript">
   function validate() {
    if (confirm("هل تريد تقديم النموذج؟")) {
      return true;
    } else {
      return false;
    }
   }
   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="https://ar.oldtoolbag.com" id="myForm">
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—يمكنك أيضًا استخدام document.getElementByIdx_x(“معرف الزر”).click(); لإجراء حدث onclick-->
  </form>
</body>

الطريقة الثالثة:ضع حدث onsubmit داخل علامة التبويب submit وليس داخل علامة التبويب form، في هذه الحالة يتعطل التحقق من النموذج، ويتم إرسال النموذج مباشرة عند النقر على زر الارسال

<script type="text/javascript">
   function validate() {
    if (confirm("هل تريد تقديم النموذج؟")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://ar.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
  </form>
</body>

الطريقة الرابعة:لإضافة أحداث onclick على زر submit، حيث يُستخدم هذا الحدث للتحقق من إرسال النموذج، ويعمل بشكل مشابه لإضافة حدث onsubmit في علامة التبويب form

<script type="text/javascript">
   function validate() {
    if (confirm("هل تريد تقديم النموذج؟")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://ar.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
  </form>
</body>

الطريقة الخامسة:

<body>
  <form action="https://ar.oldtoolbag.com" id="myForm">
  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>
  </form>
 </body>
  <script type="text/javascript">
   function validate() {
      if (confirm("هل تريد تقديم النموذج؟")) {
        return true;
      } else {
        return false;
      }
}

باستخدام زر button لتشغيل أحداث تقديم النموذج onclick="submitForm();"، سيتم تجاهل خصائص العناصر الأخرى، مثل خاصية onsubmit في علامة form. في هذه الحالة، يمكن وضع كود التحقق في دالة submitForm(); للتحقق من صحة النموذج

function submitForm() {
      if (validate()) {
        document.getElementByIdx_x("myForm").submit();
      }
   }
   document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>

هذا المقال الذي يستعرض عدة طرق لإنشاء نموذج HTML باستخدام JavaScript والتحقق من صحة البيانات (مقال يجب قراءته) هو كل ما قدمته لك. أتمنى أن يكون قدمنا لك بعض الفوائد وأن يدعمكم الجميع دليل النطق.

تعليمية الأساس

أفضل لك