如果在表单字段中定义了必填项，则Firefox 4会自动在该元素上显示一个红色边框，甚至在用户单击提交按钮之前也是如此。

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

我认为这会困扰用户，因为他/她一开始没有犯错。

我将其隐藏为初始状态的红色边框，但是如果有一个缺少的字段标记为必填项，则在用户单击“发送”按钮时显示该边框。

我查看了新的伪选择器，:required并:invalid从中选择了新的伪选择器，但是更改是针对验证之前和之后的。（来自Firefox 4必填的输入表单RED border / outline）

有没有一种方法可以在用户提交表单之前禁用红色边框，并在缺少某些字段时显示该边框？

这有点棘手，但是我设置了这个示例：http : //jsfiddle.net/c5aTe/，它对我有用。基本上，窍门似乎是绕过无效的占位符文本。否则，您应该可以执行以下操作：

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

或类似的东西

但是由于FF4决定验证您的占位符文本（不知道为什么...），因此需要小提琴中的解决方案（小技巧-使用!important）。

希望有帮助！

编辑

h！-我觉得很傻。我已经更新了小提琴：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如下（来自forms.css）：

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

要在其他浏览器中复制，我使用：

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

我玩过像素设置，但是如果不看moz信号源，我永远不会猜到1.5px。

要禁用它，您可以使用：

input:invalid {
    box-shadow: none;
}

这是一个对我有用的非常简单的解决方案。我基本上将丑陋的红色更改为非常漂亮的蓝色，这是非必需字段的标准颜色，并遵循Web约定：

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

这对我来说很好：

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

尝试：

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

请尝试一下

$（“ form”）。attr（“ novalidate”，true）;

全局.js文件或标头部分中的表单。