jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vee-validate and yup

Browse Source
This commit is contained in:
Jaroslav Drzik
2024-01-24 18:14:03 +01:00
parent 41dd646e86
commit cee241604d
2 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -27,10 +27,13 @@
"laravel-echo": "^1.13.0",
"pusher-js": "^7.3.0",
"sweetalert2": "^11.4.23",
"vee-validate": "^4.12.4",
"vue-google-charts": "^1.1.0",
"vue-multiselect": "^3.0.0-beta.3",
"vue-recaptcha": "^3.0.0-alpha.2",
"vue3-easy-data-table": "^1.5.47",
"vue3-multiselect-checkboxed": "^0.0.9",
"vuedraggable": "^4.1.0"
"vuedraggable": "^4.1.0",
"yup": "^1.3.3"
}
}

62
resources/js/Pages/IkeaAbout.vue
View File

@@ -1,37 +1,34 @@
<script setup>
import {
getCurrentInstance,
ref,
onMounted,
onUnmounted,
nextTick,
computed
} from 'vue';
import GuestLayout from '../Layouts/GuestLayout.vue';
import { useForm} from '@inertiajs/inertia-vue3'
import axios from 'axios';
const form = useForm({
name: "",
email: "",
subject: "",
message: "",
import GuestLayout from '../Layouts/GuestLayout.vue';
//import { useForm} from '@inertiajs/inertia-vue3'
import axios from 'axios';
import { Form, Field } from 'vee-validate';
import * as yup from 'yup';
import { defineProps } from "vue";
import Swal from "sweetalert2";
const schema = yup.object().shape({
name: yup.string().required('Name is required'),
email: yup.string().email('Email is invalid').required('Email is required'),
subject: yup.string().required('Subject is required'),
message: yup.string().required('Message is required'),
// recaptcha: yup.string().required('Please verify you are human'),
});
const submit = async (data) => {
function onSubmit(data) {
console.log("DATA=", data);
console.log("FORM=", form);
try {
const response = await axios.post(route("ajax.send.email"), {
name: form.name,
email: form.email,
subject: form.subject,
message: form.message,
const response = axios.post(route("ajax.send.email"), {
name: data.name,
email: data.email,
subject: data.subject,
message: data.message,
});
console.log("TEST=", response.data);
} catch (e) {
const response = await Swal.fire({
const response = Swal.fire({
title: __("are you want to try again") + "?",
text: __(`${e}`),
icon: "question",
@@ -41,6 +38,7 @@ const submit = async (data) => {
response.isConfirmed && fetch();
}
};
</script>
@@ -112,13 +110,17 @@ const submit = async (data) => {
</div>
</div>
<form class="ml-auo space-y-4" @submit.prevent="submit">
<input type='text' placeholder='Name' v-model="form.name" class="w-full rounded-md py-2.5 px-4 border text-sm outline-[#007bff]" />
<input type='email' placeholder='Email' v-model="form.email" class="w-full rounded-md py-2.5 px-4 border text-sm outline-[#007bff]" />
<input type='text' placeholder='Subject' v-model="form.subject" class="w-full rounded-md py-2.5 px-4 border text-sm outline-[#007bff]" />
<textarea placeholder='Message' rows="6" v-model="form.message" class="w-full rounded-md px-4 border text-sm pt-2.5 outline-[#007bff]"></textarea>
<Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors }" >
<Field type='text' placeholder='Name' name="name" class="w-full rounded-md py-2.5 px-4 mb-2 border text-sm outline-[#007bff]" />
<div class="">{{ errors.name }}</div>
<Field type='email' placeholder='Email' name="email" class="w-full rounded-md py-2.5 px-4 mb-2 border text-sm outline-[#007bff]" />
<div class="">{{ errors.email }}</div>
<Field type='text' placeholder='Subject' name="subject" class="w-full rounded-md py-2.5 px-4 mb-2 border text-sm outline-[#007bff]" />
<div class="">{{ errors.subject }}</div>
<Field type='textarea' as='textarea' placeholder='Message' rows="6" name="message" class="w-full rounded-md px-4 border text-sm pt-2.5 outline-[#007bff]" />
<div class="">{{ errors.message }}</div>
<button type='submit' class="text-white bg-[#007bff] hover:bg-blue-600 font-semibold rounded-md text-sm px-4 py-2.5 w-full">Send</button>
</form>
</Form>
</div>
</div>
</GuestLayout>