How to remove "please fill out this field" if you click on the submit form button in angularjs, but other checks should work

Question

I want to remove the "Please fill out this field" popup as confirmation and normal statements that need to be announced.

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> 

Answer 1

Add novalidate attribute to form to disable default browser validation

For ex

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

Find more here

Answer 2

Add the formnovalidate attribute to your submit button:

Example:

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

This will disable validation of the browser form only. You still have confirmation from your AngularJS code.

You can see the W3C specification here

I had the same problem a few days ago and managed to solve

Answer 3

I just tried this and it worked:

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

I added a space between the two single quotes.

Since I added a boot prompt to my input fields and is required, incorrect input focuses and displays the value of the tooltip.

It was easier than I thought.