Question

我正在尝试提交一个空白表单，该表单应该在我的必填字段上触发一些自定义错误消息。所有验证都完美无缺。只有当第一次加载表单并且用户直接点击提交按钮而不单击表单中的任何位置时，才会出现问题。因此，会显示Checkbox错误消息，但不会显示输入标记错误消息。自定义指令emailValidate使用正则表达式验证blur事件的电子邮件地址。

有什么方法可以在提交按钮上显示输入标记的错误消息，如果它是空的，则单独单击。

请在下面找到我的代码 -

HTML代码 -

    <div ng-controller="NewsletterController" class="overlayContent" id="newsletterOverlayContent" novalidate>

<p>
    <label>Email<span class="mandatory">*</span></label>
    <input type="email" ng-model="user.email" email-validate required name="email" />
    <span class="ui-state-error h5-message" ng-show="_ServerForm.email.$error.emailValidate && _ServerForm.email.$error.required">
        <span class="h5-arrow"></span>
        <span class="h5-content">Error</span>
    </span>
</p>

<p class="align">
    <input type="checkbox" ng-model="user.termsagreement" name="termsagreement" value="true" required id="TermsAndConditions">
    <span class="ui-state-error h5-message" ng-show="_ServerForm.termsagreement.$error.required && buttonClicked">
        <span class="h5-arrow"></span>
        <span class="h5-content">I agree</span>
    </span>
    <span class="checkBoxText">
        <span class="mandatory">*</span>Check the box
    </span>
</p>

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

Controller.js

    function NewsletterController($scope) {
       $scope.submitform = function ($event) {
       $event.preventDefault();
       $scope.buttonClicked = true;
       }
     }
     NewsletterController.$inject = ['$scope'];

Answer 1

@MWay - 我正在经历某些最佳实践，并发现不建议使用for Loop是Angular JS。

所以我遇到问题的解决方案是 -

     <span class="ui-state-error h5-message" ng-show="(_ServerForm.email.$dirty && _ServerForm.email.$error.emailValidate) || (buttonClicked && _ServerForm.email.$invalid)">

Answer 2

关于此的一些事情：

你确定吗？

您当前的代码示例实际上并未显示<form>标记。
如果表单无效，您是否考虑过停用提交按钮？
为什么不在创建验证时显示验证问题？为什么让用户等到他们认为他们已经准备好提交表单，然后告诉他们搞砸了？对我来说似乎是糟糕的用户体验。

好的，所以你确定，这就是你所做的：

所有这些说明，您可以通过ng-click 和 ng-submit一起工作来完成您的尝试：

您的观点：

<form name="myForm" ng-submit="submitForm()">
  <label>Name <input type="text" name="name" ng-model="name" required/></label>
  <span ng-show="myForm.name.$error.required && buttonClicked">required</span>
  <button ng-click="buttonClicked = true">Submit</button>
</form>

和您的控制人员：

app.controller('MainCtrl', function($scope, $window) {
  $scope.name = 'World';

  $scope.submitForm = function (){
    $window.alert('form submitted!');
  }
});

以及gratuitous Plunk

其他事项：

如果您正在使用Angular表单验证和ng-submit，则无需担心$event.preventDefault()。一般来说，你几乎不需要使用$event，这个例外是嵌套ng-clicks，即便如此，你也可以直接在视图上使用它...但这是一个不同的主题

同样，通常情况下，您几乎不需要从控制器中引用ngModels（存储在$scope.formNameHere中）。如果你是，你可能想调查是否有一种更好的，可重复使用的方式来做你正在做的事情......就像一个自定义验证指令。

我希望有所帮助。

Answer 3

在提交/点击时使用此项：

var submitValidate = function(_form) {
    for (field in _form) {
        // look at each form input with a name attribute set
        // checking if it is pristine and not a '$' special field
        if (field[0] != '$' && _form[field].$pristine) {
            // set it to the current model value (ie. leaving as is)
            _form[field].$setViewValue(_form[field].$modelValue);
        }
    }   
};

编辑：

我现在已经包含了一个工作小提琴，它使用上述功能来解决您的问题。首先单击提交按钮进行测试： http://jsfiddle.net/HB7LU/1804/

Angular JS中的强制字段验证

3 个答案:

你确定吗？

好的，所以你确定，这就是你所做的：

其他事项：