删除必填字段的默认红色边框

Question

我在表单中有一些必填字段。对于必填字段，我希望1px红色边框用于在表单提交后突出显示表单字段。 Chrome正在做到这一点。 IE正在给出默认和宽边界的麻烦。如何摆脱那些？

HTML源代码：

<div class="tableRow">
    <div class="tableCell fieldCaption borderBottom normalFontWeight">{{'_PHONE_'|i18n}}<span class="mandetory">*</span></div>
    <div class="tableCell fieldValue borderBottom">
        <input type="text" name="phoneValueInput" ng-class="{submitted:createCallBackForm.phoneValueInput.$invalid}" ng-model="taskDto.ContactPhoneNumber" placeholder="{{'_PHONE_NUMBER_'|i18n}}" required  validation-message="{{'_MSG_EMPTY_PHONE_NUMBER_'|i18n}}"/>
    </div>
</div>

CSS：

input.submitted.ng-invalid {
    border: red 1px solid;
}

代码提供给IE 11：

<div class="tableRow">
    <div class="tableCell fieldCaption borderBottom normalFontWeight ng-binding">Telefoon<span class="mandetory">*</span></div>
    <div class="tableCell fieldValue borderBottom">
        <input name="phoneValueInput" class="ng-isolate-scope ng-invalid ng-invalid-required ng-dirty" style="margin-left: 10px;" required="" type="text" placeholder="Telefoonnummer" ng-model="taskDto.ContactPhoneNumber" ng-class="{submitted:createCallBackForm.phoneValueInput.$invalid}" validation-message="Telefoonnummer kan niet leeg zijn">
    </div>
</div>

代码投放到Chrome（版本35.0.1916.114 m）：

<div class="tableRow">
    <div class="tableCell fieldCaption borderBottom normalFontWeight ng-binding">Phone<span class="mandetory">*</span></div>
    <div class="tableCell fieldValue borderBottom">
        <input type="text" name="phoneValueInput" ng-class="{submitted:createCallBackForm.phoneValueInput.$invalid}" ng-model="taskDto.ContactPhoneNumber" placeholder="Phone Number" required="" validation-message="Phone number can not be empty" class="ng-isolate-scope ng-pristine ng-invalid ng-invalid-required">
    </div>
</div>

此处可以看到类似的情况：http://jsfiddle.net/trixta/qTV3g/

Answer 1

<强> 1。当前Senario的测试申请

以下是我为您的方案创建的测试应用程序：Plunker1

CSS类下面用于突出显示验证失败的所需输入字段：

.submitted input:invalid {
    border: red 1px solid; }

在IE 10和Chrome 32中运行此功能并没有达到预期的效果。默认值：无效CSS应用于无效字段。它不是用户定义的CSS。这排除了IE和Chrome在主题场景中表现不同的可能性。

<强> 2。网络研究的启示

按照示例here，我在此处创建了另一个测试应用： Plunker2 这在IE 10和Chrome 32中均可正常使用。

基本上我们在提交时删除默认表单验证并添加使用用户定义CSS的自定义验证。

更改了HTML：

<button formnovalidate="" type="submit">Submit</button>

的JavaScript

document.addEventListener("DOMContentLoaded", function() {
    document.forms[0].addEventListener('submit',function(e){
        e.preventDefault();
        e.currentTarget.classList.add('submitted');
    });
});

注意：您也可以使用window.onload代替DOMContentLoaded活动。

希望这有助于解决您所面临的问题。

Answer 2

尝试

Sub qwerty()

   If Intersect(ActiveCell, ActiveSheet.ListObjects("Table1").DataBodyRange) Is Nothing Then
      MsgBox "activecell not in Table1"
   Else
      MsgBox "activecell in Table1"
   End If

End Sub