I have a form where I use vee validate to validate it, the thing is, whenever I click on an input and then click somewhere else the error triggers, how can I make the error only to trigger after something has been typed in?
Form(#submit="handleSubmit" :validation-schema="schema" v-slot="{ errors }")
.pb-2.pt-4
Field#email.border-none.text-black.shadow-lg(type='email' as="input" name='email' placeholder='Email' v-model="email")
span.text-red-500(v-if="errors.email") Email too short
const schema = yup.object().shape({
email: yup.string().required().min(3),
nick: yup.string().required().min(4),
password: yup.string().required().min(6),
});
Related
Is it possible to add custom errors into the ErrorBag
I am using nuxtjs. i have registered vee-validate into my plugin via nuxt.config.js
It works fine However
I want to use the same error code within the template
ex:
<template>
<div v-if="errors.all().length>0">
//loop through
</div>
</template>
i am using axios to fetch user information.
if the request doesnt return my expected data set. i was thinking i could simply
this.errors.push('this is my error message') //-> or some variant of this
When i do this i get that this.errors.push is not a function
I know that
this.errors = ErrorBag{ __ob__: Observer} //-> has items and a vmId attributes
If i amend the code to push onto ErrorBag i get push of undefined
It is documented in the API of ErrorBag. You can add custom messages such as:
// For example, you may want to add an error related to authentication:
errors.add({
field: 'auth',
msg: 'Wrong Credentials'
});
Check the documentation here for more info: https://vee-validate.logaretm.com/v2/api/errorbag.html
I have created custom text component for textbox and i am trying to validate by reactive form validation but not working.
Getting Error:
ERROR
Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
directive and pass it an existing FormGroup instance (you can create one in your class).
Anyone can help to resolve this issue?
https://stackblitz.com/edit/angular-6-reactive-form-validation-9pu6hq?file=app%2Fapp.component.html
app.component.html:
<app-textbox formControlName="password"></app-textbox>
app.component.ts:
this.registerForm = this.formBuilder.group({
firstName: ['', Validators.required],
password: ['', [Validators.required, Validators.minLength(6)]]
});
You need to put the app-textbox in between a form element that is assigned to the form group:
<form [group]="registerForm">
<app-textbox formControlName="password"></app-textbox>
</form>
I have a Vue app that generates as many forms as the user likes. Each form represent a 'risk' in this 'risks' data model:
var app = new Vue({
el: '#app',
data: {
risks: [
{
'risk_name': '', 'fields': [{'field': '', 'type': ''}], 'errors':[]
}
],
},
Then I send the 'risks' to a post API request. Then I make a second get request that brings back a template with the processed data as JSON. So far so good. However, how do I render the template (new page) with this data.
This is how I receive the data:
Submit() {
if (this.checkValidity()) {
console.info(this.risks)
axios.post('risks', this.risks)
.then(function(response) {
axios.get('risks')//This gets the data back
})
.catch(function(error) {
alert('This Error occured: ' + error)
})
}
},
This is the GET API call that I called above (Flask):
#app.route('/risks', methods=['GET'])
def getInsurancePolicyForm():
risks = getTables(app.metadata)
return render_template('form.html', risks=risks)
I can see the rendered template in developer tools, but the page the user sees remains the same.
Your page should be focussed on the risks object instead of the response from the API call.
When the user selects options, add them to the risks data object so your risks object looks like:
risks: [
{
'risk_name': '', 'fields': [{'field': 'My Field', 'type': 'text', modelToHoldData: ''}], 'errors':[]
}
]
Then, when the user clicks on Submit, by all means send it to the API but you don't need a template from there, use the risks object like so (remembering to hide the form they've just chosen their fields with):
<div v-for="risk in risks">
<label>{{risk.field}}</label>
<input type="text" v-if="risk.type === 'text'" v-model="risk.modelToHoldData" />
</div>
You can adjust the above example to add as many variations of the example as you allow the user to select.
Once all this is done and you need access to the data the user enters, you can loop through the array again and just access the modelToHoldData prop on each of the risks.
I'm trying to implement the Ionic Cloud Auth Service and now I want to do the password reset like it is described here. So I have a text field where the user can enter his email and a button. If the button is tapped I call this function:
email: any;
sendPasswordRequest() {
this.auth.requestPasswordReset(this.email);
this.navCtrl.push(ConfirmPasswordResetPage);
}
And the form looks like this:
<ion-item>
<ion-label color="primary" stacked>E-Mail</ion-label>
<ion-input [(ngModel)]="email"></ion-input>
</ion-item>
<button ion-button (click)="sendPasswordRequest();">New Password</button>
But I get the following error when I press the button:
error_handler.js:46 ORIGINAL EXCEPTION: Cannot read property 'set' of undefined
Someone know what is wrong?
have found this to work but remember that 'sendPasswordResetEmail' is a promise...so
this.auth.sendPasswordResetEmail(this.email).then(() =>{
this.navCtrl.push(ConfirmPasswordResetPage);
}).catch( e =>{
console.log('Error: ' + e.message);
});
I'm using the AngularFire2 package here.
I'm am brand new to emberjs (1.0.0-RC1) which I'm using on top of rails. I want to submit a form for a session without using an ember model. I feel this is better because there is not real session model in my rails app. For now what works is the following:
#login_controller.js.coffee
SkillUp.LoginController = Ember.ObjectController.extend
# Just a title to pass to the template, for fun
title: "Login Controller"
submit: (controller) ->
model = #get 'model'
model.get('transaction').commit()
#session.js.coffee
SkillUp.Session = DS.Model.extend
email: DS.attr 'string'
password: DS.attr 'string'
#login_route.js.coffee
SkillUp.LoginRoute = Ember.Route.extend
setupController: (controller) ->
controller.set 'title', "Login"
controller.set 'content', SkillUp.Session.createRecord()
<!-- login.handlebars -->
<h2>template: {{title}}</h2>
<form>
{{#with controller}}
email: {{view Ember.TextField valueBinding="email"}}
password: {{view Ember.TextField valueBinding="password" type="password"}}
<button {{action submit}}>Submit</button>
{{/with}}
</form>
As I said my goal is to remove the session.js.coffee because a rails model does not exist for it.
Help would be appreciated thanks
I don't recommend implementing $.ajax directly. I recommend keeping the DS model. This should make testing easier if you use DS.FixtureAdapter. Ideally you should keep all the ajax behind a layer in the application. You shouldn't be dropping in $.ajax in various parts of the application.
EDIT: just because you don't have a Session model in the backend doesn't mean you can't have one on the frontend. The ember app will have it's own models. Don't worry about a 1:1 mapping.
You can just use $.ajax in your controller method to post the values to rails using jQuery manually.
$.ajax('/sessions', {
type: 'POST',
data: {
email: this.get('email'),
password: this.get('password)
},
...
});
Add appropriate handlers for success and failure.