javascript - วิธีตั้งค่าข้อความตรวจสอบแบบกำหนดเองสำหรับฟอร์ม HTML?

ฉันมีฟอร์ม HTML ดังต่อไปนี้: http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

ปัจจุบันเมื่อฉันกด Enter เมื่อทั้งคู่ยังว่างอยู่ จะมีหน้าต่างป๊อปอัพขึ้นมาบอกว่า "กรุณากรอกข้อมูลในช่องนี้" ฉันจะเปลี่ยนข้อความเริ่มต้นนั้นเป็น "ช่องนี้ไม่สามารถเว้นว่างได้" ได้อย่างไร?

ข้อความข้อผิดพลาดของช่องรหัสผ่านชนิดนี้คือ ***** เพื่อสร้างซ้ำ ให้ใส่ค่าชื่อผู้ใช้แล้วกดส่ง

คำตอบ #1

นี่คือโค้ดบางส่วนเพื่อแสดงข้อความข้อผิดพลาดที่ปรับแต่งเอง:

<input type="text" id="username" required placeholder="Enter Name"
       oninvalid="this.setCustomValidity('Enter User Name Here')"
       oninput="this.setCustomValidity('')"/>

ส่วนนี้สำคัญเพราะมันซ่อนข้อความข้อผิดพลาดเมื่อผู้ใช้ป้อนข้อมูลใหม่:

oninput="setCustomValidity('')"

หมายเหตุ: คำสำคัญ this ไม่จำเป็นสำหรับตัวจัดการเหตุการณ์แบบอินไลน์ แต่คุณอาจต้องการใช้มันเพื่อความสอดคล้องกันก็ได้

คำตอบ #2

ใช้ setCustomValidity:

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

ฉันเปลี่ยนไปใช้ JavaScript แบบ vanilla แทน Mootools ตามที่ @itpastorn แนะนำในคอมเมนต์ แต่คุณก็น่าจะสามารถหาวิธีเทียบเท่า Mootools ได้หากจำเป็น

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

ดังที่ได้ชี้ให้เห็นในความคิดเห็นของ @thomasvdb ด้านล่าง คุณจำเป็นต้องลบความถูกต้องแบบกำหนดเองในเหตุการณ์บางอย่างนอกเหนือจาก invalid มิฉะนั้นอาจมีการผ่านตัวจัดการ oninvalid เพิ่มเติมเพื่อทำการลบมัน

คำตอบ #3

การควบคุมข้อความที่กำหนดเองด้วยความช่วยเหลือของ HTML5 event oninvalid นั้นง่ายมาก

นี่คือโค้ด:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

นี่คือสิ่งที่สำคัญที่สุด:

onvalid="this.setCustomValidity('')"

คำตอบ #4

หมายเหตุ: สิ่งนี้ไม่สามารถใช้งานได้ใน Chrome อีกต่อไป และยังไม่ได้ทดสอบบนเบราว์เซอร์อื่น ๆ ดูการแก้ไขด้านล่าง คำตอบนี้ถูกเก็บไว้ที่นี่เพื่ออ้างอิงทางประวัติศาสตร์

ถ้าคุณรู้สึกว่าข้อความการตรวจสอบไม่ควรถูกตั้งโดยโค้ด คุณสามารถตั้งแอตทริบิวต์ title ขององค์ประกอบอินพุตของคุณให้เป็น 'ช่องนี้ไม่สามารถเว้นว่างได้' (ใช้ได้ใน Chrome 10)

title="This field should not be left blank."

ดูที่ http://jsfiddle.net/kaleb/nfgfP/8/

และใน Firefox คุณสามารถเพิ่มแอตทริบิวต์นี้ได้:

x-moz-errormessage="This field should not be left blank."

แก้ไข

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

แก้ไข 2

ตอนนี้ Chrome ไม่ทำอะไรกับแอตทริบิวต์ title แล้วตั้งแต่ Chrome 51 ฉันไม่แน่ใจว่ามันเปลี่ยนในเวอร์ชันไหน

คำตอบ #5

การควบคุมข้อความที่กำหนดเองด้วยความช่วยเหลือของเหตุการณ์ oninvalid ของ HTML5 เป็นเรื่องง่ายมาก

นี่คือโค้ด:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

คำตอบ #6

โดยการตั้งค่าและยกเลิกการตั้งค่า setCustomValidity ในเวลาที่เหมาะสม ข้อความการตรวจสอบความถูกต้องจะทำงานได้อย่างไม่มีที่ติ

<input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" />

ฉันใช้ onchange แทน oninput ซึ่งเป็นวิธีที่ทั่วไปกว่าและเกิดขึ้นเมื่อค่าถูกเปลี่ยนในทุกเงื่อนไขแม้ผ่าน JavaScript

คำตอบ #7

ฉันได้สร้างไลบรารีขนาดเล็กเพื่อช่วยให้การเปลี่ยนแปลงและการแปลข้อความผิดพลาดง่ายขึ้น คุณยังสามารถเปลี่ยนข้อความตามประเภทของข้อผิดพลาดซึ่งในปัจจุบันยังไม่สามารถทำได้โดยใช้ title ใน Chrome หรือ x-moz-errormessage ใน Firefox ลองไปดูบน GitHub และให้ข้อเสนอแนะด้วย

มันถูกใช้แบบ:

<input type="email" required data-errormessage-value-missing="Please input something">

มีตัวอย่างสาธิตให้ดูที่ jsFiddle

คำตอบ #8

ลองอันนี้ดู มันดีกว่าและผ่านการทดสอบแล้ว:

    function InvalidMsg(textbox) {
        if (textbox.value === '') {
            textbox.setCustomValidity('Required email address');
        } else if (textbox.validity.typeMismatch){
            textbox.setCustomValidity('please enter a valid email address');
        } else {
           textbox.setCustomValidity('');
        }

        return true;
    }

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" />
    <input type="submit" />
</form>

ตัวอย่างสาธิต:

http://jsfiddle.net/patelriki13/Sqq8e/

คำตอบ #9

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

จาวาสคริปต์

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

และบางส่วนของ HTML5 ขั้นสุด

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>