เมื่อกำหนดจำเป็นในช่องแบบฟอร์ม Firefox 4 จะแสดงเส้นขอบสีแดงให้กับองค์ประกอบนี้โดยอัตโนมัติแม้กระทั่งก่อนที่ผู้ใช้จะกดปุ่มส่ง

<input type="text" name="example" value="This is an example" required />

ฉันคิดว่านี่เป็นการรบกวนผู้ใช้เนื่องจากเขา / เธอไม่ได้ทำผิดพลาดในตอนเริ่มต้น

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

ฉันดู:requiredและ:invalidจากตัวเลือกหลอกใหม่ แต่การเปลี่ยนแปลงมีไว้สำหรับก่อนและหลังการตรวจสอบความถูกต้อง (จากFirefox 4 รูปแบบการป้อนข้อมูลที่จำเป็นขอบสีแดง / โครงร่าง )

มีวิธีปิดใช้งานเส้นขอบสีแดงก่อนที่ผู้ใช้จะส่งแบบฟอร์มหรือไม่และแสดงว่ามีบางช่องที่หายไป

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

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

หรืออะไรที่คล้ายกัน ...

แต่เนื่องจาก FF4 ตัดสินใจที่จะตรวจสอบข้อความตัวยึดตำแหน่งของคุณ (ไม่รู้ว่าทำไม ... !important) จึงจำเป็นต้องใช้โซลูชันในซอ

หวังว่าจะช่วยได้!

แก้ไข

ดู๊ !! - ฉันรู้สึกงี่เง่า ฉันได้อัปเดตซอของฉัน: http://jsfiddle.net/c5aTe/2/ - คุณสามารถใช้:focusคลาสหลอกเพื่อให้องค์ประกอบมีสไตล์ราวกับว่าถูกต้องในขณะที่ผู้ใช้พิมพ์ สิ่งนี้จะยังคงเน้นเป็นสีแดงหากเนื้อหาไม่ถูกต้องเมื่อรายการสูญเสียโฟกัส แต่ฉันคิดว่ามีเพียงสิ่งเดียวที่คุณสามารถทำได้กับพฤติกรรมที่ออกแบบไว้ ...

HTH :)

แก้ไขหลังจากยอมรับ:

สรุปตัวอย่างตามคำขอของ OP (โปรดทราบว่าสองรายการแรกออกแบบมาสำหรับ FF4 เท่านั้นไม่ใช่ Chrome )

1. แก้ไข FF ตรวจสอบข้อความเจ้าของสถานที่ของคุณ: http://jsfiddle.net/c5aTe/
2. แก้ไขการตรวจสอบ FF ขณะที่คุณพิมพ์: http://jsfiddle.net/c5aTe/2
3. การสลับรูปแบบ / การตรวจสอบโซลูชัน JS: http://jsfiddle.net/c5aTe/4

ใน Firefox 26 CSS จริงที่ใช้ในการระบุฟิลด์บังคับที่ไม่ถูกต้องมีดังต่อไปนี้ (มาจาก form.css):

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

ในการทำซ้ำในเบราว์เซอร์อื่นฉันใช้:

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

ฉันเล่นกับการตั้งค่าพิกเซล แต่ฉันไม่เคยเดา 1.5px โดยไม่ดูแหล่งที่มาของโมซ

หากต้องการปิดใช้งานคุณสามารถใช้:

input:invalid {
    box-shadow: none;
}

ลอง:

document.getElementById('myform').reset();

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

:required {
    border-color: rgba(82, 168, 236, 0.8);
}

นี้ทำงานได้ดีสำหรับฉัน:

input:invalid {
     -moz-box-shadow: none;
}

โปรดลองสิ่งนี้

$ ("form"). attr ("novalidate", จริง);

สำหรับแบบฟอร์มของคุณในไฟล์. js ส่วนกลางของคุณหรือในส่วนส่วนหัว

วิธีที่ฉันพบอย่างน้อยที่สุดในการแก้ไขปัญหาคือ:

<input type="text" name="example" value="This is an example" onInput="this.required = true;" />

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