I am using ember-cp-validations add-on to validate ember form
I have created form using bootstrap modal dialog in a component.
I used v-get helper to show the message
<form>
{{input value=model.username placeholder="Username"}}
{{#if (v-get model 'username' 'isInvalid')}}
<div class="error">
{{v-get model 'username' 'message'}}
</div>
{{/if}}
<button type="submit" disabled={{v-get model 'isInvalid'}}>Submit</button>
</form>
is there anyything otherthan this to make the validations working?????
Hey,
Have you specified a Validator for the model you want to validate(GitHub - adopted-ember-addons/ember-cp-validations: Ember computed property based validations)? If so, what does it look like?
I did on component level and it is working fine.
but the problem is, I am rendering the validation messages on a new component named validate-input
inside validate-input I am specifying the input fields like ,
import Ember from 'ember';
import { buildValidations, validator } from 'ember-cp-validations';
const Validations = buildValidations({
email: [
validator('presence', true),
validator('format', { type: 'email' })
],
password: [
validator('presence', true),
validator('length', { min: 3 })
]
});
export default Ember.Component.extend(Validations, {
authentications: Ember.inject.service(),
actions: {
signIn() {
let credentials = this.getProperties('email', 'password', 'remember_me');
this.get('authentications').signIn(credentials);
}
}
});and here is the template ( with sign in disabled unless the form is valid )<form {{action 'signIn' on='submit'}}>
{{validated-input model=this valuePath='email' placeholder='em@i.l'}}
{{validated-input model=this valuePath='password' placeholder='Pa$$w0rd' type='password'}}
<label for='remember_me'>Remember Me</label>
{{input id='remember_me' type='checkbox' checked=remember_me}}
<button type='submit' disabled={{this.validations.isInvalid}}>Sign In</button>
</form>
<div class="form-group">
{{input type=type value=value placeholder=placeholder class="form-control" name=valuePath}}
{{#if isValid}}
<span class="valid-input fa fa-check"></span>
{{/if}}
<div class="input-error">
{{#if showMessage}}
<div class="error">
{{v-get model valuePath 'message'}}
</div>
{{/if}}
</div>
</div>
But for date filed I am using {{pickaday-input}} addon instead of {{input}} tag so there is a mismatch.
How can I rectify it????`indent preformatted text by 4 spaces`