使用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进行表单提交的复选框验证

回答

相关问题