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

Question

在以下表单中，即使添加了属性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
        }
}

Answer 1

test.html

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

test.js

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

或 测试.html

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

test.js

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

Answer 2

验证已经存在。只需放置这个 CSS 类，你就会明白。

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

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

如果使用将光标放在其中，这将使文本框背景颜色变为红色，并将其留空，否则将变为绿色。

编辑代码：

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

CSS：

.red {
    background-color: red;
  }


  .green {
    background-color: green;
  }

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

你也可以将你的 create() 调用放在像这样的表单标签上。

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

所以，它会处理表单提交和点击操作。

这里是Plunker

编辑新。

每个表单都有 $valid 和 $invalid 标志。 对于您的表单，您可以通过 schoolform.$valid 或 schoolform.$invalid 任何您喜欢的创建功能 创建（schoolform.$valid）。

如果表格有效，则 schoolform.$valid =true,schoolform.$invalid=false，如果无效则 schoolform.$valid =false,schoolform.$invalid=true

并将创建函数移动到表单标签

这里是更新的 HTML 。

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

JS：

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

这是更新后的Plunker