从Bootstrap或angularjs向文本字段添加验证 [英] Adding validation to text field from bootstrap or angularjs

问题描述

在以下形式中，即使添加了 required 属性，也看不到通过引导完成的验证.有没有一种方法可以通过angularjs或bootstrap添加验证.如果未在其中输入任何值，则必填字段会将文本框变为红色.

In the following form even though have added the attribute required do not see the validation done from bootstrap. Is there a way to add validation either from angularjs or bootstrap.The required field should turn the text box red if no values are entered in it.How to go about this

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

Edit1:

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

推荐答案

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

或test.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;
    }
}

这篇关于从Bootstrap或angularjs向文本字段添加验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！