Validate specific amount of input fields with vee-validate - vuejs2

I want to validate varios steps in a wizard, without validating all inputs, when clicking on the next button. When clicking on the next button it should fire the function to validate the input fields of the first step. Then in the next step the input fields of the second step and so on. The next button is no submit button.
<tab-content title="Company" icon="fas fa-building" :before-change="validateThirdStep">
<div class="col-md-8 offset-md-2">
<label class="col-form-label text-md-right">Do you have a chicken?</label>
<div class="form-goup row">
<div class="col-md-7">
<input type="radio" name="dsb" id="radios" value="yes" v-model="pickeddsb">Yes
<input type="radio" name="dsb" id="radios" value="no" v-model="pickeddsb">No
</div>
</div>
</div>
<div class="form-group" v-if="pickeddsb=='yes'">
<div class="col-md-8 offset-md-2">
<h4>Data</h4>
</div>
<div class="col-lg-8 m-auto">
<!-- Name -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
<div class="col-md-7">
<input
v-model="namedsb"
v-validate="'required|namedsb'"
:class="{ 'has-error': errors.has('namedsb') }"
type="text"
name="namedsb"
>
{{ errors.first('namedsb') }}
</div>
</div>
<!-- Firm -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('companyname') }}</label>
<div class="col-md-7">
<input
v-model="firm"
v-validate="'required|firmdsb'"
:class="{ 'has-error': errors.has('firmdsb') }"
class="form-control"
type="text"
name="firmdsb"
>
{{ errors.first('firmdsb') }}
</div>
</div>
<!--Telephone-->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{$t('telephone')}}</label>
<div class="col-md-7">
<input
v-model="telephonedsb"
v-validate="'required|telephonedsb'"
:class="{ 'has-error': errors.has('telephonedsb')}"
class="form-control"
type="tel"
name="telephonedsb"
>
{{ errors.first('telephonedsb') }}
</div>
</div>
<!-- Email -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
<div class="col-md-7">
<input
v-model="emaildsb"
v-validate="'required|emaildsb'"
:class="{ 'has-error': errors.has('emaildsb') }"
class="form-control"
type="email"
name="emaildsb"
>
{{ errors.first('emaildsb') }}
</div>
</div>
</div>
</div>
</tab-content>
export default {
data() {
return {
namedsb: "",
telephonedsb: "",
emaildsb: "",
namere: "",
telephonere:"",
emailre: "",
}
},
methods: {
validateThirdStep: function() {
this.$validator.validate('namedsb', this.namedsb);
this.$validator.validate('firmdsb', this.firmdsb);
this.$validator.validate('telephonedsb', this.state);
this.$validator.validate('emaildsb', this.emaildsb);
}
}
}

It's fairly easy with the built-in scopes of VeeValidate, you can read about it on this page: enter link description here
A simple explanation is to add a specific scope for each tab/step, by adding this on the fields:
data-vv-scope="step1"
And then use this method when pressing the button for validation:
methods: {
validateForm(scope) {
this.$validator.validateAll('step1').then((result) => {
if (result) {
alert('Form Submitted!');
}
});
}
}

Related

How to pass data in Kotlin Ktor Routing without saving the data?

