I am currently using Vuelidate for a form. There is an input field where the user is allowed to leave it in blank, which is an optional field.
Minimum value, if entered, should be 0 or higher, but If I leave it empty, it will still throw the error. Validation works well for numbers, it executes the error class when entered value is below 0.
Summary: I need to have minValue(0) but also nullable possibility.
I currently have this:
validations: {
company_name: {
minValue: minValue(0)
}
}
Template looks like this:
<input
id="company_name"
:value="company_name"
type="number"
min="0"
step="0.01"
:class="{ 'error': v$.company_name.minValue.$invalid"
>
Related
I'm creating a dynamic re-usable vue component that wraps a text input and includes the vuelidate validation stylings, etc.:
<template>
<div class="form-group" :class="{'form-group--error': validator.$error}">
<label>{{ label }}<span v-if="validator.$params.required">*</span></label>
<input type="text v-model="validator.$model" />
<div class="error" v-if="validator.$error && !validator.required">* This field is required</div>
</div>
<template>
<script>
export default {
name: "FormTextField",
props: ["validator", "label"]
}
</script>
(validator prop is $v from parent)
The problem I have is trying to show the <span>*</span> dynamically based on if the field is required. This currently works (v-if="validator.$params.required") as long as I only specify the required validator:
fieldName: {
required: required
}
Now, I need to instead declare my validation like this:
fieldName: {
required: requiredIf( ... )
}
The question is how to access the result of the requiredIf function? validator.$params.required will always be true since it's just checking if the param is there. And validator.required is the status of the validation, not the result of the requiredIf call to see whether it SHOULD be required or not.
Any suggestions on how I can show the required star dynamically based on vuelidate state?
Instead of validator.$params.required, check validator.required, which is only defined when there's a required or requiredIf validator rule applied. The value of validator.required is true when the field is missing, or false otherwise.
When the field is optional (has no required/requiredIf rule), the validator.required property does not exist, so we can't use v-if="!validator.required". Instead, explicitly compare validator.require to false:
<label>{{ label }}<span v-if="validator.required === false">*</span></label>
<div class="error" v-if="validator.$error && validator.required === false">* This field is required</div>
demo
I have the following input
<input
type="text"
:disabled="disabledMoney"
v-model="packageForm.crime.forgeryCrimeSelected"
v-mask="{alias: 'currency', digits:0, min:minMoney, max:maxMoney}"
autofocus
/>
to which I assign the property max:maxMoney of data ();
This input is shown based on a radio button, so when selecting the radio button the input appears and with its correct max value, but if I try to change the max value in a method, the change no longer applies
in the method I just do
change(){
this.maxMoney = 6000 // Assigning new max
}
But it does not apply and stays with its initial value
What you need to do is use a computed value. This will re calculate everytime there is a change in state with the values involved.
Here is some reading from the docs: https://v2.vuejs.org/v2/guide/computed.html
Hey based on your comment, I would do something like this:
<input
type="text"
:disabled="disabledMoney"
v-model="packageForm.crime.forgeryCrimeSelected"
v-mask="{alias: 'currency', digits:0, min:minMoney, max:maxMoneyComp }"
autofocus
/>
computed: { maxMoneyComp(){ return packageForm.crime.forgeryCrimeSelected == 10000 ? 10000:25000; } }
I have an input field set up as
<input #input="e => machineCIDR = e.target.value" type="text" name="machine" class="form-control form-control-lg" :placeholder="machineCIDR">
The problem is, whenever someone fills out the form and then deletes it all, the placeholder is left with the last character that was filled out.
How can I setup :placeholder="machineCIDR" so that it shows the initial value, and then never gets updated again??
Assuming machineCIDR is set up already (as a prop or in data), you could create an object for storing all of your initial values:
data() {
return {
...
initial: {}
}
}
And set up the values in created:
created() {
this.initial['machineCIDR'] = this.machineCIDR;
}
Then bind to that instead in the placeholder:
:placeholder="initial['machineCIDR']"
I am facing a problem with my page with VueJS. It's a page for different translations of the website. It has a dropdown on the top for the language selection that once switched will update the fields with the current language.
The problem starts when it loads, because my form is like this:
<form id="trForm">
...
<input type="text" name="header_title" class="form-control" v-model="translations.header.header_title" />
...
</form>
It's trying to access these attributes before the method returns any data, but somehow it will still show the data once it is complete, but it becomes troublesome when I try to switch the language, it won't because of this problem and also, if I do the following:
<form id="trForm">
...
<input type="text" name="header_title" v-if="translations.header" class="form-control" v-model="translations.header.header_title" />
...
</form>
on each field, those that aren't populated will display no field at all for a new input value. I tried something like translations.features || '', but no success.
I also tried to put on the parent block a condition that if the loading is false will display the form, but since the page is loaded first than the method is executed, it will always be false for the first microsecond.
methods: {
fetchTranslations(e) {
let vm = this;
vm.loaded = false;
$.get('/ajax/admin/translations', { 'locale': e }).done((data) => {
if (data.success) {
vm.translations = JSON.parse(data.translations.translation);
vm.loaded = true;
} else {
toastr.error('Something went wrong');
}
});
},
Please, what do I do? It'd be good to show the form after there is data.
Introduce a new variable, e.g. loaded that defaults to false
Use this variable as a v-if condition on the form
In the callback of your data fetch, set loaded to true.
I am asking user (using JOptionPane) to input account number. I would like to ask how could I check that if inputs is all integers, then the program will continue otherwise it will show an error message and would ask the user to input again until valid input. thanks!
Possible a duplicated question : See here:
Check if input is an integer in JOptionPane
But if it was a web form, You could simply attach an onKeyUp event handler and parse the value every time the user types something in that field.
by JavaScript, you can use .isNaN() to determine if the value is a legal numeric value. Or JQuery's .isNumeric() can do this as well.
https://api.jquery.com/jQuery.isNumeric/
You can use jQuery Validate to restrict character on input filed ..
$Validate = $("#form1").validate({
rules: {
accountnumber: {
required: true,
digits: true
}
},
messages: {
CampaignName: {
required: "*"
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form name='form1' id='form1' method='post'>
<input type='text' name='accountnumber' id='txtAccountNumber' />
</form>