2014-09-22 176 views
4

我想驗證沒有提交按鈕的表單。表單驗證angularjs無提交按鈕

<div ng-controller="UserCreationCtrl"> 
     <form novalidate="novalidate" class="form-horizontal"> 
      <div class="control-group"> 
       <label class="control-label" for="inputUserLogin">User Login:</label> 

       <div class="controls"> 
        <input type="email" id="inputUserLogin" ng-model="user.userLogin" placeholder="User Login" required /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="inputFirstName">First name:</label> 

       <div class="controls"> 
        <input type="text" id="inputFirstName" ng-model="user.firstName" placeholder="First name"/> 
       </div> 
      </div> 

      <div> 
       <span class="nullable"> 
        <select ng-model="user.lookupId" ng-options="select as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()"> 
         <option value="">-- choose speciality --</option> 
        </select> 
       </span> 
      </div> 
      <div> some extra other fields goes here</div> 
      <div class="control-group"> 
       <div class="controls"> 
        <a ng-click="cancel()" class="btn btn-info btn-xs">cancel</a> 
        <a ng-click="createNewUser()" class="btn btn-small btn-primary">create new user</a> 
       </div> 
      </div> 

     </form> 
    </div> 

如何使userlogin(email)firstnamespeciality領域強制性的,email場必須進行驗證電子郵件。通常,我們如何驗證沒有提交按鈕的表單。即,當我點擊「創建新用戶」鏈接時,表單應該被驗證。

當單擊鏈接後發生錯誤時,表單應該具有正確的字段數據,它應該只顯示錯誤字段旁邊的錯誤消息,或者顯示帶有紅色字段的錯誤消息。

我們可以在沒有控制器的情況下在html本身中對錶單進行客戶端驗證嗎?

感謝

回答

2

在$表格名稱。使用$有效 所有必需的輸入字段需要必需的屬性。

<form novalidate="novalidate" class="form-horizontal" name='myForm'> 
<a ng-click="createNewUser()" class="btn btn-small btn-primary" ng-disabled="!myForm.$valid">create new user</a> 
</form> 

http://plnkr.co/edit/6zVqTeW1WARIUcbS7dC9?p=preview

+0

領域的驗證未與您的解決方案工作。我給了一個表單的名稱和我添加的ng-disabled =「myForm。$ valid」的按鈕。 – 2014-09-22 08:53:12

+0

@PraveenReddy'ng-disabled =「!myForm。$ valid」' – karaxuna 2014-09-22 08:57:08

+0

抱歉,我錯過了!之前的代碼,但仍然按鈕「創建新用戶」被禁用,當我點擊按鈕控制器中的方法被調用沒有任何驗證。 – 2014-09-22 09:01:39

0

回答您的問題:

  • 必填字段使用的是 「必需的」 屬性(HTML5)評估。
  • 使用「email」類型(HTML5)評估電子郵件字段。
  • 您可以使用「提交」類型按鈕或「ng-click」指令進行提交。
  • AngularJS自定義驗證應使用指令完成(請參閱docs)。
  • 在這裏你有自定義驗證的例子:

<form name="form" class="css-form" novalidate> 
    <div> 
    Size (integer 0 - 10): 
    <input type="number" ng-model="size" name="size" 
      min="0" max="10" integer />{{size}}<br /> 
    <span ng-show="form.size.$error.integer">This is not valid integer!</span> 
    <span ng-show="form.size.$error.min || form.size.$error.max"> 
     The value must be in range 0 to 10!</span> 
    </div> 

    <div> 
    Length (float): 
    <input type="text" ng-model="length" name="length" smart-float /> 
    {{length}}<br /> 
    <span ng-show="form.length.$error.float"> 
     This is not a valid float number!</span> 
    </div> 
</form> 
+1

這裏只檢查長度。要求是,點擊按鈕後,只有表單驗證應該開始,即必需的字段驗證,電子郵件驗證等。 – 2014-09-23 08:45:30

0
<form name="form_validation" ng-submit="form_validation.$valid && submit()" novalidate> <div ng-show="form_validation.$submitted || form_validation.to_address.$touched"> 
    <div class="alert alert-warning" ng-show="form_validation.to_address.$error.required || form_validation.to_address.$error.email"><a href="#" class="close" data-dismiss="alert">&times;</a>Enter valid Email Addresses.</div> 
</div> 
<div class="form-group"> 
    <label for="ToAddress"> To Address: </label> 
    <input type="email" name="to_address" id="to_address" class="form-control" ng-model="user.to_address" ng-required="true"/> 
</div> 

試試這個上面, http://www.drtuts.com/handle-form-using-angularjs/

+0

儘管這段代碼可能有助於解決問題,但它並沒有解釋_why_和/或_how_它是如何回答問題的。提供這種附加背景將顯着提高其長期教育價值。請[編輯]您的答案以添加解釋,包括適用的限制和假設。 – 2016-08-22 14:01:30