Sorry for the very basic question
I'm trying to validate a form using vee-validate. text/email/number fields are not a problem. But I couldn't find a good documentation on validating dropdown/checkbox/radio fields.
What I want is "you have to select some option from the dropdown". For that i tried
<p class="help is-danger" v-show="standard===''">Select the standard student is studing in.</p>
where standard is the property which is binded with the help of v-model="standard". This is working as intended, but i want this message to be shown when dropdown is "touched". I'm not able to figure this out.
You can use the data-vv-validate-on attribute:
data-vv-validate-on="focus"
Then whenever the dropdown is opened the validator will fire, for instance.
I found a workaround for this,
<div class="select" :class="{'is-success': standard!='', 'is-danger': standard=='' && standardIsFocused}">
<select v-model="standard" #focus.once="standardToggle()">
...
</select>
</div>
<p class="help has-text-left is-danger" v-show="standard==='' && standardIsFocused">Selecting one of the option is required.</p>
in script tags
data () {
return {
standardIsFocused: false,
},
methods: {
standardToggle() {
this.standardIsFocused = !this.standardIsFocused
}
}
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 get an error (Form submission canceled because the form is not connected) when moving to the next step in my stepper because of the nb-select. I have a feeling that the nb-option "value" is not properly linking the the formControlName (kinda as the error says). I use FormBuilder and FormGroups. I have read up quite a bit but can't see what might be causing this.
nb-select code
<nb-select formControlName="defaultTechnicianId" *ngIf="technicianList" fullWidth="true"
placeholder="Select a Technician">
<nb-option *ngFor="let technician of technicianList" value="technician.id">
{{technician.firstName}}
</nb-option>
</nb-select>
the form code
<nb-step [stepControl]="createForm" label="Create">
<form [formGroup]="createForm" (ngSubmit)="onCreatePlannedMaintenance()" class="step-container">
<div class="row">
<div class="col-sm-12">
<label for="inputUser" class="label col-sm-12 form-control-label">Default Technician</label>
<nb-select formControlName="defaultTechnicianId" *ngIf="technicianList" fullWidth="true"
placeholder="Select a Technician">
<nb-option *ngFor="let technician of technicianList" value="technician.id">
{{technician.firstName}}
</nb-option>
</nb-select>
</div>
</div>
<button nbButton nbStepperNext>next</button>
</form>
form setup code
this.createForm = this.formBuilder.group({
name: ['', Validators.required],
defaultTechnicianId: ['', Validators.required],
});
Submit code
onCreatePlannedMaintenance() {
this.createForm.markAsDirty();
if (this.createForm.invalid) {
return;
}
this.plannedMaintenance = this.createForm.value;
this.dataService.put(this.plannedMaintenance).subscribe(data => {
this.plannedMaintenance = data;
});
}
I have read that this might be an issue with the older nebular package (I am using 4.1.2). Might not be nebular itself but instead nebular and reactive forms together causing this.
Simple fix is just to add a click event on the Stepper Next Button e.g.
<button nbButton nbStepperNext (click)="onCreatePlannedMaintenance()">next</button>
I am using Laravel 5.6.7 with vue.js for form validation. I have successfully installed using npm install vee-validate#next --save
<form role="form">
<select name="Role_ID" v-validate data-vv-rules="required">
<option :value="-1" selected>Please select Role</option>
<option v-for="RoleRecord in RoleRecords" :value="RoleRecord.Role_ID">
{{RoleRecord.Role}}
</option>
</select>
<p v-if="errors.has('Role_ID')">{{ errors.first('Role_ID') }}</p>
<!-- UserName -->
<div>
<label>UserName</label>
<div class="col-md-9">
<input name="User Name" v-validate data-vv-rules="required" type="text"
v-model="createForm.UserName">
<p v-if="errors.has('User Name')">{{ errors.first('User Name') }}</p>
</div>
</div>
<button type="button" #click="validateBeforeSubmit()">
Save Changes
</button>
</form>
<script>
export default {
methods: {
validateBeforeSubmit() {
this.$validator.validateAll();
}
}
}
</script>
My findings
Due to some reasons the option is not being validated.
There is UserName field which is working perfectly.
I am expecting that it should show the error message if the option selected value is less then 0
Am I missing anything? Please let me know if you need more info.
in the vee-validate doc,
The field under validation must have a non-empty value. By default,
all validators pass the validation if they have "empty values" unless
they are required. Those empty values are: empty strings, undefined,
null.
-1 is still considered a valid value for required validation. Use specified empty values instead. (Namely: empty strings, undefined, null)
e.g.
<option :value="null" selected>Please select Role</option>
This should trigger the required validation.
Example: https://codepen.io/jacobgoh101/pen/geaqwr?editors=1011
There's a difference between your naming:
<input name="User Name" v-validate data-vv-rules="required" type="text" v-model="createForm.UserName">
<p v-if="errors.has('User Name')">{{ errors.first('User Name') }}</p>
v-model uses UserName (without spacing). The name-attribute in your input and errors.has + errors.first are using User Name (with spacing). Please make sure you're naming things exactly the same, both in front-end as well as in back-end (and preferably without whitespace).
I'm trying to upload profile phoho in front end of OctoberCMS but with no luck.
Cannot catch it in the backend to save within the user.
Made everything exactly like in documentation of the CMS.
Need to make this work without any eternal plugins.
<form data-request="onCreateUser" data-request-update="user:'.res_user'" >
<input name="file_input" type="file" >
<button type="submit" class="subBtn">Create User</button>
</form>
In User i have:
public $attachOne = [
'avatar' => 'System\Models\File'
];
and this code:
$file = new System\Models\File;
$file->data = Input::file('file_input');
$file->is_public = true;
$file->save();
$model->avatar()->add($file);
Record stored in DB, but its empty. filesize = 0
Can anyone please help me with this?
Asked the big Bro, but found that this problem is very common, and have no solution.
Thanks
Update:
This is working, when I use this:
{{ form_open({files: true, request: 'onCreateConcert'}) }}
<!--File Input-->
<input type="file" name="file-upload" required="required">
<!--File Input-->
<!--Submit/Upload Button-->
<button type="submit">Upload</button>
{{ form_close() }}
but not with my form. whats i'm missing here?
I added as well token and session_key
{{ form_sessionKey() }}
{{ form_token() }}
It because you don't add enctype="multipart/form-data" to your form attribute.
When you use twig like {{ form_open({files: true, request: 'onCreateConcert'}) }}, the files: true will add attribute to your form to handle upload file. So the twig above will generate tag like below,
<form data-request="onCreateConcert" enctype="multipart/form-data">
try this:
use System\Models\File;
use Input;
[...]
if (Input::file("file_input")) {
$model->avatar = Input::file("file_input");
}
model->save();
I'm developing a website using Durandal/Knockout/Breeze/WebApi with MVC4 as the back end.
I'm querying my api via breeze like so:
var getCategories = function() {
var query =
entityQuery
.from('Categories')
.orderBy('Order');
return manager.executeQuery(query);
};
Then, on my view model:
function initCategories() {
service.getCategories()
.then(querySuccess)
.fail(queryFail);
function querySuccess(data) {
vm.categories(data.results);
};
where vm is my bounded view model and categories is of observableArray of course.
Finally, my view has:
<!-- ko foreach: categories -->
<div class="list_images">
<a data-bind="attr: { href: '#search/' + queryString() }" class="hover-shadow">
<img data-bind="attr: { src: image(), alt: name() }" width="240" height="180">
<h5 data-bind="text: name()"></h5>
</a>
</div>
<!-- /ko -->
Here's the screenshot of what data.results contains:
It works fine, except for the need of using the parentheses.
With 'normal' viewmodels I don't need parentheses in the view bindings.
I can't figure out why it happens only with breeze objects (Entities).
Edit
After further investigation I noticed that my entities are of type proto._setCtor.proto instead of just an Object. Why's that?
Even if I use the breeze manager to create a new entity - this is the object I get back :(
What's wrong here?
This isn't an answer. This is a confession that I'm mystified. I can't duplicate the problem you describe.
I understand exactly what you are asking. I agree that you should not have to use the parentheses. You should be able to write:
<h5 data-bind="text: name"></h5>
and not have to write:
<h5 data-bind="text: name()"></h5>
I downloaded the "Todo-Knockout" sample from Breeze. After confirming that it worked, I started changing it to look more like your binding example. I continued to work.
You can follow along with me, step-by-step, confirming that everything works as expected after each step.
Switched to the comment form of repeater: <!-- ko foreach: items -->
Replaced the <ul> and <li> tags with div container.
Switched to the debug version of KO (that's what you're using)
Updated to the latest KO (knockout-3.1.0.debug.js)
In the end, my revised markup looks like this:
<!-- ko foreach: items -->
<div>
<div data-bind="visible: !isEditing()">
<input type="checkbox" data-bind="checked: IsDone" />
<label data-bind="text: Description, click: $parent.editBegin, css: { done: IsDone, archived: IsArchived }"></label>
X
</div>
<div data-bind="visible: isEditing">
<form data-bind="event: { submit: $parent.editEnd }">
<input type="text" data-bind="value: Description, hasfocus: isEditing" />
</form>
</div>
</div>
<!-- /ko -->
When I break in the Chrome Developer Tools where the results are returned from the server and display data.results in the console, I get this:
[proto._setCtor.proto
CreatedAt: function dependentObservable() {
Description: function dependentObservable() {
Id: function dependentObservable() {
IsArchived: function dependentObservable() {
IsDone: function dependentObservable() {
entityAspect: ctor
isEditing: function observable() {
__proto__: Object
, proto._setCtor.proto, proto._setCtor.proto]
I'm not seeing any significant differences from your example. Do you?
What happens when you do the same thing with the same "Todo-Knockout" sample on your machine?
What browser are you using? Do you see the same misbehavior in Chrome?
Breeze serializes all of the properties of your entity into ko.computeds under the covers. It uses this to intercept changes to the properties and notify all the other places your property is used. That being said you should only have to use parans in places where you are using conditional bindings (such as when you are combining a property with some string to make a longer string. Where ever you are just binding to a standard ko binding handler you should not need it.