I am using vee-validate 4.5.8 with vue.js 3.2.13.
Imported modules into component
import { Field, Form, ErrorMessage, defineRule } from "vee-validate";
import { required, email, alpha_spaces } from "#vee-validate/rules";
defineRule("required", required);
defineRule("email", email);
defineRule("alpha_spaces", alpha_spaces);
Problem is, that "email" and "required" are working fine, but "alpha_spaces" are not detecting numbers entered.
form looks like this:
<field
name="firstname"
type="text"
placeholder="first name"
rules="required|alpha_spaces"
v-model="newUser.firstname"
/>
<ErrorMessage name="alpha_spaces" />
<field
id="email"
name="email"
type="email"
placeholder="e-mail"
rules="required|email"
v-model="newUser.email"
/>
<ErrorMessage name="email" />
question is: what i am missing?
Related
I have multiple form in one page
<form name="organizations" #submit.prevent="update">
<text-input v-model="form.organization_name"
:error="form.errors.organization_name"
class="pb-8 pr-6 w-full lg:w-1/4" label="Customer Name" />
</form>
<form v-for="contact in organization.contacts"
:name="contact.id" #submit.prevent="update">
<text-input v-model="contact.first_name"
class="pb-8 pr-6 w-full" label="First name" />
</form>
How to submit each form using inertia form
I am trying to capture errors in forms and have to display them in modal. But vee-validate onInvaidSubmit seems not working. See code below.
PS: I copied this example from https://vee-validate.logaretm.com/v4/guide/components/handling-forms
Vue Version : 3, vee-validate: 4.5.11
<template>
<Form v-slot="{ validate }" :validation-schema="schema">
<Field name="email" type="email" />
<ErrorMessage name="email" />
<Field name="password" type="password" />
<ErrorMessage name="password" />
<button #click="validate">Submit</button>
</Form>
</template>
<script>
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'
export default {
components: {
Form,
Field,
ErrorMessage,
},
data() {
const schema = yup.object({
email: yup.string().required().email(),
password: yup.string().required().min(8),
})
return {
schema,
}
},
methods: {
onSubmit(values) {
// Submit values to API...
alert(JSON.stringify(values, null, 2))
},
onInvalidSubmit({ values, errors, results }) {
console.log(values) // current form values
console.log(errors) // a map of field names and their first error message
console.log(results) // a detailed map of field names and their validation results
},
},
}
</script>
try the following by adding it to the Form element. see below
<Form v-slot="{ validate }" :validation-schema="schema" #invalid-submit="onInvalidSubmit">
<Field name="email" type="email" />
<ErrorMessage name="email" />
<Field name="password" type="password" />
<ErrorMessage name="password" />
<button #click="validate">Submit</button>
</Form>
I using Vue Formulate for form validation. When submit the error message show Formid is required., but I want Form ID is required
<FormulateForm
class="login-form"
v-model="formValues"
#submit="submitHandler"
>
<FormulateInput
name="formid"
type="text"
label="Form ID"
placeholder=""
validation="required"
/>
<FormulateInput
type="submit"
label="Log In"
/>
</FormulateForm>
Use custom validation message link , validation-name props to replace default name
<FormulateForm
class="login-form"
v-model="formValues"
#submit="submitHandler"
>
<FormulateInput
name="formid"
type="text"
label="Form ID"
placeholder=""
validation="required"
validation-name="Form ID"
/>
<FormulateInput
type="submit"
label="Log In"
/>
</FormulateForm>
I wanted to create a custom component to use Vee-Validate scopes to display the error.
Currently for the forms with the scope i am doing in a following ways.
Submit Method:
methods: {
onSubmit(scope) {
console.log(this.$validator)
this.$validator.validateAll().then((result) => {
if (result) {
alert('Form Submitted!');
}
});
}
}
HTML
<label>Name</label>
<input v-model="form_fields.name" data-vv-as="Partner name" data-vv-name="PartnerName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('form-partner.PartnerName') }" type="text" class="form-control">
<div v-show="errors.has('form-partner.PartnerName')" class="help is-danger text-red">{{ errors.first('form-partner.PartnerName') }}</div>
which means i have to repeat errors.has('form-partner.PartnerName') multiple times, all over the forms.
I wanted to simplified as below.
<error-form :status="errors" :css-class="'is-danger'" label="Company Name" field="name">
<b-form-input v-validate="'required'" class="form-control" v-model="form_fields.name" name="name" data-vv-as="Company Name"
type="text" />
</error-form>
Similar to the implementation from here! but this is not working with the scopes.
I wanted to have the validation done with scopes. I will pass the scopes to the error-form as a prop like shown below.
///scope here
<error-form :status="errors" :scope='form-registraion' :css-class="'is-danger'" label="Company Name" field="name">
So, how i can check on my error-form component with the scopes? scopes could be mandatory or required.
I am working on an old application using Struts 1. We are using nested tags. For below code:
<nested:form action="/save.do?method=save">
<h2>Indexed Property Example</h2>
<nested:iterate property="lines" indexId="idx">
Name: <nested:text property="name" indexed="true"/>
Town: <nested:text property="town" indexed="true"/>
<nested:iterate property="inches" indexId="j">
Inch: <nested:text property="length" indexed="true"></nested:text>
</nested:iterate>
</nested:iterate>
<nested:submit value="save" />
</nested:form>
I am getting below html:
<h2>Indexed Property Example</h2>
Name: <input name="nestedForm[0].lines[0].name" value="" type="text">
Town: <input name="nestedForm[0].lines[0].town" value="" type="text">
Inch: <input name="nestedForm[0].lines[0].inches[0].length" value="0" type="text">
Inch: <input name="nestedForm[1].lines[0].inches[1].length" value="0" type="text">
<input name="" value="save" type="submit">
If you see in second Inch label we have nestedForm[1] it should be 0. I have to change to this data and submit back to server. If I change it directly in html struts populate all objects automatically. Can anyone suggest me if I am doing anything wrong here.