Adding validation to text field from bootstrap or angularjs

Question

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

See this answer: stackoverflow.com/a/15734695/3016654

Andrei Tătar
– Andrei Tătar

2015-06-29 12:26:02 +00:00
Commented Jun 29, 2015 at 12:26 — Andrei Tătar
– Andrei Tătar, Commented Jun 29, 2015 at 12:26

ooozguuur · Accepted Answer · 2015-06-29 14:41:00Z

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

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

RIYAJ KHAN · Accepted Answer · 2015-06-30 07:20:27Z

validation is already there.Just put this CSS class so you will get an idea.

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

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

This will trurn the text-box background color red if use put cursor in it and left it blanks otherwise it will green.

EDIT CODE :

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

you need submit action for this. So link is changed to submit button

Also you can place your create() call on form tag like this one.

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

So,it will take care of both form submission and clicking action.

Here is the Plunker

EDIT NEW .

There is $valid and $invalid flag associated with each form. For your form either you can pass schoolform.$valid or schoolform.$invalid whatever you prefer to your create function like this create(schoolform.$valid).

If form is valid then schoolform.$valid =true,schoolform.$invalid=false and if it is invalid then schoolform.$valid =false,schoolform.$invalid=true

And move the create function to form tag

Here the updated 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)
 };

Here is the updated Plunker

Its also work for this if you want to validate data without submitting the form
Pls tell me ,how will create() know if the form is valid or not

Collectives™ on Stack Overflow

Adding validation to text field from bootstrap or angularjs

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related