ปิดใช้งานการตรวจสอบความถูกต้องขององค์ประกอบแบบฟอร์ม HTML5

ในรูปแบบของฉันฉันต้องการใช้รูปแบบ HTML5 ใหม่ตัวอย่างเช่น <input type="url" /> ( ข้อมูลเพิ่มเติมเกี่ยวกับประเภทที่นี่ )

ปัญหาคือ Chrome ต้องการที่จะเป็นประโยชน์และตรวจสอบองค์ประกอบเหล่านี้ให้ฉันยกเว้นว่ามันแย่มาก หากไม่ผ่านการตรวจสอบความถูกต้องภายในจะไม่มีข้อความหรือตัวบ่งชี้อื่นใดนอกจากองค์ประกอบที่ได้รับโฟกัส ฉันใส่องค์ประกอบ URL ไว้ล่วงหน้าด้วย"http://"ดังนั้นการตรวจสอบความถูกต้องที่กำหนดเองของฉันก็แค่ถือว่าค่าเหล่านั้นเป็นสตริงว่างเปล่า แต่ Chrome ก็ปฏิเสธสิ่งนั้น ถ้าฉันสามารถเปลี่ยนกฎการตรวจสอบของมันก็จะใช้ได้เช่นกัน

ฉันรู้ว่าฉันสามารถย้อนกลับไปใช้type="text"แต่ฉันต้องการการปรับปรุงที่ดีโดยใช้ข้อเสนอประเภทใหม่เหล่านี้ (เช่น: มันจะเปลี่ยนเป็นรูปแบบแป้นพิมพ์แบบกำหนดเองบนอุปกรณ์มือถือโดยอัตโนมัติ):

ดังนั้นมีวิธีปิดหรือปรับแต่งการตรวจสอบอัตโนมัติหรือไม่

หากคุณต้องการปิดการใช้งานการตรวจสอบด้านลูกค้าสำหรับรูปแบบใน HTML5 เพิ่มแอตทริบิวต์ novalidate ไปยังองค์ประกอบของรูปแบบ Ex:

<form method="post" action="/foo" novalidate>...</form>

ดูhttps://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

ฉันได้อ่านข้อมูลจำเพาะและทำการทดสอบบางอย่างใน Chrome และหากคุณพบเหตุการณ์ "ไม่ถูกต้อง" และส่งคืนเท็จที่ดูเหมือนว่าจะอนุญาตให้ส่งแบบฟอร์ม

ฉันใช้ jquery กับ HTML นี้

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

ฉันไม่ได้ทดสอบสิ่งนี้ในเบราว์เซอร์อื่น ๆ

ฉันแค่อยากจะเพิ่มว่าการใช้แอตทริบิวต์ novalidate ในแบบฟอร์มของคุณจะป้องกันไม่ให้เบราว์เซอร์ส่งแบบฟอร์ม เบราว์เซอร์ยังคงประเมินข้อมูลและเพิ่มคลาส pseudo ที่ถูกต้องและไม่ถูกต้อง

ฉันพบสิ่งนี้เพราะคลาสหลอกที่ถูกต้องและไม่ถูกต้องเป็นส่วนหนึ่งของสไตล์แผ่นชีทสำเร็จรูป HTML5 ซึ่งฉันใช้อยู่ ฉันเพิ่งลบรายการในไฟล์ CSS ที่เกี่ยวข้องกับคลาสหลอก หากใครพบวิธีอื่นโปรดแจ้งให้เราทราบ

ทางออกที่ดีที่สุดคือการใช้การป้อนข้อความและเพิ่ม attribute inputmode = "url" เพื่อจัดทำคีย์บอร์ด URL ข้อกำหนด HTML5 ถูกคิดเพื่อจุดประสงค์นี้ หากคุณเก็บ type = "url" คุณจะได้รับการตรวจสอบความถูกต้องทางไวยากรณ์ซึ่งไม่เป็นประโยชน์ในทุกกรณี (เป็นการดีกว่าที่จะตรวจสอบว่ามันส่งกลับข้อผิดพลาด 404 แทนที่จะเป็นไวยากรณ์ที่ค่อนข้างอนุญาตและไม่ใช่ความช่วยเหลือที่ดี)

นอกจากนี้คุณยังมีความเป็นไปได้ที่จะแทนที่รูปแบบเริ่มต้นด้วยรูปแบบของแอตทริบิวต์ = "https?: //.+" เพื่อให้อนุญาตมากขึ้น

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

การใช้ jQuery เพื่อปิดใช้งานการตรวจสอบความถูกต้องเป็นวิธีการแก้ปัญหาที่ไม่ดีเพราะมันจะทำงานได้โดยไม่ต้องใช้ JavaScript