Is it possible to pass various data in the Routing.kt class between different routes without saving the data in a database?
I'm calling a rest api in a search ui "search.ftl" and want to show the response data in another ui "found.ftl" and they're in different fields. If the data looks good the user can click "save" and then the data really go into the database.
At the end of get("field") I need to pass the data to get("found).
That's my code so far:
Routing.kt:
route("search") {
get {
call.respond(FreeMarkerContent("search.ftl", model = null))
}
get("field") {
// API-Call and json data in response
val title = volumeInfoObject?.get("title")
val author = authors?.get(0)
val publisher = volumeInfoObject?.get("publisher")
val pageCount = volumeInfoObject?.get("pageCount")
client.close()
call.respondRedirect("/search/found")
// How to pass data to get("found")?
}
get("found") {
call.respond(FreeMarkerContent("found.ftl", model = null))
}
}
Search.ftl:
<#import "_layout.ftl" as layout />
<#layout.header>
<div>
<div class="text-center">
<h1 class="display-4">Search</h1>
</div>
<!-- // style="border:1px solid red; -->
<div class="container">
<div class="row">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<form action="/search/field" method="get">
<input type="text" class="form-control" name="isbn">
</form>
</div>
</div>
<br><br><br>
<div class="row">
<div class="col-sm-3">
<div class="img"><img src="/static/500x900.png" class="img-fluid" alt="Responsive image"></div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
</div>
<div class="col-4 col-sm-6">
<form>
<fieldset disabled>
<legend>Book Information</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Titel</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Author</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Publisher</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Pages</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<button type="submit" class="btn btn-primary">Save</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</#layout.header>
Found.ftl:
<#-- #ftlvariable name="book" type="com.nw.models.Book" -->
<#import "_layout.ftl" as layout />
<#layout.header>
<div>
<div class="text-center">
<h1 class="display-4">Search</h1>
</div>
<!-- // style="border:1px solid red; -->
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="img"><img src="/static/500x900.png" class="img-fluid" alt="Responsive image"></div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
</div>
<div class="col-4 col-sm-6">
<form action="/search/found" >
<legend>Book Information</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Titel</label>
<input type="text" id="disabledTextInput" class="form-control" name="title" value="title">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Author</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Publisher</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Pages</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</#layout.header>
The solution ist now like this:
I'm saving the found book directly to db and show it on my /found route:
call.respondRedirect("/search/found/${book?.id}")
On the /found page there is a delete button, so If you are not happy with the result you can directly delete the book.
get("found/{id}") {
val id = call.parameters.getOrFail<Int>("id").toInt()
call.respond(FreeMarkerContent("edit.ftl", mapOf("book" to bookFacade.book(id))))
}

laravel 9 vue 3 edit multiple checked checkbox value

when editing a checkbox array, I cannot select (checked) that are in the database
how to select those that exist in the checkbox database (checked) ?
please, help
Edit.vue
<template>
<div>
<admin-layout>
<template #header>
<div class="row">
<div class="col-md-12">
<h4>Емделуші</h4>
</div>
</div>
</template>
<div class="row">
<div class="col-md-12 mb-3">
<div class="card">
<div class="card-header">
<span><i class="bi bi-table me-2"></i></span> Емделушіні өзгерту
<div class="card-header-pills float-end">
<inertia-link :href="route('admin.schedules.index')" class="btn btn-primary text-white text-uppercase" style="letter-spacing: 0.1em;">
Кері қайту
</inertia-link>
</div>
</div>
<form #submit.prevent="updateSchedule">
<div class="card-body">
<div class="mb-3">
<label for="name" class="form-label">Аты-жөні</label>
<input type="text" class="form-control" id="name" v-model="form.name" :class="{'is-invalid' : form.errors.name }" autofocus="autofocus" autocomplete="off">
</div>
<div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.name }">
{{ form.errors.name }}
</div>
<div class="mb-3">
<label class="form-label" for="email">Email</label>
<input type="text" class="form-control" id="email" v-model="form.email" :class="{'is-invalid' : form.errors.email }" autofocus="autofocus" autocomplete="off">
</div>
<div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.email }">
{{ form.errors.email }}
</div>
<div class="mb-3">
<label class="form-label" for="phone">Телефон</label>
<input type="text" class="form-control" id="phone" v-model="form.phone" :class="{'is-invalid' : form.errors.phone }" autofocus="autofocus" autocomplete="off">
</div>
<div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.phone }">
{{ form.errors.phone }}
</div>
<div class="form-check form-check-inline" v-for="(time, index) in times" :key="index">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" :value="time.time" v-model="form.times" :class="{'is-invalid' : form.errors.times }">
<label class="form-check-label" for="inlineCheckbox1">{{ time.time }}</label>
</div>
<div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.times }">
{{ form.errors.times }}
</div>
</div>
<div class="card-footer clearfix">
<div class="float-end">
<jet-button class="ms-4 btn-primary text-white" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">
<div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Өзгертілуде...</span>
</div>
Өзгерту
</jet-button>
</div>
</div>
</form>
</div>
</div>
</div>
</admin-layout>
</div>
</template>
<script>
import AdminLayout from '#/Layouts/AdminLayout';
import JetButton from '#/Jetstream/Button.vue'
import { useForm } from '#inertiajs/inertia-vue3';
import InertiaLink from "#inertiajs/inertia-vue3/src/link";
export default {
name: "Edit",
components: {
AdminLayout,
JetButton,
InertiaLink,
},
props: {
appointment: {},
times: {},
},
setup (props) {
const form = useForm({
name: props.appointment.name,
email: props.appointment.email,
phone: props.appointment.phone,
times: props.times,
});
return {
form,
}
},
methods: {
},
}
}
</script>
when editing a checkbox array, I cannot select (checked) that are in the database how to select those that exist in the checkbox database (checked) ? please, help

