Disable HTML5 form input tooptip

Question

I added the required attribute to the input tag. When I valid and submit the form, the HTML tooltip will popup.

Is there any approach to disable the HTML5 tooltip? I am using AugularJS 1 and I am not sure whether AugularJS 1 provide the function for this.

Possible duplicate of [Disable validation of HTML5 form elements](http://stackoverflow.com/questions/3090369/disable-validation-of-html5-form-elements) — jeremykenedy, Nov 13 '16 at 05:50
@developernator It disables my angularJS validation after I add "novalidate" attribute in the form tag. Please look carefully that I am asking for disable the tooptip but not for validation. — user3274165, Nov 13 '16 at 06:01
@user3274165 if u have given novalidate in the form tag and required in the input tag, then the popup will not show. You can then use angularjs formname.inputname.$error.required to check validity — Pitchiah Natarajan, Nov 13 '16 at 08:29

score 0 · Answer 1 · answered Nov 13 '16 at 06:06

Why adding the required attribute when you don't want the html5 validation ? It's better if you use validation provided with angualar. I've attached a demo

var app = angular.module('form-example', []);

app.directive('passwordValidate', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function(viewValue) {

                scope.pwdValidLength = (viewValue && viewValue.length >= 8 ? 'valid' : undefined);
                scope.pwdHasLetter = (viewValue && /[A-z]/.test(viewValue)) ? 'valid' : undefined;
                scope.pwdHasNumber = (viewValue && /\d/.test(viewValue)) ? 'valid' : undefined;

                if(scope.pwdValidLength && scope.pwdHasLetter && scope.pwdHasNumber) {
                    ctrl.$setValidity('pwd', true);
                    return viewValue;
                } else {
                    ctrl.$setValidity('pwd', false);                    
                    return undefined;
                }

            });
        }
    };
});

.input-help {
  display: none;
  position:absolute;
  z-index: 100;
  top: -6px;
  left: 160px;
  width:200px;
  padding:10px;
  background:#fefefe;
  font-size:.875em;
  border-radius:5px;
  box-shadow:0 1px 3px #aaa;
  border:1px solid #ddd;
  opacity: 0.9;
}
.input-help::before {
  content: "\25C0";
  position: absolute;
  top:10px;
  left:-12px;
  font-size:16px;
  line-height:16px;
  color:#ddd;
  text-shadow:none;
}
.input-help h4 {
  margin:0;
  padding:0;
  font-weight: normal;
  font-size: 1.1em;
}

/* Always hide the input help when it's pristine */
input.ng-pristine + .input-help {
  display: none;
}

/* Hide the invalid box while the input has focus */
.ng-invalid:focus + .input-help {
  display: none;
}

/* Show a blue border while an input has focus, make sure it overrides everything else */
/* Overriding Twitter Bootstrap cuz I don't agree we need to alarm the user while they're typing */
input:focus {
  color: black !important;
  border-color: rgba(82, 168, 236, 0.8) !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6) !important;
}


/* Show green border when stuff has been typed in, and its valid */
.ng-dirty.ng-valid {
  border-color:#3a7d34;
}

/* Show red border when stuff has been typed in, but its invalid */
.ng-dirty.ng-invalid {
  border-color:#ec3f41;
}

/* Show the help box once it has focus */
.immediate-help:focus + .input-help {
  display: block;
}

/* Immediate help should be red when pristine */
.immediate-help.ng-pristine:focus + .input-help {
  border-color:#ec3f41;
}
.immediate-help.ng-pristine:focus + .input-help::before {
  color:#ec3f41;
}

/* Help hould be green when input is valid */
.ng-valid + .input-help {
  border-color:#3a7d34;
}
.ng-valid + .input-help::before {
  color:#3a7d34;
}

/* Help should show and be red when invalid */
.ng-invalid + .input-help {
  display: block;
  border-color: #ec3f41;
}
.ng-invalid + .input-help::before {
  color: #ec3f41;
}

/* Style input help requirement bullets */
.input-help ul {
  list-style: none;
  margin: 10px 0 0 0;
}

