Question

您好，我的机智已经结束，而且我一直在努力创建比我提供的示例更复杂的表单版本。

我有JS对象，它是表单的表示。我在表单本身使用了parsley的“isValid”（checkAll和checkGroup函数）。这些方法在每个标有data-parsley-required属性的输入上触发。原因是我需要知道整个表单的状态和它的部分，以便我可以启用/禁用步骤按钮。

一切正常但我还需要在所有验证成功后调用外部API，请参见第35行。方法checkAll和checkGroup基本上再次触发事件，从而进行更多的AJAX调用（我们限制对API的调用）。有没有办法强制方法isValid只检查字段是否已经过验证并从中获取真/假值？

整个事情都是编码的，取决于这种结构，所以最好的方法是拥有类似的功能。我不是那么有经验所以我犯了很多错误。我的示例是我的实际表单的非常简化版本，但是当您打开控制台窗口时，您可以看到我的意思。取消注释第32和33行以查看差异，您将知道我的意思。

Example code

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
<form action="" id="myform">
  <div id="section1">
  <input type="text" id="field1" data-parsley-required data-parsley-trigger="input" data-parsley-group="group1" data-parsley-lengthvalidator data-parsley-remote="http://pokeapi.co/api/v2/pokemon/1" data-parsley-remote-validator="remotevalidator" /><br />
  <button id="next" disabled>Next</button><br />
  </div>
  <div id="section2">
  <input type="text" id="field2" data-parsley-required data-parsley-trigger="input" data-parsley-group="group2" />
  </div>
  <input type="submit" id="submit-button" disabled />
</form>
</body>
</html>

JS：

function Form(form) {
  this.form = form;
  this.validations = {};
  this.formValid = false;
  this.checkAll = function() {
    var result = $(form).parsley().isValid();
    if (result) {
      $('#submit-button').removeAttr('disabled');
      console.log('form validated');
    } else {
      $('#submit-button').attr('disabled', true);
    }
   this.formValid = result;
  };
  this.checkGroup = function(e) {
    var group = $(e.target).attr('data-parsley-group');
    var result = $(form).parsley().isValid({group: group});
    if (result) {
      $('#next').removeAttr('disabled');
      console.log('group validated');
    } else {
      $('#next').attr('disabled', true);
    }
    this.validations[group] = result;
  };
 this.initialize = function() {
   var self = this;

   $(this.form).parsley();
   $('*[data-parsley-required]').on('input', function(e) {
     self.checkAll();
    self.checkGroup(e);
   });

   $('#field1').parsley().on('field:success', function() {
       console.log('calling another API')
   })

   Parsley.addValidator('lengthvalidator', {
      validateString: function(value) {
        console.log('local validator');
        return value.length > 0;
      }
   });
   Parsley.addAsyncValidator('remotevalidator', function(response) {
      console.log('remote validator');
      return response.responseJSON.name === 'bulbasaur';

     })
   }
  }

 var form = new Form('#myform');
 form.initialize();

parsley.js - 阻止isValid触发事件/只检查true或false

0 个答案: