个人中心
gpt4 book ai didi

javascript - 表单验证中的错误消息未按预期显示

转载 作者：行者123 更新时间：2023-12-03 02:15:40 25 4
gpt4 key购买 nike

我正在研究 angularjs 和 bootstrap 应用程序。我正在尝试验证简单的表单，当用户单击提交按钮时，来自的所有字段都应该有一个值。

请找到演示:https://plnkr.co/edit/aHtODbTTFZfpIRO3BWhf?p=preview在上面的演示中，当用户单击提交按钮而不选择复选框时，会显示一条错误消息“请选择颜色..”，显示错误消息后选择复选框并单击提交按钮，错误消息仍然是显示。对此有何意见？

html代码:

<form name="myForm" ng-controller="ExampleController">
   <div>Select Color : </div>
      <label name="color" ng-repeat="color in colorNames" class="checkbox-inline">
<input ng-required="selectedColor.length === 0" oninvalid="this.setCustomValidity('Please select the color..')" type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)">                        <!--<input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> {{color}}-->
     {{color}}       <br>       </label>

            <div class="">
                <div style="color: black;">Username : </div>
               <input type="text" name="user" value="" required>
                <div ng-show="myForm.$submitted || myForm.user.$touched">
                    <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                </div>
            </div>            
             <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>
 </form>

最佳答案

第一我已经为所有复选框值声明了一个数组:

$scope.selectedColor = [false,false,false];

第二我添加了一个复选框验证检查的方法:

$scope.someSelected = function () {
           for(var i = 0; i < $scope.selectedColor.length; i++) {
             if($scope.selectedColor[i]) return true;
           }

           return false;
};

第三我使用 ng-model 并更新 HTML 代码，ng-model 用于双向数据绑定(bind)，绑定(bind)值的更改将反射(reflect)在 View 和 Controller 中:

<input ng-required="!someSelected()" ng-model = "selectedColor[$index]"  type="checkbox" name="color" value="{{color}}">

第四用户输入框也没有 ng-model，因此 View 中的更改不会在 Controller 中更新。为了解决这个问题，添加了ng-model。

<input type="text" ng-model = "user" name ="user" value="" required>

第五更新了提交表单验证:

$scope.submitForm = function(){
             if ($scope.someSelected() && $scope.user != "" && $scope.user != undefined) {
          alert("all fields are entered");
            }else{

            }
        }

就这些了!

请检查工作代码片段:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  

  
</head>
<body ng-app="checkboxExample"> 
  <script>  
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
       
      $scope.colorNames = ['RED', 'BLUE', 'BLACK'];
        $scope.selectedColor = [false,false,false];
        $scope.userSelection = function userSelection(team) {
            var idx = $scope.selectedColor.indexOf(team);   
           if (idx > -1) { 
                $scope.selectedColor.splice(idx, 1);
            } 
            else {
                $scope.selectedColor.push(team);
            }
        };
        $scope.submitForm = function(){
             if ($scope.someSelected() && $scope.user != "" && $scope.user != undefined) {
          alert("all fields are entered");
            }else{
               
            }
        } 
        $scope.someSelected = function () {
           for(var i = 0; i < $scope.selectedColor.length; i++) {
             if($scope.selectedColor[i]) return true;
           }
           
           return false;
        };
        
    
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
   <div>Select Color : </div>
      <label name="color" ng-repeat="color in colorNames" class="checkbox-inline">
<input ng-required="!someSelected()" ng-model = "selectedColor[$index]"  type="checkbox" name="color" value="{{color}}">                        <!--<input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> {{color}}-->
     {{color}}       <br>       </label>
                
            <div class="">
                <div style="color: black;">Username : </div>
               <input type="text" ng-model = "user" name ="user" value="" required>
                <div ng-show="myForm.$submitted || myForm.user.$touched">
                    <p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
                </div>
            </div>
            
             <button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>

   

 </form>
</body>
</html>

<!-- 
Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

关于javascript - 表单验证中的错误消息未按预期显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49374924/

25 4 0
文章推荐： javascript - 如何从 javascript 访问 JSON 对象内的嵌套数组
文章推荐： java - 为什么会收到此LineUnavailableException？
文章推荐： Azure 流分析 : When does a stream analytics job actually process data if the job query is a day wise TUMBLINGWINDOW?
文章推荐： actionscript-3 - 在AS3中播放声音
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com