我應該使用哪個類來解決angularjs輸入驗證的問題？

我創建了一個表單，然後應用了它的angularjs驗證。這項工作很好，但我面臨的一個問題，如果有人幫助我，我會明白這一點。形式的HTML代碼是在這裏我應該使用哪個類來解決angularjs輸入驗證的問題？

<div class="w3-twothird w3-container" ng-app> 
    <h2>Larger books order form</h2> 
    <h3>Please fill the following form to order a book!</h3> 
    <form class="form-horizontal" action="mail-proceeing-form.php" method="post" name="orderForm" novalidate> 
     <!-- Book Title --> 
     <div class="form-group"> 
     <div class="col-sm-10"> 
      <input type="text" name="bookTitle" ng-model="order.bookTitle" class="form-control" id="exampleInputName2" placeholder="Title" ng-required="true"> 
      <!--Error Start --> 
      <div ng-show="orderForm.bookTitle.$touched && orderForm.bookTitle.$invalid"> 
       <span class="text-danger">Please enter a book title!</span> 
      </div> 
      <!-- Error End --> 
     </div> 
     </div> 
     <!-- Book ISBN--> 
     <div class="form-group"> 
     <div class="col-sm-10"> 
      <input type="text" name="bookIBSN" ng-model="order.bookIBSN" class="form-control" id="exampleInputName2" placeholder="ISBN" ng-required="true"> 
      <!--Error Start --> 
      <div ng-show="orderForm.bookIBSN.$touched && orderForm.bookIBSN.$invalid"> 
       <span class="text-danger">Please enter IBSN!</span> 
      </div> 
      <!-- Error End --> 
     </div> 
     </div> 
     <!-- User Name --> 
     <div class="form-group"> 
     <div class="col-sm-10"> 
      <input type="text" name="name" ng-model="order.name" class="form-control" id="exampleInputName2" placeholder="Name" ng-required="true"> 
      <!--Error Start --> 
      <div ng-show="orderForm.name.$touched && orderForm.name.$invalid"> 
       <span class="text-danger"> Please enter your name!</span> 
      </div> 
      <!-- Error End --> 
     </div> 
     </div> 
     <!-- User Email --> 
     <div class="form-group"> 
     <div class="col-sm-10"> 
      <input type="email" name="email" ng-model="order.email" class="form-control" id="inputEmail3" placeholder="Email" ng-required="true"> 
      <!--Error Start --> 
      <div ng-show="orderForm.email.$touched && orderForm.email.$invalid"> 
       <span class="text-danger"> Please enter a valid email!</span> 
      </div> 
      <!-- Error End --> 
     </div> 
     </div> 
     <!-- User Message --> 
     <div class="form-group"> 
     <div class="col-sm-10"> 
      <textarea class="form-control" rows="3" placeholder="Your Message" name="message" ng-model="order.message" ng-required="true"></textarea> 
      <!--Error Start --> 
      <div ng-show="orderForm.message.$touched && orderForm.message.$invalid"> 
       <span class="text-danger"> Please enter your message!</span> 
      </div> 
      <!-- Error End --> 
     </div> 
     </div> 
     <!-- Submit Button --> 
     <div class="form-group"> 
     <div class="col-sm-10"> 
      <input type="submit" class="btn btn-success" value="Submit Request" ng-disabled="orderForm.$invalid"> 
     </div> 
     </div> 
    </form> 
</div>

角js和所有所需的文件被連接到的HTML。我使用的CSS是給定的。

input.ng-invalid.ng-touched, textarea.ng-invalid.ng-touched { 
    border: 2px solid red; 
}

如果你想檢查生活請fink鏈接。 http://manhattanmode.se/old-books/index.php

現在的問題是，如果用戶點擊輸入字段標題，並保留爲空，那麼用戶移動到下一個字段，即點擊ISBN。然後驗證消息出現，輸入字段邊框被清除。因此，用戶意識到我需要填寫「標題第一」，然後他再次點擊標題字段。但不幸的是，國際標準書號字段邊框變紅並出現驗證信息。我想要如果用戶點擊下一個領域，並留下其他空的驗證將顯示，否則它不會顯示。簡單地說，如果用戶點擊下一個驗證必須應用於先前，但如果用戶移回到之前驗證可能不適用於下一個。

This what I want

來源

2016-07-31 ziaullahzia

那麼，如果我有你的問題，你想每次只顯示1驗證？ – developer033

我希望這個視頻能夠更好地幫助理解我的問題[點擊觀看視頻]（https://youtu.be/4OY3BhXrqN0） – ziaullahzia

你好，developer033我發佈了視頻鏈接，希望對大家有幫助。我會說是，簡單如果用戶單擊標題並將其留空並移至ISBN，則需要顯示標題驗證。但如果他/她再次點擊標題，那麼它不能顯示ISBN驗證。 – ziaullahzia

據我知道有像form性能hasFocus或任何像這樣沒有財產。另外我注意到自2012年以來有一個issue要求類似的東西。

然後，以達到你想你可以用ngFocus和ngBlur指令玩什麼，如下：

<input type="text" ng-focus="isbnFocus=true" ng-blur="isbnFocus=false" name="bookIBSN" ng-model="order.bookIBSN" class="form-control" id="isbn" placeholder="ISBN" required> 
<!--Error Start --> 
<div ng-if="orderForm.bookIBSN.$invalid && orderForm.bookIBSN.$touched && !isbnFocus">

