使用Angular JS進行表單提交的複選框驗證

我是Angular JS的新手。我創建了一個表單，其底部有一個條款&協議複選框。我的要求是當用戶點擊提交按鈕而沒有選中複選框時，應該顯示包含錯誤信息的div。使用Angular JS進行表單提交的複選框驗證

目前，如果未選中該複選框，則只會顯示紅色作爲其必填字段。如何將ng提交功能與複選框勾選綁定，並顯示一個div。

我的HTML看起來像這樣 -

<p class="note"> 
    <input type="checkbox" ng-model="user.termsagreement" name="termsagreement" value="true" required id="TermsAndConditions"> 
    <span class="checkBoxText"> 
    <span class="mandatory">*</span>I agree to the Terms & conditions</span> 
    </p> 
    <div class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required">Please select the Checkbox before submit</div> 

    <div style="float:right" class="buttonSimple"> 
     <a name="Register" id="RegisterUser" href="#" class="" ng:click="submitform(true)"><span>Registrieren</span></a> 
    </div>

來源

2014-01-22 Achyut

您是否嘗試過任何操作？ –

是的，我試着給出包含錯誤消息的屬性ng-show =「_ ServerForm.termsagreement。$ error.required」，但這又導致錯誤消息一直出現，只有當我點擊複選框時纔會消失。但我的要求是該消息應該只出現在點擊提交按鈕上。我不知道如何覆蓋REQUIRED指令來控制提交按鈕點擊 – Achyut

你可以把這個HTML到你的問題？ –

一個可能的解決方案是： -

1）在功能

submitform()

你應該設置一些隨機變量名稱真正。說

$scope.buttonClicked=true;

2.）在HTML代碼中，

變化

<div class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required">Please select the Checkbox before submit</div>

到

<div class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required && buttonClicked">Please select the Checkbox before submit</div>

的buttonClicked變量將在範圍中設置的按鈕僅是後點擊並調用函數。你的信息的ng-show將不會顯示，直到buttonClicked被設置。

我相信這會回答你的問題。

來源

2014-01-22 08:18:28

這個工作就像魅力一樣。 #saraj – Achyut

或者您可以使用表單。$提交併輸入$。下面是使用引導程序的完整示例：

<form name="vm.form" class="form-horizontal" ng-submit="vm.register()"> 
    <div>some other controls</div> 
    <div ng-class="{ 
         'has-error': vm.form.acceptedTerms.$invalid && (vm.form.$submitted || vm.form.acceptedTerms.$touched), 
         'has-success': vm.form.acceptedTerms.$valid && vm.form.acceptedTerms.$touched 
        }"> 
     <div class="form-group"> 
      <div class="col-sm-offset-2 col-sm-10"> 
       <div class="checkbox"> 
        <label> 
         <input type="checkbox" name="acceptedTerms" ng-model="vm.acceptedTerms" required> I accept the ToC</a> 
        </label> 
       </div> 
       <div class="row" ng-show="vm.form.acceptedTerms.$error && (vm.form.$submitted || vm.form.acceptedTerms.$touched)"> 
        <div class="col-sm-12"> 
         <span class="help-block" ng-show="vm.form.acceptedTerms.$error.required">You need to accept ToC</span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</form>

來源

2016-02-22 21:55:35

使用Angular JS進行表單提交的複選框驗證

回答

相關問題