In vuejs 2 app using vee-validate ^3.4.14 I have several inputs on modal form of fixed height.
On validation errors I got validation error messages below of inputs, as I have layout like :
<div class="form-group">
<ValidationProvider
name="password_confirmation"
rules="required"
v-slot="{ errors }"
>
<div class="input-group">
<input type="password"
v-model="password_confirmation"
id="password_confirmation"
name="password_confirmation"
class="form-control editable_field"
placeholder="Password confirmation"
autocomplete=off
ref="password"
>
</div>
<p class="error">{{ errors[0] }}</p>
</ValidationProvider>
</div>
But these messages break layout of modal form, as height of modal form is increased and elements
on bottom of the form are hidden. If there is a way to show these errors in some other way ?
Say a) select input with “error_border” class and b) show some tooltip message near with any input with error text?
Thanks in advance!
Related
The following works:
<li :key="index" v-for="(...) in items">
<input type="text" name="itemFields[]" v-validate="required">
</li>
// ...
<div class="vv-errors">
<ul>
// shows only for last active input
<li v-for="error in errors.collect('itemFields[]')">{{ error }}</li>
</ul>
</div>
If I make some input empty, it shows an error message. But if I then fill some other empty input with text, the error message disappears completely. That should not be the case, because the other input is still empty. To summarize, the error messages only consider the last active input.
How to achieve that the error message shows up if at least one of the inputs is empty?
Actually the issue you are facing is because the name field is same for all your inputs and that should be unique.
Hence while using v-for you could do something as below :
<div v-for="i in 5" >
<input type="text" :name="'email'+i" placeholder="Email" v-validate="'required|email'">
<span class="error" v-if="errors.has('email'+i)">{{errors.first('email'+i)}}
</span>
</div>
Here is a basic example to solve your problem.
I'm trying to use vee-validate for form validation with bootstrap-vue, and cannot get anything to work. Basically, I want to do:
<b-form-input v-model="emailText"
placeholder="Enter email"
v-validate="'required|email'"
name="email"
type="text">
<b-row>
<span>{{ errors.first('email') }}</span>
</b-row>
</b-form-input>
But I don't see anything when I type a non-email address in the field. However, if I change:
b-form-input to input
then everything works. Is there a workaround for this behavior? Any help would be greatly appreciated.
You have put the error messages inside the <b-form-input>, which has no internal slot, so the error messages aren't rendered. If you move them to after the input, it should fix your issue:
<b-form-input v-model="emailText"
placeholder="Enter email"
v-validate="'required|email'"
name="email"
type="text">
</b-form-input>
<b-row>
<span>{{ errors.first('email') }}</span>
</b-row>
You can also use Bootstrap-Vue's state and invalid-feedback properties on the <b-form-input> and a surrounding <b-form-group> to display validation errors with a better accessibility. All of this is demonstrated in this codepen
I have a nested v-for of item
<div class="media" v-for="(comment, parentIndex) in adminComments">
<div class="media-body">
<div class="media" v-for="(answer, index) in comment">
<label class="control-label upload" v-if="comment.data===''">
<input class="file-upload" type="file" #change="uploadFile($event, parentIndex)">
Upload file
</label>
<label class="control-label upload" v-else>
<input class="file-upload" type="file" #change="uploadFile($event, parentIndex)">
{{comment.name}}
</label>
</div>
</div>
</div>
This is basically it, my adminComments is an array of objects and these objects have some attrs, including name, however, this name is changed with a function after the file is uploaded as well as a "loading" attribute to change an icon class, however, none of them is rendering.
As i read here the labels should be rendered well, however, this is not happening. I know that my comment object is indeed working because I also have a textarea with a v-model="comment.response". What could be wrong? I have done the same before and it has worked but in a single v-for and not in a nested list. Thanks in advance
I am developing an Angular 4 application using ngx-bootstrap modals heavily. I am currently using the template + modalService way of opening up modals. During a click event, this line of code is called:
#ViewChild() worklistTemplate;
// ...
this.modalRef = this.modalService.show(this.worklistTemplate, this.config);
And the worklist template looks like this:
<ng-template #worklistTemplate>
<app-action-view
[leftButtons]="leftButtons"
[labelHeader]="modalHeader"
[labelIcon]="modalIcon"
[modalRef]="modalRef">
<div class="row modal-info-panel">
<div class="col-xs-4 modal-user-info">
<fa name="mars" class="gender-icon"></fa>
<div class="field-panel">
<input type="text"
[ngModel]="rowInfo.lastName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<input type="text"
[ngModel]="rowInfo.firstName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<div>
<label for="modal-mrn">MRN --</label>
<input id="modal-mrn" type="text"
[ngModel]="rowInfo.mrn"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div>
<label for="modal-dob">DOB --</label>
<input id="modal-dob" type="text"
[ngModel]="rowInfo.birthDate"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div class="edit-panel">
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons green-hover link" name="floppy-o" tooltip="Save" (click)=saveChanges()></fa>
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons red-hover link" name="times" tooltip="Cancel" (click)=toggleModalFields()></fa>
</div>
</div>
</div>
<div class="col-xs-8 modal-id-info">
Associated ID
<div class="full-width">
<div class="row" *ngFor="let i of rowInfo.associatedIDs">
<div class="col-xs-6 cell">{{i.id}}</div><div class="col-xs-6 cell">{{i.source}}</div>
</div>
</div>
</div>
</div>
<div class="row" id="modal-table">
<app-table-view
[columns]="objDetailsCols"
[tableData]="objDetailsData"
[expandTemplate]="rowImageContainer"
[expandColStyle]="expandColStyle">
</app-table-view>
</div>
<div *ngIf="resolvePanelVisible" class="resolve-panel"
[#slideRight]>
<div class="resolve-label">
<fa class="lt-icon" name="wrench"></fa>
Resolve QA Issue
</div>
<div class="resolve-body">
Hello, World!
</div>
<div class="resolve-footer">
<a>Validate</a>
<a>Resolve</a>
<a>Reload</a>
<a (click)="toggleResolvePanel()">Close</a>
</div>
</div>
</app-action-view>
</ng-template>
The modal can be closed by clicking outside of the modal boundaries or there is a button inside the ActionViewComponent that calls modalRef.hide().
Memory usage increases drastically as more and more modals are opened. In fact, if I open the modal around 5 times, the application becomes sluggish and almost unusable. This is especially apparent if there are many rows in our TableViewComponent.
Is there a problem with the way I am using the modals, or is this an issue related to ngx-bootstrap modals? OR, is the issue related to the browser and unavoidable? I am developing on Chrome 62 right now.
I have verified that onDestroy is never called on the TableViewComponent inside the modal. It is not even called if I navigate to a different page component, though another table (not in the template) does have onDestroy called when navigating from the page.
Any feedback is appreciated greatly- I have been stuck for way too long on this.
This is an issue of ngx-bootstrap, unfortunately. I created a pull request (https://github.com/valor-software/ngx-bootstrap/pull/3179) so this will be fixed as soon as my PR is merged and new version is released.
I'm wondering if I can validate a form with input fields that are wrapped in another components.
Something like this:
<template>
<require from="./inpWrap"></require>
<form submit.delegate="submit()">
<div class="form-group">
<inp-wrap value.bind="firstName & validate"></inp-wrap>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</template>
Here's the full gist: https://gist.run/?id=f94dd7502141f865468465ef25c9e5a1
Visually, in this example, the validation will run only on running the .validate() method (by clicking on the submit button) for the wrapped element.
Would it be possible to have the same validation behaviour for the component-wrapped elements?