html - Disable HTML5 form input tooptip -

i added required attribute input tag. when valid , submit form, html tooltip popup.

is there approach disable html5 tooltip? using augularjs 1 , not sure whether augularjs 1 provide function this.

why adding required attribute when don't want html5 validation ? it's better if use validation provided angualar. i've attached 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;  }    /* hide input when it's pristine */  input.ng-pristine + .input-help {    display: none;  }    /* hide invalid box while input has focus */  .ng-invalid:focus + .input-help {    display: none;  }    /* show blue border while input has focus, make sure overrides else */  /* overriding twitter bootstrap cuz don't agree need alarm 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, , valid */  .ng-dirty.ng-valid {    border-color:#3a7d34;  }    /* show red border when stuff has been typed in, invalid */  .ng-dirty.ng-invalid {    border-color:#ec3f41;  }    /* show box once has focus */  .immediate-help:focus + .input-help {    display: block;  }    /* immediate should red when pristine */  .immediate-help.ng-pristine:focus + .input-help {    border-color:#ec3f41;  }  .immediate-help.ng-pristine:focus + .input-help::before {    color:#ec3f41;  }    /* hould green when input valid */  .ng-valid + .input-help {    border-color:#3a7d34;  }  .ng-valid + .input-help::before {    color:#3a7d34;  }    /* should show , red when invalid */  .ng-invalid + .input-help {    display: block;    border-color: #ec3f41;  }  .ng-invalid + .input-help::before {    color: #ec3f41;  }    /* style input requirement bullets */  .input-help ul {    list-style: none;    margin: 10px 0 0 0;  }    /* default each bullet invalid red cross , 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 green check , 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 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>