从引导或angularjs向文本字段添加验证

在下表中，即使添加了属性

required

，也看不到从引导完成的验证。有没有办法从angularjs或bootstrap添加验证。如果文本框中没有输入值，则必填字段应将文本框变为红色。如何进行此操作

<form name="schoolform" class="add-school-form" novalidate>
    <fieldset>
        <div class="form-group">
            <div class="form-group">
                <div class="row row-no-padding">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <input  class="form-control" id="rsummary" name="rsummary" type="text" value="" placeholder="Related Summary" ng-model="rsummary" required>
                    </div>        
                </div>
           </div>
           <div class="form-group">
            <a class="btn pull-right" ng-click="create()">Create</a> 
           </div>
        </div>
   </fieldset>
</form> 

创造

编辑1：

<div class="row row-no-padding" ng-class="{ 'has-error' : schoolform.summary.$invalid && !schoolform.summary.$pristine }">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 vz_input">
                        <input  class="form-control" id="summary" name="summary" type="text" value="" placeholder="Summary" ng-model="project.summary" data-fv-field="summary" required jira-type="input"  data-type="str">
                        <p ng-show="schoolform.summary.$invalid && !schoolform.summary.$pristine" class="help-block">You name is required.</p>
                    </div>        
                </div>
 <a class="btn pull-right" ng-click="create(schoolform.$valid)">Create Ticket</a> 




$scope.create = function (isValid)
{
        alert(isValid);
        if (isValid) { 
            alert(isValid);//false
        }
        else{
            //process the form
        }
}

需要您的姓名
创建票证
$scope.create=函数（isValid）
{
警报（isValid）；
如果（isValid）{
警报（isValid）；//错误
}
否则{
//处理表格
}
}

验证已经存在。只需放置此CSS类，您就会有一个想法

.add-school-form input.ng-invalid.ng-touched {
    background-color: red;
  }

  .add-school-form input.ng-valid.ng-touched {
    background-color: green;
  }

如果在文本框中使用put cursor，则该文本框的背景颜色为红色，如果不使用put cursor，则该文本框的背景颜色为空白，否则该文本框的背景颜色为绿色

编辑代码：

<form name="schoolform" class="add-school-form" novalidate>
    <fieldset>
        <div class="form-group">
            <div class="form-group">
                <div class="row row-no-padding">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <input  class="form-control" ng-class="{'red':schoolform.$submitted && schoolform.rsummary.$error.required }" id="rsummary" name="rsummary" type="text" value="" placeholder="Related Summary" ng-model="rsummary" required>
                    </div>        
                </div>
           </div>
           <div class="form-group">
            <input type="submit" class="btn pull-right" ng-click="create()" value="Create"> 
           </div>
        </div>
   </fieldset>
</form> 

您需要为此提交操作。所以链接改为提交按钮

也可以像下面这样将create（）调用放在表单标记上

<form ng-submit="create()">

以下是更新的test.html

或 test.html

---

查看此答案：如果您想验证数据而不提交表单，请告诉我，create（）如何知道表单是否有效：）如果有帮助，请在我的答案前打勾

<form ng-submit="create()">

<form name="schoolform" ng-submit="create(schoolform.$valid)" class="add-school-form" novalidate>
   <fieldset>
        <div class="form-group">
            <div class="form-group">
                <div class="row row-no-padding">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <input  class="form-control" ng-class="{'red':schoolform.$submitted && schoolform.rsummary.$error.required }" id="rsummary" name="rsummary" type="text" value="" placeholder="Related Summary" ng-model="rsummary" required>
                    </div>        
                </div>
           </div>
           <div class="form-group">
            <input type="submit" class="btn pull-right"   value="Create"> 
           </div>
        </div>
   </fieldset>
</form> 

$scope.create = function (boolIsFormValid) {
    console.log(boolIsFormValid)
 };

           <div class="form-group" ng-class="{ 'has-error' : schoolform.summary.$invalid || schoolform.summary.$pristine }">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 vz_input">
                    <input  class="form-control" id="summary" name="summary" type="text"   placeholder="Summary" ng-model="project.summary" data-fv-field="summary" required >
                    <p ng-show="schoolform.summary.$invalid || schoolform.summary.$pristine" class="help-block">You name is required.</p>
                </div>        
            </div>
          Form validation:  {{schoolform.$valid}}
      <a class="btn pull-right" ng-click="create(schoolform.$valid)">Create Ticket</a> 

</form>

$scope.create = function (isValid){
    console.log(isValid);
    if (isValid) { 
        alert(isValid);//false
    }
    else{
        //process the form
    }
}

           <div class="form-group" ng-class="{ 'has-error' : (schoolform.summary.$invalid && !schoolform.summary.$pristine) || invalid }">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 vz_input">
                    <input  class="form-control" id="summary" name="summary" type="text"   placeholder="Summary" ng-model="project.summary" data-fv-field="summary" required >
                    <p ng-show="(schoolform.summary.$invalid && !schoolform.summary.$pristine) || invalid" class="help-block">You name is required.</p>
                </div>        
            </div>
          Form validation:  {{schoolform.$valid}}
      <a class="btn pull-right" ng-click="create(schoolform.$valid)">Create Ticket</a> 

</form>

$scope.create = function (isValid){
    console.log(isValid);
    if (isValid) { 
        alert(isValid);//false
    }
    else{
        $scope.invalid = true;
    }
}