角AJAX验证。最好的办法，以prevent提交，而验证的进展如何？ [英] Angular AJAX validator. Best way to prevent submission while validation in progress?

问题描述

通过角的形式，很容易看到，如果一个形式为$有效或无效的$。这是伟大的，我只允许用户提交表单，如果它为$有效的。

不过，有一个简单的方法来表明它是在验证的过程中？ （而我们并不清楚它是否有效或无效）

这是可取的，如果你正在检查（例如），一个电子邮件地址是有效的。我不希望到现场表示此$无效，直到AJAX调用返回（否则我可能会显示错误给用户时，没有一个）。但我不希望他们能够提交，如果我们仍然在检查电子邮件地址...

有什么建议？

在code我用我的AJAX的验证是基于<一href="http://stackoverflow.com/questions/12864887/angularjs-integrating-with-server-side-validation">AngularJS:与服务器端验证集成（感谢@BenLesh）。

 函数linkFunc（范围，EL，ATTR，CTRL）{
  //当范围变更，检查电子邮件。
  范围$表（attr.ngModel，验证）;

  功能验证（值）
  {
    //显示为有效，直到被证明无效
    CTRL $ setValidity（'validateEmail，真正的）。

    //如果有一个previous企图，阻止它。
    如果（timeoutId）{
      clearTimeout（timeoutId）;
    }

    timeoutId = setTimeout的（功能（）{
      //使$ HTTP调用和$ setValidity
      $ http.get（URL）
      。然后（功能（数据）{
        。CTRL $ setValidity（'validateEmail'，data.isValid）;
      }）;
    }，200）;
  }
}
 

解决方案

您可以同时Ajax请求被处理的按钮禁用。您可以使用具有类似的逻辑字段集太结账吧<手动A HREF =htt​​p://www.w3schools.com/tags/att_fieldset_disabled.asp相对= nofollow的>字段集。

 功能验证（值）
{
  ctrl.waitingForAjax =真; //禁用所需的部分，同时等待响应//显示为有效，直到被证明无效
  CTRL $ setValidity（'validateEmail，真正的）。

  //如果有一个previous企图，阻止它。
  如果（timeoutId）{
    clearTimeout（timeoutId）;
  }

  timeoutId = setTimeout的（功能（）{
    //使$ HTTP调用和$ setValidity
    $ http.get（URL）
    。然后（功能（数据）{
      。CTRL $ setValidity（'validateEmail'，data.isValid）;
      ctrl.waitingForAjax = FALSE; //你可以让你的按钮，一旦你得到的回应
    }）;
  }，200）;
}
 

然后在您的看法：

 ＆LT;按钮NG-禁用=waitingForAjax../>
 

With Angular forms, it's easy to see if a form is $valid or $invalid. This is great and I only allow a user to submit the form if it is $valid.

But, is there an easy way to indicate that it is in the process of validating? (and we're not clear if it's valid or invalid)

This is desirable if you are checking (e.g.) that an email address is valid. I don't want to mark the field as being $invalid until the AJAX call has returned (otherwise I could be showing an error to the user when there isn't one). But I don't want them to be able to submit if we're still checking the email address...

Any suggestions?

The code I'm using for my AJAX validators is based on AngularJS: integrating with server-side validation (thanks to @BenLesh).

function linkFunc(scope, el, attr, ctrl) {
  // When the scope changes, check the email.
  scope.$watch(attr.ngModel, validate);

  function validate (value)
  {
    // Show as valid until proven invalid
    ctrl.$setValidity('validateEmail', true);

    // if there was a previous attempt, stop it.
    if(timeoutId) {
      clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(function() {
      // Make $http call and $setValidity
      $http.get(url)
      .then(function(data) {
        ctrl.$setValidity('validateEmail', data.isValid);
      });
    }, 200);
  }
}

解决方案

You can make the button disable while the ajax request is being processed. You can have a similar logic using fieldset too checkout the manual for it fieldset.

function validate (value)
{
  ctrl.waitingForAjax = true; // disable the required part while waiting for the response      // Show as valid until proven invalid
  ctrl.$setValidity('validateEmail', true);

  // if there was a previous attempt, stop it.
  if(timeoutId) {
    clearTimeout(timeoutId);
  }

  timeoutId = setTimeout(function() {
    // Make $http call and $setValidity
    $http.get(url)
    .then(function(data) {
      ctrl.$setValidity('validateEmail', data.isValid);
      ctrl.waitingForAjax = false; // you can enable your button once you got the response
    });
  }, 200);
}

Then in your view:

<button ng-disabled="waitingForAjax" ../>

这篇关于角AJAX验证。最好的办法，以prevent提交，而验证的进展如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！