/* Default each bullet to be invalid with a red cross and text */
.input-help li {
  padding-left: 22px;
  line-height: 24px;
  color:#ec3f41;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAA1CAYAAABIkmvkAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAJwAAACcBKgmRTwAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wOS8xMlhq+BkAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAEA0lEQVRIie2WW2jbVRzHv//zT5rkn0ub61zaNdEiPqTC9EFRhtgJk63qg3Wr0806pswNiYgDUXxwyryCEB8UBevtaSCCDHQoboKyoVvVzfRmL2napU0mrdbl8s//dy4+dM1M28n64FsPnIdz+XzO75zfOXA0pRRWU7o/uS9FxOc+3/vlIQBgq4F3fHxvKuIPJ9cFwi9uTXU8BwDa1Uaw/aN7UusCkWRbPI5yxcTI2Bgy49kXrkrwwIedqYg/nGyLXwsJiYHBYWTGs7Cq5Kpt4cA3PXft+2rX40vhrt7OVLgplIzHYuBKoH9gCKMjGVE1LdfJl86YDAAOfN2ziZP4NODyv9/z2fanFuH7P9iWCjcFk/FYK4QSGLgEk0WeUy/3mQCgPXFs9xbBRW883NrssDvQN3hWcOLPEPGWiD94MBaPQymBoaERjI9mBSfu+fHwL+biItpjR3e6JFfloDeAaGQ9SpUycvlp6ExHJBKGYsDvgyMYH81KTsL90yuX4VoWdh3pMqSQpWBjAC3RZkgpYEkCFDA8NIqJ0UlFxI3Tr/5aB9elsau305BcloKBAFpjLeBSYGRwDBNjk4oTN06/dnYZXCcAgK1vbzYkl6VwOATihOzYlOLEjTOvn1sRXiYAgDsP32YIKUuWaXFOwtP3xrnqleAVBQBwy/M3GZy4+PnN3/4TvqJgNWVVj2lNsCZYE6wJ1gRrgv9dYAMAHHw2Bl2fUEpBVavtLPVW/78nVR/Zk4CupzVHA6zChSOK0yHv0S8GFyK4BMPhAJxOgLE03/9kYhE2dz+agKaldY8bDaEQ7D5ft7Roy+UIlCooy5LQdaZ5vVBEgGmmrT172yVxaIylmdcDm9cHc2oK1Zm8kETvLAo0pRRk8mmnEqKouVw68zVCzP8F/uccFHHoXi/sjT6Y53Mw83mhOHn8J7416wQAwPftd0ouiswwdJu/CRASkBKQAmYuBzNfWIC/O173W6llwfbeu6Yi8tDsrAQJYGICyGQAIWDO5KUkaxlcJwAASdSmaWAQHCACOAc4h6YzJi1qWymNNUHlwYcT0JDWXQbACYhGgeh6gHM4Ghuh2/R0YePNiaUCTSmFcvdDCY1paZvhht3nQ2VmGmahICSR5vQHmDt6DcozeZSnp2FdLLZHhwdq94SVd+xMaJqWtrkM2L1uVHILpy0t8igidymXExfHMzBCQbhCIdga7Onz8etqkdgkUYTZbYCSqORmULlQEIq4J3jyexMA8jdu9BRzuaKyLN3udkNjDEqICID+2hbm797Wwez24/T3vJTE3aFTP9Sd9vT1NziVEMUGr1c35+Y2b5jKnqgNKqWglMLspjs6/rj1dudie2mdao07J5s3dCzt/werJTyI1yYqpQAAAABJRU5ErkJggg==) no-repeat  2px -34px;
}

/* Set to green check and text when valid */
.input-help li.valid {
  color:#3a7d34;
  background-position: 2px 6px;
}

/* Set submit button */
form .btn, form.ng-valid .btn[disabled] {
  display: none;
}
form.ng-invalid .btn[disabled], form.ng-valid .btn {
  display: inline-block;
}

body {
 padding: 20px 0;   
}
input {
    width: 166px
}
.form-horizontal .control-label {
    width: 100px;
}
.form-horizontal .controls {
  position: relative;
  margin-left: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<form ng-app="form-example" class="row form-horizontal" novalidate>
 <div class="control-group">
  <label class="control-label" for="inputEmail">Email</label>
  <div class="controls">
    <input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
    <div class="input-help">
      <h4>Invalid Email</h4>
    </div>
  </div>
 </div>
<div class="control-group">
  <label class="control-label" for="inputPassword">Password</label>
  <div class="controls">
    <input ng-model="password" class="immediate-help" password-validate required type="password" id="inputPassword" placeholder="Password">
    <div class="input-help">
      <h4>Password must meet the following requirements:</h4>
      <ul>
        <li ng-class="pwdHasLetter">At least <strong>one letter</strong></li>
        <li ng-class="pwdHasNumber">At least <strong>one number</strong></li>
        <li ng-class="pwdValidLength">At least <strong>8 characters long</strong></li>
      </ul>
    </div>
  </div>
 </div>
<div class="control-group">
  <div class="controls">
    <button type="submit" class="btn">Create Account</button>
    <button class="btn" disabled>Create Account</button>
  </div>
 </div>
</form>

Disable HTML5 form input tooptip

1 Answers1