的完整code：

<!DOCTYPE html> 
 
<html ng-app> 
 

 
<head> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
 
</head> 
 

 
<body> 
 
    <div class="w3-twothird w3-container"> 
 
    <h2>Larger books order form</h2> 
 
    <h3>Please fill the following form to order a book!</h3> 
 
    <form class="form-horizontal" action="mail-proceeing-form.php" method="post" name="orderForm" novalidate> 
 
     <!-- Book Title --> 
 
     <div class="form-group"> 
 
     <div class="col-sm-10"> 
 
      <input type="text" ng-focus="titleFocus=true" ng-blur="titleFocus=false" name="bookTitle" ng-model="order.bookTitle" class="form-control" id="title" placeholder="Title" ng-required="true"> 
 
      <!--Error Start --> 
 
      <div ng-if="orderForm.bookTitle.$invalid && orderForm.bookTitle.$touched && !titleFocus"> 
 
      <span class="text-danger">Please enter a book title!</span> 
 
      </div> 
 
      <!-- Error End --> 
 
     </div> 
 
     </div> 
 
     <!-- Book ISBN--> 
 
     <div class="form-group"> 
 
     <div class="col-sm-10"> 
 
      <input type="text" ng-focus="isbnFocus=true" ng-blur="isbnFocus=false" name="bookIBSN" ng-model="order.bookIBSN" class="form-control" id="isbn" placeholder="ISBN" required> 
 
      <!--Error Start --> 
 
      <div ng-if="orderForm.bookIBSN.$invalid && orderForm.bookIBSN.$touched && !isbnFocus"> 
 
      <span class="text-danger">Please enter IBSN!</span> 
 
      </div> 
 
      <!-- Error End --> 
 
     </div> 
 
     </div> 
 
     <!-- User Name --> 
 
     <div class="form-group"> 
 
     <div class="col-sm-10"> 
 
      <input type="text" name="name" ng-focus="nameFocus=true" ng-blur="nameFocus=false" ng-model="order.name" class="form-control" id="name" placeholder="Name" required> 
 
      <!--Error Start --> 
 
      <div ng-if="orderForm.name.$invalid && orderForm.name.$touched && !nameFocus"> 
 
      <span class="text-danger"> Please enter your name!</span> 
 
      </div> 
 
      <!-- Error End --> 
 
     </div> 
 
     </div> 
 
     <!-- User Email --> 
 
     <div class="form-group"> 
 
     <div class="col-sm-10"> 
 
      <input type="email" name="email" ng-focus="emailFocus=true" ng-blur="emailFocus=false" ng-model="order.email" class="form-control" id="inputEmail3" placeholder="Email" required> 
 
      <!--Error Start --> 
 
      <div ng-if="orderForm.email.$invalid && orderForm.email.$touched && !emailFocus"> 
 
      <span class="text-danger"> Please enter a valid email!</span> 
 
      </div> 
 
      <!-- Error End --> 
 
     </div> 
 
     </div> 
 
     <!-- User Message --> 
 
     <div class="form-group"> 
 
     <div class="col-sm-10"> 
 
      <textarea class="form-control" ng-focus="messageFocus=true" ng-blur="messageFocus=false" rows="3" placeholder="Your Message" name="message" ng-model="order.message" required></textarea> 
 
      <!--Error Start --> 
 
      <div ng-if="orderForm.message.$invalid && orderForm.message.$touched && !messageFocus"> 
 
      <span class="text-danger"> Please enter your message!</span> 
 
      </div> 
 
      <!-- Error End --> 
 
     </div> 
 
     </div> 
 
     <!-- Submit Button --> 
 
     <div class="form-group"> 
 
     <div class="col-sm-10"> 
 
      <input type="submit" class="btn btn-success" value="Submit Request" ng-disabled="orderForm.$invalid"> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

個提示：

使用最好ngIf指令，而不是ngShow。
在你的情況下，ng-required="true"是不必要的，你可以像我一樣簡單地使用required。 ngRequired指令用於當您要將條件放入字段以使其成爲必需時。
我不知道你是否有像這裏一樣的id的所有字段，但它的語義不正確。

注意：我不認爲這是最好的解決方案，但我認爲它可以幫助你解決你的問題。

來源

2016-07-31 01:30:02 developer033

這看起來不錯..但在這個如果我點擊標題然後移動到ISBN然後標題驗證出現，當我再次點擊標題然後標題驗證消失。但是ISBN驗證顯示它看起來不太好。如果IBSN驗證不出現將會非常好。 – ziaullahzia

請最後解釋一下你想要的...... – developer033

你用的那個代碼就是答案我非常接近解決方案。現在我想要的是，如果我點擊沒有輸入值到第一個字段，並移動到下一個字段將顯示錯誤消息。但如果我再次點擊第一個字段，我離開的第二個字段不會顯示錯誤消息。 1.如果我去第二個領域，第一個領域會顯示錯誤，如果我在簡單的下一個領域去第三個領域，第二個領域會顯示錯誤。但如果用戶轉到前一個字段，那麼我不會顯示錯誤。 – ziaullahzia

我應該使用哪個類來解決angularjs輸入驗證的問題？

回答

相關問題