javascript - จะป้องกันไม่ให้ฟอร์มถูกส่งได้อย่างไร?

ฉันมีแบบฟอร์มที่มีปุ่มส่งอยู่ที่ไหนสักแห่ง

อย่างไรก็ตาม ฉันต้องการบางวิธีในการ 'จับ' เหตุการณ์การส่งและป้องกันไม่ให้มันเกิดขึ้น

มีวิธีที่ฉันสามารถทำสิ่งนี้ได้หรือไม่?

ฉันไม่สามารถแก้ไขปุ่มส่งได้ เพราะมันเป็นส่วนหนึ่งของคอนโทรลแบบกำหนดเอง

คำตอบ #1

ไม่เหมือนกับคำตอบอื่น ๆ การคืนค่า false เป็นเพียง ส่วนหนึ่ง ของคำตอบ พิจารณาสถานการณ์ที่เกิดข้อผิดพลาดของ JS ก่อนประโยค return...

เอชทีเอ็มแอล

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

สคริปต์

function mySubmitFunction()
{
  someBug()
  return false;
}

การส่งค่ากลับ false ที่นี่จะไม่ถูกดำเนินการและฟอร์มจะถูกส่งไม่ว่าจะอย่างไรก็ตาม คุณควรเรียกใช้ preventDefault เพื่อป้องกันการกระทำเริ่มต้นของฟอร์มสำหรับการส่งฟอร์มแบบ Ajax

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

ในกรณีนี้ แม้ว่าจะมีบั๊ก แบบฟอร์มก็จะไม่ส่ง!

อีกทางเลือกหนึ่ง สามารถใช้บล็อก try...catch ได้

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

คำตอบ #2

คุณสามารถใช้เหตุการณ์แบบอินไลน์ onsubmit แบบนี้ได้

<form onsubmit="alert('stop submit'); return false;" >

หรือ

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

ตัวอย่าง

ตอนนี้ อาจจะไม่ใช่ความคิดที่ดีเมื่อทำโครงการใหญ่ คุณอาจจำเป็นต้องใช้ตัวฟังเหตุการณ์ (Event Listeners)

โปรดอ่านเพิ่มเติมเกี่ยวกับ เหตุการณ์แบบ Inline กับ ตัวฟังเหตุการณ์ (addEventListener และ attachEvent ของ IE) ที่นี่ เพราะฉันไม่สามารถอธิบายได้มากไปกว่าที่ Chris Baker อธิบายไว้

ทั้งคู่ถูกต้อง แต่ไม่มีข้อใดที่ถือว่าเป็น "ดีที่สุด" โดยตัวของมันเอง และอาจมีเหตุผลที่นักพัฒนาตัดสินใจใช้ทั้งสองวิธี

คำตอบ #3

แนบ event listener ไปยังฟอร์มโดยใช้ .addEventListener() จากนั้นเรียกใช้เมธอด .preventDefault() บน event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

ฉันคิดว่านี่เป็นวิธีแก้ปัญหาที่ดีกว่าการกำหนดตัวจัดการเหตุการณ์ submit แบบ inline กับแอตทริบิวต์ onsubmit เพราะมันแยกตรรกะของเว็บเพจออกจากโครงสร้าง มันง่ายต่อการบำรุงรักษามากขึ้นเมื่อแยกตรรกะออกจาก HTML ดูเพิ่มเติม: JavaScript แบบไม่รุกราน (Unobtrusive JavaScript)

การใช้คุณสมบัติ .onsubmit ของวัตถุ DOM form ไม่ใช่ความคิดที่ดีเพราะมันป้องกันไม่ให้คุณแนบคอลล์แบ็กการส่งหลายรายการกับองค์ประกอบเดียว ดูที่ addEventListener เทียบกับ onclick

คำตอบ #4

งานต่อไปนี้ใช้ได้ในปัจจุบัน (ทดสอบใน Chrome และ Firefox):

<form onsubmit="event.preventDefault(); return validateMyForm();">

ที่ validateMyForm() เป็นฟังก์ชันที่คืนค่า false หากการตรวจสอบล้มเหลว ประเด็นสำคัญคือต้องใช้ชื่อ event เราไม่สามารถใช้เช่น e.preventDefault()

คำตอบ #5

ลองอันนี้ดู...

โค้ด HTML

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

โค้ด jQuery

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

หรือ

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

คำตอบ #6

เพื่อป้องกันไม่ให้ฟอร์มส่ง คุณเพียงแค่ทำสิ่งนี้

<form onsubmit="event.preventDefault()">
    .....
</form>

โดยการใช้โค้ดด้านบนนี้ จะช่วยป้องกันการส่งฟอร์มของคุณ