Не удалось добавить валидации к элементам в моей форме

Question

Я хочу добавить валидации ко всем элементам формы. сообщение об ошибке должно отображаться под элементами, когда изменяется текст элемента управления. Ниже мой код:

<div role="tabpanel" class="tab-pane active" id="step-1"> 
        <div class="col-md-4"> 
         <div> <img src="../logo.jpg" 
            alt="Smiley face" 
            height="150" 
            style="margin:40px;" 
            width="150"> 
         </div>      
        </div> 
        <div class="col-md-7"> 
         <form action="r" name="regform" 
         method="post" > 

          <div class="col-md-6"> 
           <div class="col-md-6" style="padding:0px;" > 
            <label for="mType" >Member Type*</label> <br /> 
             <select id="member" ng-model="inputForm.mType" style="height:35px;width:135px;"> 
              <option value="owner">Owner</option> 
              <option value="agent">Agent</option> 
              <option value="agent">Customer</option> 
             </select> 
           </div> 
           <div class="form-group"> 
            <div class="col-md-6" style="padding:0px;" > 
            <label for="gender" >Gender </label> <br /> 
             <select id="gender" ng-model="inputForm.gender" style="height:35px;width:135px;"> 
              <option value="male">Male</option> 
              <option value="female">Female</option> 
              <option value="other">Other</option> 
             </select> 
           </div>        
           </div>      
           <div class="form-group"> 
           <label for=''>First Name</label> 
           <input type='name' 
             name='fName' 
             ng-model="inputForm.fName" 
             ng-minlength="1" 
             ng-maxlength="25" 
             ng-pattern="/^[A-Za-z]+$/" 
             required 
           /> 
           <span ng-show="regform.fName.$error.pattern">Please enter valid number!</span> 

                   <!-- <span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span> 
                    <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span> 
                    <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span>--> 
         </div> 
           <div class="form-group"> 
            <label>Last Name : </label> 
            <input type="text" 
              name="lName" 
              class="form-control input-lg" 
              placeholder="Last Name" 
              ng-model="inputForm.lName" 
              style="height:35px"> 
            </input> 
           </div> 
           <div class="form-group">         
             <label for="DOB">Date of Birth :</label> 
              <input type="date" 
                id="dob" 
                class="form-control input-lg" 
                placeholder="Date Of Birth (mm/dd/yyyy)" 
                ng-model="inputForm.dob" 
                style="height:35px;"> 
              </input> 
           </div> 

           <div class="form-group">          
            <label>Adhar Number:</label> 
             <input type="text" id="adhar" 
               class="form-control input-lg" 
               placeholder="Adhar Number" 
               ng-model="inputForm.adhar" 
               style="height:35px"> 
             </input>   
           </div> 
           <div class="form-group"> 
            <label>PAN Number :</label> 
             <input type="text" id="pan" 
               class="form-control input-lg" 
               placeholder="PAN Number" 
               ng-model="inputForm.pan" 
               style="height:35px"> 
             </input> 
           </div> 
           <div class="form-group"> 
            <label>Email Address :</label> 
             <input type="email" id="email" 
               class="form-control input-lg" 
               placeholder="Your Email" 
               ng-model="inputForm.email" 
               style="height:35px"> 
             </input> 
             <!-- <span ng-show="studentForm.email.$touched && studentForm.email.$error.email">Please enter valid email id.</span>--> 
           </div>        

         </div> 
         <div class="col-md-5" > 
          <div class="full-width bg-transparent"> 
           <div class="full-width"> 
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
             <div class="custom-form"> 
              <div class="text-center bg-form"> 
               <div class="img-section"> 
                <img src="http://lorempixel.com/200/200/nature/" 
                 class="imgCircle" 
                 alt="Profile picture"> 
                 <span class="fake-icon-edit" 
                   id="PicUpload" 
                   style="color: #ffffff;"> 
                   <span class="glyphicon glyphicon-camera camera"></span> 
                 </span> 
                 <div class="col-lg-12"> 
                  <h4 class="text-right col-lg-12" style="color:balck;"> 
                   <span class="glyphicon glyphicon-edit"></span> Edit Profile 
                  </h4> 
                  <input type="checkbox" class="form-control" id="checker"></input> 
                 </div> 
               </div> 
               <input type="file" 
                 id="image-input" 
                 onchange="readURL(this);" 
                 accept="image/*" 
                 disabled class="form-control form-input Profile-input-file" > 
               </input> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="col-md-8" >      
          <hr class="colorgraph" style="height: 5px; 
                  border-top: 0; 
                  background: #62c2e4; 
                  border-radius: 5px;"> 
           <div class="col-xs-4 col-xs-offset-3"> 
            <a ui-sref="form.account" class="btn btn-lg btn-primary btn-block signup-btn" 
             style=" height:35px; 
               margin-bottom:10px; 
               padding:0px;" > 
             Next <span class="glyphicon glyphicon-circle-arrow-right"></span> 
            </a> 
           </div>     
         </div> 
        </form> 
       </div> 
      </div> 

image for reference

Пожалуйста, дайте предложения, чтобы изменить код так, чтобы соответствующие сообщения об ошибках будут отображаться элементами управления после проверки ввода ENTR пользователя.

Answer 1

Ваш вопрос немного расплывчато, как мы можем делать то, что вы спрашиваете, во многих отношениях, но найти ниже пример использования Bootstrap:

<form name="search" class="form-horizontal"> 

    <div class="form-group col-md-2 required" ng-class="{ 
     'has-feedback': (search.$submitted && search.carrier.$invalid), 
     'has-error': (search.$submitted && search.carrier.$invalid)}"> 
    <label class="control-label" for="carrier">Carrier Code:</label> 
    <input type="text" class="form-control" 
      id="carrier" name="carrier" 
      required 
      pattern="[a-zA-Z0-9-]{2,3}" 
      maxlength="3" 
      ng-model="myAngularCtrl.flightDetails.carrier"/> 
    <span ng-show="search.$submitted && search.carrier.$error.required" class="field_errormsg-below">The Carrier Code is Mandatory</span> 
    <span ng-show="search.$submitted && search.carrier.$error.pattern" class="field_errormsg-below">use only numbers, digit and -</span> 
    </div> 

    <button type="submit" 
      class="btn btn-default FHU_margin-top-20" 
      ng-click="myAngularCtrl.searchFlight(search)"> 
     Submit 
    </button> 

</form> 

У вас есть несколько вещей здесь:

Форма a name: search

Вы видите два вида сообщений об ошибке. Для того, чтобы они отображались, пользователь должен был попытаться отправить форму (поиск. $ Отправлен), и полевой оператор должен быть в ошибке (search.carrier. $ Error.required или search.carrier. $ Error.pattern)