Khi yêu cầu được xác định trong trường biểu mẫu, Firefox 4 tự động hiển thị đường viền màu đỏ cho phần tử này, ngay cả TRƯỚC KHI người dùng nhấn nút gửi.

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

Tôi nghĩ rằng điều này là đáng lo ngại cho người dùng vì họ không mắc lỗi ngay từ đầu.

Tôi muốn ẩn đường viền màu đỏ đó cho trạng thái ban đầu, nhưng hiển thị nó khi người dùng nhấn nút gửi nếu thiếu trường được đánh dấu là bắt buộc.

Tôi đã xem xét :requiredvà :invalidtừ bộ chọn giả mới, nhưng các thay đổi dành cho trước VÀ sau khi xác thực. (từ Firefox 4 Biểu mẫu nhập bắt buộc Viền / đường viền ĐỎ )

Có cách nào để tắt đường viền màu đỏ trước khi người dùng gửi biểu mẫu và hiển thị biểu mẫu đó nếu có một số trường bị thiếu không?

Điều này hơi phức tạp nhưng tôi đã thiết lập exmaple này: http://jsfiddle.net/c5aTe/ đang hoạt động cho tôi. Về cơ bản, thủ thuật dường như gặp phải là có văn bản giữ chỗ không hợp lệ. Nếu không, bạn có thể làm điều này:

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

hoặc cái gì đó tương tự ...

NHƯNG vì FF4 quyết định xác thực văn bản giữ chỗ của bạn (không biết tại sao ...) giải pháp trong fiddle (ít hack - sử dụng !important) là bắt buộc.

Hy vọng rằng sẽ giúp!

BIÊN TẬP

Làm đi !! - Tôi cảm thấy thật ngớ ngẩn. Tôi đã cập nhật fiddle của mình: http://jsfiddle.net/c5aTe/2/ - bạn có thể sử dụng :focuslớp giả để giữ cho phần tử được tạo kiểu như thể hợp lệ trong khi người dùng đang nhập. Điều này sẽ vẫn đánh dấu bằng màu đỏ nếu nội dung không hợp lệ khi mục đó mất tiêu điểm nhưng tôi nghĩ bạn chỉ có thể làm được nhiều điều với hành vi được thiết kế ...

HTH :)

CHỈNH SỬA sau khi chấp nhận:

Tóm tắt các ví dụ theo yêu cầu của OP (lưu ý hai ví dụ đầu tiên chỉ được thiết kế cho FF4 - không phải Chrome )

1. Sửa lỗi cho FF xác thực văn bản giữ chỗ của bạn: http://jsfiddle.net/c5aTe/
2. Sửa lỗi xác thực FF khi bạn nhập: http://jsfiddle.net/c5aTe/2
3. Giải pháp JS chuyển đổi kiểu / xác thực: http://jsfiddle.net/c5aTe/4

Kể từ Firefox 26, CSS thực tế được sử dụng để xác định các trường bắt buộc không hợp lệ như sau (đến từ form.css):

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

Để sao chép trong các trình duyệt khác, tôi sử dụng:

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

Tôi đã thử với các cài đặt pixel nhưng tôi sẽ không bao giờ đoán được 1.5px nếu không nhìn vào nguồn moz.

Để tắt nó, bạn có thể sử dụng:

input:invalid {
    box-shadow: none;
}

Đây là một giải pháp rất dễ dàng phù hợp với tôi. Về cơ bản tôi đã thay đổi màu đỏ xấu xí thành màu xanh lam rất đẹp, đây là màu tiêu chuẩn cho các trường không bắt buộc và quy ước web:

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

Điều này làm việc tốt cho tôi:

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

Thử:

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

Hãy thử cái này,

$ ("form"). attr ("novalidate", true);

cho biểu mẫu của bạn trong tệp .js chung của bạn hoặc trong phần tiêu đề.