如何隐藏HTML5验证弹窗信息

Question

如何隐藏HTML5验证弹窗信息

3

我创建了一个简单的表单并进行了验证，我的要求是不想要HTML5弹出消息，但我需要将焦点放在特定的有效字段上，该怎么做呢？非常感谢您提前的帮助.............................................

'use strict';
var app = angular.module('telstraApp', []);
   
 
 
    

app.directive('accessibleForm', function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {

            // set up event handler on the form element
            elem.on('submit', function () {

                // find the first invalid element
                var firstInvalid = elem[0].querySelector('.ng-invalid');

                // if we find one, set focus
                if (firstInvalid) {
                    firstInvalid.focus();
                }
            });
        }
    };
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TelsApp</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!--<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />-->
    
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.13.2/select.min.css">


    <script data-require="angular.js@~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script> 
  
     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-sanitize.js"></script>    
</head>



<body class="hold-transition skin-blue sidebar-mini" data-ng-app="telstraApp">
    <div class="wrapper">
    
    <div class="row" style="   position: relative;   top: 0; height: 55px !important;z-index:9999;">
        
    </div>
        <!--<div id="header" ng-include="'layout/header/header.html'"  ></div> -->
         
        <!-- Left side column. contains the logo and sidebar -->
      
        <aside class="main-sidebar" style="  height: 100%;  top: 10px;   height:0px;  padding-top: 60px;">
          
           
        </aside>

        <div class="content-wrapper" style=" margin-top: -29px; margin-bottom: 10px; height: 350px;   overflow-y: auto; ">
            <!-- Main content -->
            <form>
           <input type="text" ng-required="true">
            <input type="text" ng-required="false">
             <input type="text" ng-required="true">
           
           
           <input type="submit">
           </form>
            <!-- /.content -->
        </div>
    </div>
    <!-- /.content-wrapper -->
    <!-- /.Footer -->
     
    <!-- /.Footer -->
    <script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     
    
   
   

</body>
</html> 

<style>
.appBanner{
    position:fixed; left:0; top: 0px; width: 1440px; border:2px; background-color:#6185BA;height: 46px;color: #000; font-family: 'Helvetica Neue', Arial, sans-serif;font-size: 12px;
}
</style>

- Nelson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ashfaq.p · Accepted Answer

为了隐藏HTML5验证信息，您需要在表单上指定novalidate，如下所示：

<form name='xyz' novalidate>
  //your form
</form>

在这里阅读更多信息: 禁用html5验证

您需要在要聚焦的输入框上指定autofocus。看一下这个fiddle，焦点在email输入框上。使用novolidate进行聚焦