In my vuejs application I have a modal with a form component(create-app.vue) to add some records to the system.
In that form I have a field to set a starting date.
<div class="w-1/2 mr-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">Start date</p>
<div class="h-12">
<cs-date-picker
id="startDate"
v-model="project.start_date"
:default-selection="true"
:name="`${identifier}-start_at`">
</cs-date-picker>
<validator
:identifier="`${identifier}-validate-project`"
:rules="validations.startDate"
:name="`${identifier}-start_at`"
/>
</div>
</div>
For this field my users should be able to pick up a date, which is today's date or a future date.
I have defined my validation rules in a different vue, called validator.vue.
For the above required date validation I have following rule in my validator.vue.
const dateIsNowOrLater = (value) => {
return !moment(value, 'DD-MM-YYYY').isBefore(moment());
};
And in my create-app component I have the following
startDate: {
required: {
message: 'Project Start date is required.'
},
dateIsNowOrLater: {
message: 'Date must be now or future.'
},
},
This works fine when I pick an old date
But this shows me the error toast even when I select the today's date as well... What changes do I need to make, if I need to accept the today's date?
Related
I have the following form in VueJs 2
<form id="trial-form" action="post" class="trial">
<div class="form-field required selectbox">
<select name="region" id="region" label="region" v-validate="'required'" v-model="region" class="required selectbox region" aria-label="Region">
<option value="">{{ $t("region") }}</option>
<p-option v-for="regionOption in regionList" :key="regionOption.region" :value="regionOption.plane">{{$t(regionOption.region)}}</p-option>
</select>
<p-button size="lrg" align="left" type="submit" :disabled="isFormInvalid" #click.prevent="validateBeforeSubmit">{{ $t("trialSubmit") }}</p-button>
</div>
</form>
I am setting the v-model hardcoded and the code is as follows:
mounted () {
this.region = 'US'
}
This sets the US as selected in the select box. My validation function is as follows:
computed: {
isFormInvalid () {
return Object.keys(this.fields).some(key => this.fields[key].invalid)
}
}
Now even though the value in the select dropdown is shown as selected by default, the submit button is not activated. If I change the select options, then the button is activated and I am able to submit the form. As the select box is showing as selected by default, user should be able to submit without selecting it manually. What is wrong here ? Thanks in advance
To validate the field as soon as the page loads, You should use directive modifier .immediate
<select name="region" id="region" v-validate.immediate="'required'" v-model="region">
Or other workaround solution is just to check if v-model contains a value or not and returns boolean value by using a computed property and add a errors.any() along with this computed property for a more robust solution.
In Script :
computed: {
isFormInvalid () {
return !this.region;
}
}
In Template :
<p-button type="submit" :disabled="errors.any() || isFormInvalid" #click.prevent="validateBeforeSubmit">{{ $t("trialSubmit") }}</p-button>
I am still fairly new to using Laravel and Vue.js and have been having some problems when trying to submit data to be used in a modal form.
overview.vue is displaying some information and triggering the modal component
My modal element:
<EditTeamModal :existing="existing_team"/>
In my template I am triggering the following function
#click="getExistingTeam(membership.team)"
Which triggers the following method:
getExistingTeam: function (team) {
this.existing_team = team;
this.$bvModal.show('edit_team');
},
EditTeamModal.vue
In my modal component I have several inputs like the one following:
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ $t('team.name') }} <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" class="form-control" id="name" name="name" required/>
<has-error :form="form" field="name" />
<small id="nameHelp" class="form-text text-muted">Unique name of your team (155 character limit).</small>
</div>
</div>
and am setting my props and vForm data as follows:
props: {
existing: {
type: Object,
required: true,
default: {}
}
},
// middleware: 'auth',
data () {
return {
form: new Form({
id: this.existing.id,
name: this.existing.name,
region: this.existing.region,
website: this.existing.website,
about: this.existing.about,
membership_password: "",
membership_password_confirmation: "",
avatar: null,
}),
}
},
However, my form inputs are always blank...
I can access this.exists.name directly and get the proper expected data output, however it will not seem to populate into my form fields?!
Is there a proper way to pull data from a vue property into vForm form data?
Was able to get the modal form data to update by adding the following to my EditTeamModal.vue
watch: {
existing: function(val) {
this.form.fill(this.existing);
}
},
I'm running into the problem, that Vue converts the value of an input field of type number into a string and I just can't figure out why. The guide I am following along does not run into this issue and get's the values as numbers, as expected.
The vue docs state, that Vue would convert the value to a number, if the type of the input is number.
The code is originated from a component, but I adjusted it to run in JSFiddle: https://jsfiddle.net/d5wLsnvp/3/
<template>
<div class="col-sm-6 col-md-4">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">
{{ stock.name }}
<small>(Price: {{ stock.price }})</small>
</h3>
</div>
<div class="panel-body">
<div class="pull-left">
<input type="number" class="form-control" placeholder="Quantity" v-model="quantity"/>
</div>
<div class="pull-right">
<button class="btn btn-success" #click="buyStock">Buy</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['stock'],
data() {
return {
quantity: 0 // Init with 0 stays a number
};
},
methods: {
buyStock() {
const order = {
stockId: this.stock.id,
stockPrice: this.stock.price,
quantity: this.quantity
};
console.log(order);
this.quantity = 0; // Reset to 0 is a number
}
}
}
</script>
The quantity value is the issue.
It is initialized with 0 and when I just press the "Buy" button, the console shows:
Object { stockId: 1, stockPrice: 110, quantity: 0 }
But as soon as I change the value by either using the spinners or just type in a new value, the console will show:
Object { stockId: 1, stockPrice: 110, quantity: "1" }
Tested with Firefox 59.0.2 and Chrome 65.0.3325.181. Both state that they are up to date. I actually also tried it in Microsoft Edge, with the same result.
So what am I missing here? Why is Vue not converting the value to a number?
You need to use .number modifier for v-model, like this:
<input v-model.number="quantity" type="number">
Note: empty string ('') is not converted to a number, so you may need to handle it separately.
Change the order object to :
const order = {
stockId: this.stock.id,
stockPrice: this.stock.price,
quantity: +this.quantity
};
This will automatically parse the string to a number.
In general the data from HTML inputs are strings. The input type only checks if a valid string has been provided in the field.
I'm trying to bind the Bootstrap 3 Datetimepicker to to my ASP.NET Core model using the MVC tag helper like this:
<div class='input-group date' id='datetimepicker1'>
<input asp-for="Observation.ObservationDateTime" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I am hitting a problem initialising the control. The following does not work:
1) in the Razor section scripts like this:
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
}
Doing this initialises the datetimepicker, but without the model value. How do I get it to work but with the model value as the initial value?
Include your date field in the view like this:
#Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { #class = "my-date" } })
And initialize it in your JavaScript like this (I am using jQuery)
$(document).ready(function () {
// get date from MyDate input field
var date = $(".my-date").val();
// use current date as default, if input is empty
if (!date) {
date = new Date();
}
$('.my-date').datetimepicker({
format: 'YYYY/MM/DD',
date: date
});
});
Please note that I am using 'my-date' class as input selector, you may want to select it differently... and obviously you need to include the the bootstrap library...
As a side note, it is best practice to put your script in an external file: why should I avoid inline Scripts
When I'm editing an existing record and open the Bootstrap DateTimePicker it shows today's date, instead of the input value date. When I close the calender (without changing the date) and reopen it again, it DOES show the month of the record value.
Can someone tell me how to initially get it to open on the right date?
HTML:
<div class="input-group date" id="datetimepicker5">
<input type="text" class="form-control" value="07-09-2017">
<span class="input-group-addon" for="Date">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
JavaScript DateTimePicker:
$('#datetimepicker5').datetimepicker({
locale: 'nl',
debug: false,
useCurrent: false,
calendarWeeks: true,
allowInputToggle: true,
format: 'DD-MM-YYYY'
});
I had same issue in version 4.7.14, but this works fine in latest version 4.17.47