单击angularjs中的提交表单时如何删除“请填写此字段”弹出但其他验证应该有效

Posted 2023-03-05

【中文标题】单击angularjs中的提交表单时如何删除“请填写此字段”弹出但其他验证应该有效

【英文标题】：how to remove "please fill out this field" pop up when click on submit form in angularjs but other validations should work

【发布时间】：2016-01-06 00:32:22

【问题描述】：

我想删除“请填写此字段”弹出窗口作为验证和声明的正常验证应该显示。

html：

<div class="panel-body">
    <form role="form" id="createForm" v name="createForm"  ng-submit="createAdminGroup(adminGroupData)">
        <div class="form-group" ng-class=" 'has-error' : createForm.firstName.$invalid && !createForm.firstName.$pristine">
            <label class="label1">First Name</label>
            <input name="firstName" id="firstName" class="form-control" placeholder="First Name" name="firstName"  type="text" ng-model="adminGroupData.firstName  " required/>
         <span style="color:red" ng-show="createForm.firstName.$invalid  && !createForm.firstName.$pristine">Please enter first name</span>
        </div>

        <div class="form-group">
            <label class="label1">Last Name </label>
            <input name="lastName" id="lastName" class="form-control" placeholder="Last Name" name="lastNmae"  type="text" ng-model="adminGroupData.lastName" />
        </div>

        <div class="form-group">
            <label class="label1"> Email Id </label>
            <input type="email" name="email" id="email" class="form-control"  placeholder="[e-mail]" value=""ng-model="adminGroupData.email"/>
        </div>
        <div class="form-group">
            <label class="label1"> Password </label>
            <input name="password" id="password" class="form-control" placeholder="password"  value=""  ng-model="adminGroupData.password" />
        </div>

        <button name="submit" type="submit" class="btn btn-success" id="" ng-disabled="userForm.$invalid">Save</button>
        <button class="btn btn-default" id="cancel" type="button" onclick='handleCancelCreateAdmin()'> Back </button>

        </form>
</div>

【问题讨论】：

在点击发布按钮之前，请花点时间查看问题预览中的格式，这样可以更轻松地为您提供帮助

将novalidate 添加到form

【参考方案1】：

将novalidate 属性添加到您的form 以禁用浏览器默认验证

前任

<form role="form" novalidate id="createForm" v name="createForm"  ng-submit="createAdminGroup(adminGroupData)">

Find more here

【参考方案2】：

在提交按钮中添加 formnovalidate 属性：

例子：

<button name="submit" type="submit" formnovalidate class="btn btn-success">Save</button>

这将仅禁用浏览器表单验证。您仍然可以通过 AngularJS 代码进行验证。

可以看W3C规范here

几天前我遇到了同样的问题，这就是我设法解决的方法

【参考方案3】：

我刚试过，效果很好：

oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')" >

我在两个单引号之间添加了一个空格。

由于我在输入字段上添加了引导工具提示并且是必需的，因此无效的输入会成为焦点并显示工具提示值。

这比我想象的要简单。

【参考方案4】：

title=""

---

即使输入超出表单，工具提示也会出现，在这种情况下，novalidate 不起作用。

一种解决方案是删除required，但如果您的代码库很大，那么快速破解方法是添加title=""。

<input type="text" required title="" />