ในกรณีของฉันฉันใส่องค์ประกอบที่เลือกมี 2 ตัวเลือก (http: // หรือ https: //) หน้าอินพุต URL เพราะฉันต้องการเว็บไซต์ (และไม่มี ftp: // หรือสิ่งอื่น ๆ ) ด้วยวิธีนี้ฉันหลีกเลี่ยงการพิมพ์คำนำหน้าแปลก ๆ (ความเสียใจที่ยิ่งใหญ่ที่สุดของ Tim Berners-Lee และอาจเป็นแหล่งที่มาหลักของข้อผิดพลาดทางไวยากรณ์ของ URL) และฉันใช้การป้อนข้อความอย่างง่ายด้วย inputmode = "url" กับตัวแทน (ไม่มี HTTP) ฉันใช้ jQuery และสคริปต์ฝั่งเซิร์ฟเวอร์เพื่อตรวจสอบการมีอยู่จริงของเว็บไซต์ (ไม่ใช่ 404) และเพื่อลบคำนำหน้า HTTP ถ้าใส่ (ฉันหลีกเลี่ยงการใช้รูปแบบเช่น pattern = "^ ((http)) * $" เพื่อป้องกันการใส่คำนำหน้าเพราะฉันคิดว่าเป็นการดีกว่าที่จะอนุญาตมากขึ้น)

แทนที่จะพยายามสิ้นสุดการตรวจสอบความถูกต้องของเบราว์เซอร์คุณสามารถใส่http://ข้อความเป็นตัวยึดตำแหน่ง นี่คือจากหน้าเว็บที่คุณเชื่อมโยง:

ข้อความตัวยึด

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

คุณอาจเคยเห็นข้อความตัวยึดตำแหน่งมาก่อน ตัวอย่างเช่น Mozilla Firefox 3.5 ตอนนี้มีข้อความตัวยึดในแถบตำแหน่งที่อ่าน“ ค้นหาบุ๊กมาร์กและประวัติ”:

เมื่อคุณคลิกที่ (หรือแท็บเพื่อ) แถบตำแหน่งข้อความตัวยึดจะหายไป:

กระแทกแดกดัน Firefox 3.5 ไม่สนับสนุนการเพิ่มข้อความตัวยึดในเว็บฟอร์มของคุณเอง C'est la vie

การสนับสนุนตัวแทน

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

นี่คือวิธีที่คุณสามารถรวมข้อความตัวยึดตำแหน่งในเว็บฟอร์มของคุณเอง:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

เบราว์เซอร์ที่ไม่รองรับplaceholderแอตทริบิวต์นั้นจะเพิกเฉย ไม่เป็นอันตรายไม่เหม็น ดูว่าเบราว์เซอร์ของคุณรองรับข้อความตัวยึดตำแหน่งหรือไม่

มันจะไม่เหมือนเดิมเพราะจะไม่ให้ "จุดเริ่มต้น" แก่ผู้ใช้ แต่อย่างน้อยก็ครึ่งทาง

ฉันพบวิธีแก้ปัญหาสำหรับ Chrome ด้วย CSS ตัวเลือกต่อไปนี้โดยไม่ต้องข้ามแบบฟอร์มการยืนยันดั้งเดิมซึ่งอาจมีประโยชน์มาก

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

ด้วยวิธีนี้คุณสามารถปรับแต่งข้อความของคุณ ...

ฉันได้คำตอบในหน้านี้: http://trac.webkit.org/wiki/Styling%20Form%20Controls

เพียงใช้novalidateในแบบฟอร์มของคุณ

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

ไชโย !!!

นี่คือฟังก์ชั่นที่ฉันใช้เพื่อป้องกันไม่ให้โครเมี่ยมและโอเปร่าแสดงกล่องโต้ตอบการป้อนข้อมูลที่ไม่ถูกต้องแม้ว่าจะใช้ novalidate

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

คุณสามารถเพิ่มจาวาสคริปต์เพื่อบีบอัดฟองการตรวจสอบที่น่ารังเกียจเหล่านั้นและเพิ่มเครื่องมือตรวจสอบของคุณเอง

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

หากคุณทำเครื่องหมายองค์ประกอบแบบฟอร์มrequired=""นั้นnovalidate=""ไม่ช่วย

วิธีที่จะหลีกเลี่ยงrequiredการตรวจสอบคือการปิดการใช้งานองค์ประกอบ

คุณสามารถติดตั้งส่วนขยาย chrome อย่างง่ายและเพียงปิดการใช้งานการตรวจสอบได้ทันที https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

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