I need help to do inline validations on ember forms

anaspm · February 25, 2016, 10:13am

I wish to use an add-on to do validations on my ember form which lies in a component .

I tried to use ember-cp-validation add-on I followed the instructions provided by their git. In that i couldn’t find any changes to handlebar. And it didn’t worked for me. Please help me

Yaroslav_Poliakov · February 25, 2016, 10:40am

In my pet-project I used ember-cp-validations that you mentioned. Here is working example from my code:

github.com

drinkit/ember-client/blob/master/app/components/signup-window.js

import { inject as service } from '@ember/service';
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import Object from "@ember/object";
import CryptoJS from 'crypto-js';
import {
  validator,
  buildValidations
}
from 'ember-cp-validations';
import { getOwner } from '@ember/application';

const Validations = buildValidations({
  displayName: validator('presence', {
    presence: true,
    message: 'Это поле не должно быть пустым'
  }),
  email: [
    validator('presence', {

This file has been truncated. show original

github.com

drinkit/ember-client/blob/master/app/templates/components/signup-window.hbs

<ModalDialog @overlayClass="bg-gray-transparent" @overlayPosition="sibling" @containerClass="p-0" @onClose={{action 'close'}}>
  <div class="w-[350px]">
    <div class="flex justify-between p-4 border-b border-gray-300">
      <h4 class="font-georgia text-lg text-violet">Регистрация</h4>
      <button type="button" class="text-gray-500 text-xl font-bold -mt-2 hover:text-gray-700" {{action "close"}} aria-label="Close">&times;</button>
    </div>
    <div class="p-4 border-b border-gray-300">
      <ValidatedInput @type="text" @model={{this.validationModel}} @placeholder="Отображаемое имя..." @valuePath="displayName"/>
      <ValidatedInput @type="email" @model={{this.validationModel}} @placeholder="Электронный адрес..." @valuePath="email"/>
      <ValidatedInput @type="password" @model={{this.validationModel}} @placeholder="Пароль..." @valuePath="password"/>
      <ValidatedInput @type="password" @model={{this.validationModel}} @placeholder="Пароль..." @valuePath="passwordConfirmation"/>
      <button type="button" class="block h-[37px] w-full border border-greengray rounded-[4px] text-light_green font-gothic font-bold focus:outline-none hover:bg-gray-200 active:shadow-inner active:bg-green-200 disabled:cursor-not-allowed disabled:opacity-50" disabled={{v-get this.validationModel 'isInvalid'}} {{action "register"}}>Зарегистрироваться</button>
      {{#if this.hasError}}
        <span class="text-sm text-gray-700 font-gothic">Такой пользователь уже существует</span>
      {{/if}}
    </div>
    <div class="flex justify-between items-center p-4">
      <span class="text-sm text-gray-700 font-gothic">Уже есть аккаунт?</span>
      <button type="button" class="block h-[37px] w-[100px] border border-greengray rounded-[4px] text-light_green font-gothic font-bold focus:outline-none hover:bg-gray-200 active:shadow-inner active:bg-green-200" {{action 'login'}}>Вход</button>
    </div>

This file has been truncated. show original

github.com

drinkit/ember-client/blob/master/app/templates/components/validated-input.hbs

<div class="relative {{if this.showErrorClass "has-error"}} {{if this.isValid "has-success"}}">
  <Input type={{@type}} @value={{mut (get @model @valuePath)}} placeholder={{@placeholder}} class="block w-full mb-2 border border-gray-500 rounded-[4px] px-[12px] py-[6px] text-sm text-gray-700 italic font-gothic focus:outline-none focus:border-blue-400 focus:shadow-input" name={{@valuePath}}/>
  {{#if this.isValid}}
    <span class="absolute inline-flex top-0 right-0 z-10 w-[34px] h-[34px] justify-center items-center font-black text-green-600" aria-hidden="true">&#x2713;</span>
  {{/if}}
  {{#if this.showErrorMessage}}
    <span class="absolute inline-flex top-0 right-0 z-10 w-[34px] h-[34px] justify-center items-center text-lg font-black text-red-700" aria-hidden="true">&times;</span>
    <span class="block text-sm font-gothic mb-3 text-red-800">
      {{v-get @model @valuePath 'message'}}
    </span>
  {{/if}}
</div>

github.com

drinkit/ember-client/blob/master/app/components/validated-input.js

import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';

export default class ValidatedInput extends Component {
  @tracked showValidations = false;

  get validation() {
    return this.args.model.validations.attrs[this.args.valuePath];
  }

  get value() {
    return this.args.model[this.args.valuePath];
  }

  get notValidating() {
    return !this.validation.isValidating;
  }

  get hasContent() {
    return !!this.value;

This file has been truncated. show original

Lasts two files I got from add-on examples. Hope it helps.

anaspm · February 25, 2016, 10:43am

in hbs files you are using the handlebar “validated-input”, is it from cp-validations???

Yaroslav_Poliakov · February 25, 2016, 10:50am

I take it from ember-cp-validations/tests/dummy/app at 7433fdb2ce7d22f956ca97a9b3291fe9c6637446 · adopted-ember-addons/ember-cp-validations · GitHub. You can write your own similar component with desired logic. It used just to show validation success/error on each input.

anaspm · February 25, 2016, 11:18am

As I mentioned I have my form in a component.

Please excuse am new to ember.

could you plzz tell me what all steps i need to follow.

do i need to create another component for validate-input.

can i simply copy and paste this code to my application

this is my hbs file

Name {{validated-input type=text value=demo.name maxlength=20 class="form-control" valuePath="name" id="exampleInputEmail3" placeholder="Enter the name " required=true}} {{#if hasError}} Такой пользователь уже существует {{/if}}

Email {{input type=email data-fv-emailaddress-message="The value is not a valid email address" value=demo.email class="form-control" id="exampleInput58" placeholder="email id" required=true}}

anaspm · February 25, 2016, 11:26am

why it is used model=this in signup-window.hbs {{validated-input type=“text” model=this placeholder=“Отображаемое имя…” valuePath=“displayName”}}

Topic		Replies	Views
Ember Validations + Semantic UI Validations	4	2062	August 23, 2016
How should input validation be done with Ember?	4	22520	April 6, 2013
Ember CP validations action not firing Questions	1	533	May 14, 2018
Ember CP validations disable Questions	2	1772	May 20, 2018
How to decorate a view?	0	899	December 2, 2014

I need help to do inline validations on ember forms

Related Topics