Vuejs: How to reset Input boxes inside Vue Component

Whenever I open the component, the previous information that I've typed still remains in the Input Boxes. I have three input box. One is not inside a form tag and the other two are inside a form tag. How do we clear the Input Boxes when I open the component? I tried using this.form.reset(); but it does not work.
<!-- left column -->
<div class="col">
<div class="form-group">
<label>Scan Item</label>
<input type="search" class="form-control is-warning" id="exampleSearchItemBarcode" placeholder="Item Barcode"
#keyup.enter="searchloanItem"
v-model="itemvmodel"
autocomplete="off">
</div>
</div>
</div>
<!-- right column -->
<div class="col">
<div class="card-body">
<form #submit.prevent="createLoan">
<div class="form-group" v-for="loanpatron in loanpatrons" :key="loanpatron.id">
<input type="text" name="patron_id"
v-model="form.patron_id"
class="form-control text-uppercase"
:class="{ 'is-invalid': form.errors.has('patron_id') }"
autocomplete="off">
<has-error :form="form" field="patron_id"></has-error>
</div>
<!-- textarea -->
<div class="form-group">
<label>Date Loaned</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
</div>
<input v-model="form.dateloaned" type="date" name="dateloaned" class="form-control" :class="{ 'is-invalid': form.errors.has('dateloaned') }"
data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask="" im-insert="false">
</div>
<has-error :form="form" field="dateloaned"></has-error>
</div>
<div class="row">
<div class="col">
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
export default {
mounted() {
this.form.reset();
}
}
</script>

How to clear form after submit in vuejs

