Question

我正在使用带有angular-ui的angularjs做一个简单的表单。不知何故，角度是将boostrap工具提示插入到我的验证中。但它会自动插入，我不知道如何控制/自定义或禁用工具提示。这是我的HTML：

<form name="frm" ng-submit="contact.contactUsSubmit(frm)">

                                <table id="tblContactUs">
                                    <tr>
                                        <td id="tblContactUsTitleTd">
                                            Send us an email
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="LabelStyle1">Name:</span><br/>
                                            <input type="text" tooltip-trigger="0" name="name" style="width: 75%" ng-model="contact.formInfo.name" required/><br/>
                                            <span ng-show="frm.name.$dirty && frm.name.$error.required" class="errorMsg">Required!<br /></span>
                                            <span class="LabelStyle1">Email:</span> <br/>
                                            <input type="email" name="email" style="width: 75%" ng-model="contact.formInfo.email" required/><br/>
                                            <span ng-show="frm.email.$dirty && frm.email.$error.required" class="errorMsg">Required!<br /></span>
                                            <span ng-show="frm.email.$dirty && frm.email.$error.email" class="errorMsg">Not a valid email!<br /></span>
                                            <span class="LabelStyle1">Message:</span> <br/>
                                            <textarea name="message" rows="5" style="width: 100%" ng-model="contact.formInfo.message" required></textarea><br/>
                                            <span ng-show="frm.email.$dirty && frm.name.$error.required" class="errorMsg">Required!</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: right">
                                            <button>Submit</button>
                                        </td>
                                    </tr>
                                </table>



                            </form>

但我得到了这个：

是的，工具提示很好。但我没有说我想要那里。如果我想使用工具提示进行验证，我需要能够自定义消息（针对不同的语言）。我已经搜索了bejesus的主题，但我无法找到关于如何配置或关闭它的答案。我甚至不知道为什么它在那里。任何帮助将非常感激。

Answer 1

这些不是引导程序，甚至不是以任何方式相关的CSS。

它们是html5验证工具提示，是浏览器本身的一部分。

如果您不想使用内置浏览器验证，请将novalidate属性添加到<form>代码。

<form name="frm" ng-submit="contact.contactUsSubmit(frm)" novalidate>

参考MDN <form> docs

Answer 2

感谢charlietfl让我走上了正确的道路，“novalidate”。但是，无效的问题是，当你点击ng-submit时，没有出现任何验证错误消息。

完整的解决方案是将以下代码添加到表单标记中（“联系”“contactController”的别名：

<form name="frm" ng-submit="contact.formIsValid(frm) && contact.contactUsSubmit(frm)" novalidate>

在控制器中，两个功能如下：

        formIsValid(frm) {
            
            angular.forEach(frm.$error.required, function (field) {
                field.$setDirty();
            });

            return frm.$valid;

        }

contactUsSubmit(frm) {
            var scope = this;
            if (frm.$valid) {
                //do $http post data etc here

               
            }



            return frm.$valid;
        }

现在，如果某人点击提交，则该字段会变为“脏”，这会导致角度验证规则触发。如果表单有效，那么提交将通过，如果没有，那么我们将留下验证错误。

使用angular-ui配置验证工具提示

2 个答案: