I have a form that I need to validate. This is just one field that I have specified. I'm trying to validate it using computed property.
<input
type="text"
v-model="buyerName"
placeholder="Name"
autocomplete="on"
required
>
<span class="errorNotification" >{{validateName}}</span>
This is the computed property 'validateName' I'm using
computed: {
validateName(){
return (this.buyerName !== "" ? "" : "Enter your name");
}
}
This is how I am getting when the page is loaded. Is there a way to display the error message only when that field is in focus?
TIA
You can achieve it with v-if directive, set default value for the buyerName as null;
Your input field:
<input type="text"
name="name"
id="name"
v-model="buyerName()"
required>
<span v-if="errors" class="errorNotification">{{ errors }}</span>
You js code:
data:{
errors:null,
buyerName:null
},
methods:{
checkForm:function(e) {
this.errors = null;
if (this.buyerName!=null && this.buyerName!="") {
//your actions if form is valid
console.log("success");
} else {
this.errors = "Name required.";
}
e.preventDefault();
}
}
Check examples of validation in doc: https://v2.vuejs.org/v2/cookbook/form-validation.html
Related
I have multiple form components, each form as a component. Now, I want to use same component for adding data and editing data. So what I am thinking to do is something like when the Post component receives a prop containing data that means it is in a "editing mode" and populate the fields with its data, if not it is in "create mode".
So how should I use v-model in my form fields?
Should I v-model each form field to a computed property (which has a getter and a setter) and the computed property would check if the data prop is empty and if not use its data to populate fields ? And in the computed property set method to update the prop ?
parent component
<post :data.sync="dataObject"></post>
child (Post) component
<template>
<div>
<form>
<input type="text" label="title" v-model="computedTitle" />
<input type="text" label="message" v-model="computedMessage" />
</form>
</div>
<input type="button" #click="submitted"
<template>
<script>
export default {
data(){
return{
post:{
title:null,
message:null
}
}
},
props:["data"],
computed:{
computedTitle:{
get(){
return data ? data.title : ''
},
set(computedTitle){
computedTitle = computedTitle // trying to update computed property value with the field value...
}
},
computedMessage:{...}
}
}
</script>
You can use watch to check data prop, if it's set then set to local post variable.
If created, then data is null, post.title and post.message are set to null
If updated, then data is not null, post.title is set to data.title and post.message to set to data.message
<template>
<div>
<form>
<input type="text" label="title" v-model="post.title" />
<input type="text" label="message" v-model="post.message" />
</form>
</div>
<input type="button" #click="submitted"
<template>
<script>
export default {
data() {
return{
post: {
title: null,
message: null
}
}
},
props:["data"],
watch: {
data: {
handler(newData) {
if (newData) {
this.post = {
title: newData.title,
message: newData.message
}
}
},
immediate: true // this makes watch is called when component created
}
}
}
</script>
Note that you should use immediate: true to make the watch's function called when component is created
If the fields of my FormGroup are model-bound, ala [(ngModel)], and become populated on page load, e.g. because of a service, my Submit Button, which is guarded as [disabled]="biodataForm.status !== 'VALID'", does not become disabled. If the form comes up blank and I fill it in normally, the guard passes when the form is correctly filled out. If the same exact values are populated through the data-binding, the biodataForm.status value remains INVALID until I change the value of every field.
My feeling is that the form should recognize it has valid content after the data-bindings are populated, and its status should change from INVALID to VALID as a result... what's going wrong here?
My form markup looks like this:
<form class="form" name="biodataForm" [formGroup]="biodataForm">
<mat-form-field class="full-width">
<input matInput placeholder="First Name"
required
[(ngModel)]="_memberdata.firstname"
[formControl]="firstnameFormControl">
<mat-error *ngIf="firstnameFormControl.invalid">{{getRequiredErrorMessage('firstname')}}</mat-error>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput placeholder="Last Name"
required
[(ngModel)]="_memberdata.lastname"
[formControl]="lastnameFormControl">
<mat-error *ngIf="lastnameFormControl.invalid">{{getRequiredErrorMessage('lastname')}}</mat-error>
</mat-form-field>
<mat-form-field class="full-width"
hintLabel="Note: We'll send you an email with a link to click to prove it's you">
<input matInput placeholder="Email"
required
[(value)]="_memberdata.email"
[formControl]="emailFormControl">
<mat-error *ngIf="emailFormControl.invalid">{{getEmailErrorMessage()}}</mat-error>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput placeholder="Phone" type="tel"
[(value)]="_memberdata.phone"
required
[formControl]="phoneFormControl">
<mat-error *ngIf="phoneFormControl.invalid">{{getPhoneErrorMessage()}}</mat-error>
</mat-form-field>
<button mat-raised-button color="primary"
class="submit-button"
[disabled]="biodataForm.status !== 'VALID'"
(click)="handleNext()">Next Step</button>
</form>
```
My Angular component surrounding this form looks like this (details omitted for clarity, full source is here):
export class WelcomeComponent {
emailFormControl = new FormControl('', [
Validators.required,
Validators.email,
]);
firstnameFormControl = new FormControl('', [Validators.required]);
lastnameFormControl = new FormControl('', [Validators.required]);
phoneFormControl = new FormControl('', [
Validators.required,
Validators.pattern(/(\(?[0-9]{3}\)?-?\s?[0-9]{3}-?[0-9]{4})/)
]);
// addressFormControl = new FormControl('', [Validators.required]);
biodataForm: FormGroup = new FormGroup({
email: this.emailFormControl,
firstname: this.firstnameFormControl,
lastname: this.lastnameFormControl,
phone: this.phoneFormControl
// address: this.addressFormControl
});
getEmailErrorMessage() {
return this.emailFormControl.hasError('required') ? 'You must enter a value' :
this.emailFormControl.hasError('email') ? 'Not a valid email' : '';
}
getPhoneErrorMessage() {
return this.phoneFormControl.hasError('required') ? 'You must enter a value' :
this.phoneFormControl.hasError('pattern') ? 'Format must be (xxx) xxx-xxxx' : '';
}
getRequiredErrorMessage(field) {
return this.biodataForm.get(field).hasError('required') ? 'You must enter a value' : '';
}
constructor(
public _memberdata: MemberDataService,
private _api: ApiService,
private _router: Router,
private _snackBar: MatSnackBar) { }
handleNext() {
// ... handle button click
}
}
```
The form itself can be checked with valid and invalid. The below should work:
[disabled]="biodataForm.invalid"
Info on the Angular form group can be found at: https://angular.io/api/forms/FormGroup
In addition, the email and phone inputs...you are using [(value)]...change those to [(ngModel)] and it should work the way you expect.
This is my form
<form className="input-group" onSubmit={this.handleSubmit}>
<input className="form-control"
type="text"
placeholder="Insert name"
autofocus="true" />
<span className="input-group-btn">
<button type="submit" className={classNames}>Add</button>
</span>
</form>
This is my event handler:
handleSubmit(e) {
e.preventDefault();
let name = e.target[0].value;
if (name.length > 0) {
this.props.dispatch(createClassroom(name));
}
}
My question is:
what's the proper "redux way" to clearing the form after submitting it?
Do I need to dispatch a different action or should I use the existing createClassroom action?
Note: I'd rather not use redux-form package.
First, you have to make sure that the <input> is a controlled component by passing its respective value from the state:
const { classroom } = this.props;
// in return:
<input type="text" value={ classroom.name } />
Then, the form can be cleared by ideally submitting a RESET action that your classroom reducer acts upon:
const initialState = {};
function classroomReducer(state = initialState, action) {
switch (action.type) {
// ...
case 'RESET_CLASSROOM':
return initialState;
default:
return state;
}
}
I have the following form in an Angular partial:
<form name="submit_entry_form" id="submit_entry_form" ng-submit="submit()" ng-controller="SubmitEntryFormCtrl" novalidate >
<input type="text" name="first_name" ng-model="first_name" placeholder="First Name" required/><br />
<input type="text" name="last_name" ng-model="last_name" placeholder="Last Name" required/><br />
<input type="text" name="email" ng-model="email" placeholder="Email Address" required/><br />
<input type="text" name="confirm_email" ng-model="confirm_email" placeholder="Confirm Email Address" required/><br />
<span ng-show="submit_entry_form.$invalid">Error!</span>
<input type="submit" id="submit" value="Submit" />
</form>
The trouble I'm having is with the span at the bottom that says "Error!". I want this to show ONLY if one of the inputs is both "ng-dirty" and "ng-invalid". As it is above, the error will show until the form is completely valid. The long solution would be to do something like:
<span ng-show="submit_entry_form.first_name.$dirty && submit_entry_form.first_name.$invalid || submit_entry_form.last_name.$dirty && submit_entry_form.last_name.$invalid || submit_entry_form.email.$dirty && submit_entry_form.email.$invalid || submit_entry_form.confirm_email.$dirty && submit_entry_form.confirm_email.$invalid">Error!</span>
Which is UGLY. Any better way to do this?
Method 1: Use a function on $scope set up by your controller.
So with a better understanding of your problem, you wanted to show a message if any field on your form was both $invalid and $dirty...
Add a controller method:
app.controller('MainCtrl', function($scope) {
$scope.anyDirtyAndInvalid = function (form){
for(var prop in form) {
if(form.hasOwnProperty(prop)) {
if(form[prop].$dirty && form[prop].$invalid) {
return true;
}
}
}
return false;
};
});
and in your HTML:
<span ng-show="anyDirtyAndInvalid(submit_entry_form);">Error!</span>
Here is a plunker to demo it
Now all of that said, if someone has entered data in your form, and it's not complete, the form itself is invalid. So I'm not sure this is the best usability. But it should work.
Method 2: Use a Filter! (recommended)
I now recommend a filter for this sort of thing...
The following filter does the same as the above, but it's better practice for Angular, IMO. Also a plunk.
app.filter('anyInvalidDirtyFields', function () {
return function(form) {
for(var prop in form) {
if(form.hasOwnProperty(prop)) {
if(form[prop].$invalid && form[prop].$dirty) {
return true;
}
}
}
return false;
};
});
<span ng-show="submit_entry_form | anyInvalidDirtyFields">Error!</span>
I wonder if HTML5 have any formvalidation for dual entry (write 2 identical password) and can you write own exceptions?
Thanx in advance!
If you want something a bit nicer and HTML5-utilising, try this:
http://www.html5rocks.com/en/tutorials/forms/html5forms/
<label>Password:</label>
<input type="password" id="password" name="password">
<label>Confirm Password:</label>
<input type="password" id="passwordconf" name="passwordconf" oninput="check(this)">
<script language='javascript' type='text/javascript'>
function check(input) {
if (input.value != document.getElementById('password').value) {
input.setCustomValidity('The two passwords must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
Make it fancy by adding this to your CSS (below). It puts a red border around the offending input fields when they fail HTML5 validation.
:invalid {
border: 2px solid #ff0000;
}
All done. You should still use an alert() or server-side validation to ensure that the user inputs both passwords correctly. Don't rely on client-side anything.
I had a similar problem, and to solve it using the HTML5 api I did this: setted a pattern for the password to contain at least eight letters and a number. Then to make them matching I did:
var password = document.querySelector('#password'),
passwordConfirm = document.querySelector('#password_confirm');
[].forEach.call([password, passwordConfirm], function(el) {
el.addEventListener('input', function() {
if (!el.validity.patternMismatch) {
if ( password.value === passwordConfirm.value ) {
try{password.setCustomValidity('')}catch(e){}
} else {
password.setCustomValidity("Password and password confirm doesn\'t match")
}
}
}, false)
});
where with el.validity.patternMismatch check for the pattern validity first and then check for the validity of the two.
Here is my password input with the pattern.
<input type="password" pattern="^((?=.*(\d|\W))(?=.*[a-zA-Z]).{8,})$" id="password" />
I'm quite sure that's not possible. Also, it can be easily covered by javascript so why not use that instead?
This works perfectly well:
<script language="javascript">
function checkPassword() {
if (document.pwForm.pw1.value != document.pwForm.pw2.value) {
alert ('The passwords do not match!');
return false;
}
}
</script>
<form action="filename.ext" name="pwForm" method="GET/POST">
<input type="password" name="pw1" value=""><br />
<input type="password" name="pw2" value=""><br />
<input type="Submit" name="CheckPassword" value="Check Passwords" onClick="return checkPassword();">
</form>
Thanks Kicker, that was really useful.
I extended it a little to make the password and password confirm inputs to be invalid as soon as typing in the input started.
var password = document.querySelector(' input[name=usr_password]');
var passwordConfirm = document.querySelector(' input[name=usr_password_confirm]');
if (password && passwordConfirm)
{
[].forEach.call([password, passwordConfirm], function(el) {
el.addEventListener('input', function() {
if ( el.validity.patternMismatch === false) {
if ( password.value === passwordConfirm.value ) {
try{
password.setCustomValidity('');
passwordConfirm.setCustomValidity('');
}
catch(e){}
}
else {
password.setCustomValidity("The two passwords do not match");
}
}
if ((password.checkValidity() && passwordConfirm.checkValidity()) === false)
{
password.setCustomValidity("The two passwords do not match, and they don't comply with the password rules.");
passwordConfirm.setCustomValidity("The two passwords do not match, and they don't comply with the password rules.");
}
else
{
password.setCustomValidity('');
passwordConfirm.setCustomValidity('');
}
}, false)
});
}
I think this is what you are looking for.
<p>Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" name="pwd1" onchange="
this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 6 characters, including UPPER/lowercase and numbers' : '');
if(this.checkValidity()) form.pwd2.pattern = this.value;
"></p>
<p>Confirm Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" name="pwd2" onchange="
this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');
"></p>
This will do the password and retype password fields validation.
Another option is to use http://jqueryvalidation.org/validate/, if you don't mind using Jquery to do your dirty work.
Check out http://jqueryvalidation.org/equalTo-method
<form id="myform">
<label for="password">Password</label>
<input id="password" name="password" />
<br/>
<label for="password_again">Again</label>
<input class="left" id="password_again" name="password_again" />
<br>
<input type="submit" value="Validate!">
</form>
<script>
$( "#myform" ).validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
</script>
You can also write more complicated methods if required: http://jqueryvalidation.org/category/plugin/