I am trying to empty the form after it submits form but I am unable to do this. Here is the code
<form class="form-horizontal" #submit.prevent="addtodirectory" id="form-directory">
<div class="model-body">
<div class="card-body">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input v-model="form.name" type="text" name="name"
class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<textarea v-model="form.address" type="text" name="address"
class="form-control" :class="{ 'is-invalid': form.errors.has('address') }"></textarea>
<has-error :form="form" field="address"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Profession</label>
<div class="col-sm-10">
<input v-model="form.profession" type="text" name="profession"
class="form-control" :class="{ 'is-invalid': form.errors.has('profession') }">
<has-error :form="form" field="profession"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Contact Number</label>
<div class="col-sm-10">
<input v-model="form.contact_number" type="text" name="contact_number"
class="form-control" :class="{ 'is-invalid': form.errors.has('contact_number') }">
<has-error :form="form" field="contact_number"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">City</label>
<div class="col-sm-10">
<input v-model="form.city" type="text" name="city"
class="form-control" :class="{ 'is-invalid': form.errors.has('city') }">
<has-error :form="form" field="city"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">State</label>
<div class="col-sm-10">
<select v-model="form.state" type="text" name="state"
class="form-control" :class="{ 'is-invalid': form.errors.has('state') }">
<has-error :form="form" field="state"></has-error>
<option value="Rajasthan">Rajasthan</option>
<option value="Gujrat">Gujrat</option>
</select>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-success">Submit</button>
<button type="submit" class="btn btn-default float-right">Cancel</button>
</div>
<!-- /.card-footer -->
</div>
</form>
<script>
export default {
data() {
return {
news:{},
form: new Form({
name : '',
address:'',
profession:'',
city:'',
state:''
})
}
},
methods: { addtodirectory() {
this.$Progress.start();
this.form.post('api/addtodirectory');
Toast.fire({
type: 'success',
title: 'Directory Updated successfully'
})
$('#form-directory input[type="text"]').val('');
this.$Progress.finish();
}
}
I am using vform plugin to submit the form. Using Laravel as backend. The data is being submitted in database but I am not able to clear the form. please help in this regarding. Should I use jquery or javascript to clear the form? I tried different ways but I could not figure out the problem.
Simply empty your form object after form submit.
form: new Form({
name : '',
address:'',
profession:'',
city:'',
state:''
})
Well it was simple and I did following code for emptying the form.
addtodirectory(event) {
this.$Progress.start();
this.form.post('api/addtodirectory');
// document.getElementById("form-directory").reset();
console.log('durgesh');
// document.getElementsByName('name').value = '';
Toast.fire({
type: 'success',
title: 'Directory Updated successfully'
})
this.form.name = "";
this.form.profession ="";
this.form.address="";
this.form.city = "";
this.form.state = "";
this.$Progress.finish();
},
after submitting the form I did not used the form. so after doing this I emptied the form.
Or in a one-liner:
Object.keys(form).forEach(v => form[v] = "")
instead of:
this.form.name = "";
this.form.profession ="";
this.form.address="";
this.form.city = "";
this.form.state = "";

How to listen to events from bootstrap-vue modal?

I have two modals in my page and I need a way to listen to 'ok' event when pressing ok button on first modal and respond by opening the another modal.
There are no examples in the documentation:
https://bootstrap-vue.js.org/docs/components/modal/
I wanted to use this listener but nothing is explained and I couldn't find out what is what here.
export default {
mounted() {
this.$root.$on('bv::modal::show', (bvEvent, modalId) => {
console.log('Modal is about to be shown', bvEvent, modalId)
})
}
}
This is the relevant part of my code:
<div>
<b-modal id="modal-center-add-post" style="width: 120px" centered class="h-50 d-inline-block min-vw-100" ok-title="next" >
<add-post></add-post>
</b-modal>
</div>
<div>
<b-modal id="modal-center-add-content" style="width: 120px"
centered class="h-50 d-inline-block min-vw-100"
ok-only ok-title="Create" >
<add-content></add-content>
</b-modal>
</div>
and add-post component code is
<template>
<form>
<div class="form-group row">
<label for="title"
class="col-sm-2 col-form-label">
Title
</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
id="title"
placeholder="Title">
</div>
</div>
<div class="form-group row">
<label for="chooseTopic"
class="col-sm-2 col-form-label">
Topic
</label>
<div class="col-sm-10">
<select id="chooseTopic" class="form-control">
<option selected>Leadership</option>
<option>HR</option>
<option>Sales</option>
<option>Marketing</option>
</select>
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0"> Type</legend>
<div class="col-sm-10">
<div class="form-check-inline ">
<label class="form-check-label"
for="video"
:class="{'checked':(isChecked==='video')}"
#click="isChecked='video'">
<input class="form-check-input"
type="radio" name="video"
id="video"
v-model="postingType"
value="video" checked>
<i class="fab fa-youtube "></i>
Video
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label"
for="ebook"
:class="{'checked':(isChecked==='ebook')}"
#click="isChecked='ebook'">
<input class="form-check-input"
type="radio"
name="ebook"
id="ebook"
v-model="postingType"
value="ebook">
<i class="far fa-file-pdf "></i>
Ebook
</label>
</div>
<div class="form-check-inline ">
<label class="form-check-label "
for="article"
:class="{'checked':(isChecked==='article')}"
#click="isChecked='article'">
<input class="form-check-input " type="radio"
name="article" id="article"
v-model="postingType" value="article" >
<i class="fas fa-pen-square "></i>
Article
</label>
</div>
</div>
</div>
</fieldset>
</form>
</template>
<script>
export default {
name: "AddPost",
data(){
return{
postingType:'',
isChecked:'video'
}
},
}
</script>
So when I click on ok (next) in add-post component I want the second modal to pop up.
it's right on the bottom of the documentation under Events
basicly use
#ok="yourOkFn"