[SOLVED] AutoForm - how to check for valid state on blur?

help
1

I’ve gone through the docs, but can’t seem to find what I’m looking for. I want the ability to detect a “valid” state (i.e. filled out and valid) so that I can set a specific class such as validated on my div.form-group. How do I go about doing this?

Here’s an example field:

<div class="form-group {{#if afFieldIsInvalid name="lastName"}}invalid{{/if}}">
  <div>
    <label>Last Name</label>
    <span class="help-block">
      {{afFieldMessage name="lastName"}}
    </span>
    {{> afFieldInput name="lastName"}}
  </div>
  <i class="fa fa-check-circle-o fa-2x"></i>
</div>

And the blur part is already handled:

{{#autoForm collection="Leads" id="lead-form" type="insert" validation="blur"}}

So the .fa-check-circle-o should light up green once I append the validated class to the div.form-group.

2

I’d almost like to write my own helper function for this, actually:

<div class="form-group {{fieldState "lastName"}}">
  ...

Template.myForm.helpers({
  fieldState: function (fieldName) {
    var $fieldVal = Template.instance().$(`input[name="${fieldName}"]`).val();

    if ($fieldVal === '') {
      return 'incomplete';
    } else {
      if (AutoForm.someValidationChecker($fieldVal)) {
        return 'validated';
      } else {
        return 'invalid';
      }
    }
  }
});

Except I don’t think AutoForm exposes any kind of JS function to check field validity based on the schema.

3

Anyone? @aldeed? :slight_smile:
I may have to hack the AutoForm package to expose a couple functions.

4

Enough digging around and eventually a solution presents itself!

Template.myForm.helpers({
  fieldState: function (fieldName) {
    MyNamespace.leadForm.depend();

    if (Template.instance().view.isRendered) {
      var $input = Template.instance().$(`input[name="${fieldName}"]`);
      var fieldInvalid = Blaze._globalHelpers.afFieldIsInvalid({
        hash: {name: fieldName}
      });

      if (fieldInvalid) {
        return 'invalid';
      } else {
        if ($input.val() === '') {
          return 'incomplete';
        } else {
          return 'validated';
        }
      }
    }
  }
});