Javascript jonsamwell尝试使用angular自动验证，但表单验证不起作用_Javascript_Html_Css_Angularjs

Javascript jonsamwell尝试使用angular自动验证，但表单验证不起作用

javascript html css angularjs

Javascript jonsamwell尝试使用angular自动验证，但表单验证不起作用,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,这是JS代码，除了表单未经验证外，其他一切都可以正常工作 var app = angular.module('minmax', ['jcs-autoValidate']); app.controller('MinMaxCtrl', ['$scope', '$http', function($scope, $http){ $scope.formModel = {}; $scope.onSubmit = function(valid){ if(valid){ conso

这是JS代码，除了表单未经验证外，其他一切都可以正常工作

var app = angular.module('minmax', ['jcs-autoValidate']);

app.controller('MinMaxCtrl', ['$scope', '$http', function($scope, $http){
$scope.formModel = {};
$scope.onSubmit = function(valid){

    if(valid){

        console.log("form submitted");
        console.log($scope.formModel);


    }else{
        console.log("invalid form");
    }
};
}]);

<!DOCTYPE html>
<html lang="en-us" ng-app="minmax">
<title>W3.CSS</title>
<head>

   <title>AngularJS weathre Forecast SPA</title>   
   <Meta charset="UTF-8">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <style>

        html, body, input, select, textarea
        {
            font-size: 1.05em !important;
        }

    </style>

    <script src="https://code.angularjs.org/1.3.4/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/jonsamwell/angular-auto-validate/master/dist/jcs-auto-validate.min.js"></script>

    <script src="js.js"></script>

</head>
<body >


    <div class="container main-content" ng-controller="MinMaxCtrl">

        <form ng-submit="onSubmit(theForm.$valid)" name="theForm" novalidate>

            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" ng-model="formModel.name" name="name" required/>
            </div>

         <!--   

//////////////////////////////////////// Form validation with core angularJS ///////////////////////////////////////

            <div class="form-group "
                 ng-class="{
                     'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),
                     'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
                 }">
                <label>Email</label>
                <input type="email" class="form-control" name="email" ng-model="formModel.email" required/>

                <p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)" >
                    This field is required.
                </p>

                <p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)" >
                    Please enter an email id.
                </p>

                <pre>Validation {{theForm.email.$error | json}}</pre>
                <pre>Field Valid? {{theForm.email.$valid}}</pre>
                <pre>Form pristine? {{theForm.$pristine}}</pre>
                <pre>Form Submitted? {{theForm.$submitted}}</pre>
            </div>-->

            <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" name="email" ng-model="formModel.email" required/>

            </div>


            <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" name="password" ng-model="formModel.password" required/>
            </div>

            <div class="form-group">
                <label>Age</label>
                <input type="number" class="form-control" name="Age" ng-model="formModel.age" required/>
            </div>

            <div class="form-group">
                <label for="sex">Sex</label>
                <select name="sex" id="sex" class="form-control" ng-model="formModel.sex" required>
                    <option value="" > Please choose </option>
                    <option value="Male" > Male </option>
                    <option value="Female" > Female </option>
                </select>
            </div>



            <div class="form-group">
                <button class="btn btn-primary" type="submit">Register</button>
            </div>

        </form>
    <pre>{{theForm | json}}</pre>

    </div>


</body>

这是我的HTML页面，这里有一个表单，我想使用angular auto validate进行验证。除了表单未经验证外，所有内容都正常工作

var app = angular.module('minmax', ['jcs-autoValidate']);

app.controller('MinMaxCtrl', ['$scope', '$http', function($scope, $http){
$scope.formModel = {};
$scope.onSubmit = function(valid){

    if(valid){

        console.log("form submitted");
        console.log($scope.formModel);


    }else{
        console.log("invalid form");
    }
};
}]);

<!DOCTYPE html>
<html lang="en-us" ng-app="minmax">
<title>W3.CSS</title>
<head>

   <title>AngularJS weathre Forecast SPA</title>   
   <Meta charset="UTF-8">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <style>

        html, body, input, select, textarea
        {
            font-size: 1.05em !important;
        }

    </style>

    <script src="https://code.angularjs.org/1.3.4/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/jonsamwell/angular-auto-validate/master/dist/jcs-auto-validate.min.js"></script>

    <script src="js.js"></script>

</head>
<body >


    <div class="container main-content" ng-controller="MinMaxCtrl">

        <form ng-submit="onSubmit(theForm.$valid)" name="theForm" novalidate>

            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" ng-model="formModel.name" name="name" required/>
            </div>

         <!--   

//////////////////////////////////////// Form validation with core angularJS ///////////////////////////////////////

            <div class="form-group "
                 ng-class="{
                     'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),
                     'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
                 }">
                <label>Email</label>
                <input type="email" class="form-control" name="email" ng-model="formModel.email" required/>

                <p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)" >
                    This field is required.
                </p>

                <p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)" >
                    Please enter an email id.
                </p>

                <pre>Validation {{theForm.email.$error | json}}</pre>
                <pre>Field Valid? {{theForm.email.$valid}}</pre>
                <pre>Form pristine? {{theForm.$pristine}}</pre>
                <pre>Form Submitted? {{theForm.$submitted}}</pre>
            </div>-->

            <div class="form-group">
                <label>Email</label>
                <input type="email" class="form-control" name="email" ng-model="formModel.email" required/>

            </div>


            <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" name="password" ng-model="formModel.password" required/>
            </div>

            <div class="form-group">
                <label>Age</label>
                <input type="number" class="form-control" name="Age" ng-model="formModel.age" required/>
            </div>

            <div class="form-group">
                <label for="sex">Sex</label>
                <select name="sex" id="sex" class="form-control" ng-model="formModel.sex" required>
                    <option value="" > Please choose </option>
                    <option value="Male" > Male </option>
                    <option value="Female" > Female </option>
                </select>
            </div>



            <div class="form-group">
                <button class="btn btn-primary" type="submit">Register</button>
            </div>

        </form>
    <pre>{{theForm | json}}</pre>

    </div>


</body>


W3.CSS
安格拉斯韦瑟预测温泉酒店
html、正文、输入、选择、文本区域
{
字体大小：1.05em！重要；
}
名称
电子邮件
密码
年龄
性
请选择
男性
女性
登记
{{theForm | json}}

看来你所有的一切都运转良好

参见示例

就是说，我没有使用jcs autoValidate模块，似乎您所有的模块都运行良好

参见示例

就是说，我没有使用模块

jcs autoValidate