Validation error not bound to textfield

[MarcoTroost]

Hi,

First of all, thank you for the great work on BalmUI!
Love the fact that it follows MDC very closely.

I'm experiencing an issue with the validator though.
The form does validate (response is not valid when printed to the console), but the invalid class isn't bound to the faulty element, nor does it update the validation message.

Can you see what is the matter?

`

<div
    class="mc-login"
    :class="{
        'mc-login--user' : step == 1,
        'mc-login--pass' : step == 2
    }"
>
    <div class="mc-login-box">
        <ui-form>
            <!-- Step 1 -->
            <div class="mc-login-step mc-login-step--one">
                <div class="mc-login-user">
                    <header class="mc-login-step__hdr">
                        <h1 class="md-t4 text-primary">Subscribe</h1>
                    </header>
                    <ui-form-field class="form-item">
                        <ui-textfield
                            id="user"
                            v-model="userData.user"
                            :attrs="{name: 'naam'}"
                            maxlength="64"
                            @enter="gotoPass"
                            helper-text-id="mobile-helper-text"
                            outlined
                        >
                           Customernr.
                        </ui-textfield>
                        <ui-textfield-helper
                                id="user-helper-text"
                                v-model="validMsg.user"
                        ></ui-textfield-helper>
                    </ui-form-field>
                </div>
                <div class="mc-login-step__btns">
                    <ui-button
                        class="mdc-button--login"
                        unelevated
                        @click="gotoPass"
                    >
                        next
                    </ui-button>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="mc-login-step mc-login-step--two">
                <div class="mc-login-pass">
                    <span class="mc-login-step-back">
                        <ui-icon-button
                            class="mdc-icon-button--back-login"
                            @click="backtoUser"
                        >
                            <span class="material-icons-outlined">arrow_back</span>
                        </ui-icon-button>
                        {{ customer }}
                    </span>
                    <header class="mc-login-step__hdr">
                        <h1 class="md-t4 text-primary">Password</h1>
                    </header>
                    <div class="text-field-wrapper">
                        <ui-textfield
                            id="pwd"
                            v-model="passData.password"
                            :input-type="passWordType"
                            :attrs="{name: 'password'}"
                            maxlength="64"
                            outlined
                        >
                            Password
                        </ui-textfield>
                        <div class="toggle-input-type">
                            <ui-icon-button
                                @click="toggleInputType"
                                class="mdc-icon-button--visibility"
                            >
                                <template #default="{ onClass, offClass }">
                                    <span class="material-icons-outlined" :class="onClass">visibility_off</span>
                                    <span class="material-icons-outlined" :class="offClass">visibility</span>
                                </template>
                            </ui-icon-button>
                        </div>
                    </div>
                </div>
                <ui-form-field class="mc-login-step__btns">
                    <ui-button
                        class="mdc-button--login"
                        unelevated
                        @click="gotoPass"
                    >
                        Volgende
                    </ui-button>
                </ui-form-field>
            </div>

        </ui-form>
    </div>

</div>

<script> export default { validations: { user: { label: 'Username', validator: 'required', }, }, data() { return { step: 1, userData: { user: '' }, passData: { password: '' }, validMsg: { user: '' }, cloakPassWord: true, passWordType: 'password' }; }, computed: { customer: function() { return (isNaN(this.userData.user)) ? this.userData.user : 'Customernr. ' + this.userData.user ; } }, methods: { gotoPass() { let result = this.$validate(this.userData); let { valid, validMsg } = result; console.log(result); if (!valid) { return; } this.step = 2; }, backtoUser() { this.step = 1 }, toggleInputType() { this.cloakPassWord = !this.cloakPassWord; this.passWordType = (this.cloakPassWord) ? 'password' : 'text'; } } } </script>`

Kind regards,

Marco

[elf-mouse]

Hi Marco,

• First, <ui-textfield helper-text-id="xxx"> and <ui-textfield-helper id="xxx"> must match each other
• Then, there are three methods for the step-by-step verification:

1. using computed

export default {
  data() {
    return {
      formData: {
        user: '',
        password: ''
      }
    }
  },
  computed: {
    validations() {
      return this.step === 1
        ? {
            user: {
              label: 'Username',
              validator: 'required'
            }
          }
        : {
            password: {
              label: 'Password',
              validator: 'required'
            }
          };
    }
  },
  methods: {
    gotoPass() {
      let result = this.$validate(this.formData);
      // ...
    }
  }
};

2. using customFieldset for $validate

export default {
  validations: {
    user: {
      label: 'Username',
      validator: 'required'
    },
    password: {
      label: 'Password',
      validator: 'required'
    }
  },
  data() {
    return {
      formData: {
        user: '',
        password: ''
      }
    }
  },
  methods: {
    gotoPass() {
      let customFieldset = this.step === 1 ? ['user'] : ['password'];
      let result = this.$validate(this.formData, customFieldset);
      // ...
    }
  }
}

3. using $resetValidations and $setValidations

export default {
  data() {
    return {
      formData: {
        user: '',
        password: ''
      }
    }
  },
  methods: {
    gotoPass() {
      this.$resetValidations();

      let customValidations =
        this.step === 1
          ? {
              user: {
                label: 'Username',
                validator: 'required'
              }
            }
          : {
              password: {
                label: 'Password',
                validator: 'required'
              }
            };
      this.$setValidations(customValidations);

      let result = this.$validate(this.formData);
      // ...
  }
};

I will update the relevant documents as soon as possible.
Thanks for your attention :)

[MarcoTroost]

Hi Elf-mouse,

Thank you for the elaborate explanation. The problem i'm experiencing isn't with the actual validation though (this works), but the invalid style isn't bound the the textfield (mdc-text-field--invalid).

This is what I see when i click on the button:

The formdata is not valid, as is expected, but there is no styling.

regards, Marco

[elf-mouse]

Because there is no specific usage of mdc-text-field--invalid or mdc-select--invalid in the MDC official documentation, I did not add the invalid prop in <ui-textfield> or <ui-select>, but triggered it through <ui-textfield-helper> or <ui-select-helper>'s validMsg(v-model) prop.

I have updated new demos to the document, and the current invalid message is displayed through <ui-alert> or <ui-textfield-helper>/<ui-select-helper>.

If you have any better ideas, please let me know, thanks :)

[MarcoTroost]

Hi Elf-mouse,

Thank you for your help. The validator now works as a charm!

I can follow your logic not to add an invalid prop to <ui-textfield>, but to me, the trigger through <ui-textfield-helper> or validMsg wasn't self-explanatory.

Perhaps you could add to the documentation that either <ui-textfield-helper> or validMsg is mandatory in order to receive the invalid styling on the invalid elements.

kind regards, Marco

[elf-mouse]

@MarcoTroost , Thank you for your valuable suggestions!

I will improve related documents in the next update.