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

我正在研究angularjs和bootstrap应用程序。我试图验证这个简单表单，当用户单击submit按钮时，from中的所有字段都应该有一个值

请查找演示： 在上面的演示中，当用户在未选中复选框的情况下单击“提交”按钮时，会显示一条错误消息“请选择颜色…”，显示错误消息后，选中复选框并单击“提交”按钮，仍然会显示错误消息。有什么意见吗

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>

选择颜色：
{{color}}

用户名：
用户名是必需的
提交

解决方案是更新您的（1）颜色输入字段，（2）用户输入字段和（3）提交格式方法

<input ng-required="selectedColor.length === 0" onchange="this.setCustomValidity(!validity.valueMissing && '')" oninvalid="this.setCustomValidity(validity.valueMissing ? 'Please select the color..' : '')"type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)">

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

$scope.submitForm = function(form){
  if ($scope.selectedColor.length > 0  && $scope.user != "") {
    console.log('fields are all entered');
  } else{

  }
} 

$scope.submitForm=函数（表单）{
如果（$scope.selectedColor.length>0&&$scope.user！=“”）{
console.log（'字段均已输入'）；
}否则{
}
} 

（1） 选中复选框时，需要设置false条件来处理该复选框

（2） 对于用户输入字段，需要设置ng model=user以将$scope.user对象链接到输入

（3） 对于submitForm方法，您希望知道selectedColor数组至少有一个项，并且该用户不是空的

作为结束点，请使用适当的linting和缩进设置代码的格式。否则，乍一看就很难阅读。

首先 我已为所有复选框值声明了一个数组：

$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;
};

Forth 用户输入框也没有

ng型号

，因此视图中的更改不会在控制器中更新。为解决此问题，添加了ng型号

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

就这些

请检查工作代码段：

示例-示例复选框输入指令生产
angular.module（'checkboxExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.colorNames=[“红色”、“蓝色”、“黑色”]；
$scope.selectedColor=[false，false，false]；
$scope.userSelection=函数userSelection（团队）{
var idx=$scope.selectedColor.indexOf（团队）；
如果（idx>-1）{
$scope.selectedColor.splice（idx，1）；
} 
否则{
$scope.selectedColor.push（团队）；
}
};
$scope.submitForm=function（）{
如果（$scope.someSelected（）&&$scope.user！=“”&&&$scope.user！=未定义）{
警报（“已输入所有字段”）；
}否则{
}
} 
$scope.someSelected=函数（）{
对于（变量i=0；i<$scope.selectedColor.length；i++）{
如果（$scope.selectedColor[i]）返回true；
}
返回false；
};
}]);
选择颜色：
{{color}}

用户名：
用户名是必需的
提交

它与您建议的代码不兼容。在未选中复选框的情况下单击“提交”按钮时，会显示错误消息，然后选中复选框，但仍会显示错误消息。请找到更新的演示。更新我的答案仍然我有一个问题，请找到链接。当用户未选中复选框而单击“提交”按钮时，当用户选中复选框时，除非用户单击“其他位置”，否则错误消息不会消失。如果我们给文本框@dexter我做了最后一次编辑时给出的自定义消息，那么最好不要用气球来显示错误消息。应该按预期工作。我仍然发现你的答案有问题。请查找更新的演示。当用户单击“提交”时，会显示一条错误消息“请选择颜色”，当用户再次选择颜色后，当用户单击“提交”按钮时，不会立即显示文本框的错误消息，第二次单击“提交”按钮后，只会显示错误消息。任何输入？@codemax-我们给出的自定义错误消息oninvalid=“this.setCustomValidity（selectedColor.length==0？”“请选择颜色…”未显示，而是显示；如果要继续，请选中此框。如何显示消息“请选择颜色…”

<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{

            }
        }