Question

我想使用Meteor为表单创建自定义字段验证。我不想要一个打包的解决方案。

到目前为止，这是我的代码。

JavaScript的：

var errorState = new ReactiveVar;


Template.lottoForm.created = function() {
    errorState.set('errors', {});
};


Template.lottoForm.events({
    'blur input': function(e, t) {
        e.preventDefault();
        validate($(this));
    }
});


Template.lottoForm.helpers({
    errorClass: function (key) {
        return errorState.get('errors')[key] ? 'has-error' : '';
    }
});


Template.errorMsg.helpers({
    errorMessages: function(key) {
        return errorState.get('errors');
    }
});

function throwError(message) {
    errorState.set('errors', message)
    return errorState.get('errors');
}


function validate(formField) {
    $("input").each(function(index, element){
        var fieldValue = $(element).val();
        if(fieldValue){
            if(isNaN(fieldValue) == true) {
                throwError('Not a valid Number');
            }
        }
    });
}

HTML：

<template name="lottoForm">
    <form class="playslip form-inline" role="form">
      <fieldset>
        <div class="form-group {{errorClass 'ball0'}}">
          <input type="text" class="input-block form-control" id="ball0" maxlength="2" name="ball0">
        </div>
        <div class="form-group {{errorClass 'ball1'}}">
          <input type="text" class="input-block form-control" id="ball1" maxlength="2" name="ball1">
        </div>
        <div class="form-group {{errorClass 'ball2'}}">
          <input type="text" class="input-block form-control" id="ball2" maxlength="2" name="ball2">
        </div>
        <div class="form-group {{errorClass 'ball3'}}">
          <input type="text" class="input-block form-control" id="ball3" maxlength="2" name="ball3">
        </div>
        <div class="form-group {{errorClass 'ball4'}}">
          <input type="text" class="input-block form-control" id="ball4" maxlength="2" name="ball4">
        </div>
        <div class="form-group {{errorClass 'ball5'}}">
          <input type="text" class="input-block form-control" id="ball5" maxlength="2" name="ball5">
        </div>
        {{> errorMsg}}
        <div class="play-btn">
          <button type="submit" value="submit" class="btn btn-primary">Play Syndicate</button>
        </div>
      </fieldset>
    </form>
</template

<template name="errorMsg">
    <div class="errorMsg">
      {{#if errorMessages}}
          <div class="list-errors">
            {{#each errorMessages}}
                <div class="list-item">{{> fieldError}}</div>
            {{/each}}
          </div>
      {{/if}}
    </div>
</template>

<template name="fieldError">
    <div class="alert alert-danger" role="alert">
      {{errors}}
    </div>
</template>

我也在控制台中收到此错误消息 - ＆＃34;未捕获错误：{{#each}}目前只接受数组，游标或falsey值。＆＃34;

为什么我会收到此错误以及如何实施自定义验证？

Answer 1

正如错误所述，#each模板函数必须传递正确的类型。你确定你的errorMessages助手正在返回一个数组吗？看起来你正在将它初始化为哈希。

Meteor - 如何为表单创建自定义字段验证

1 个答案: