Hello I am new learner of react.
anybody please help me in form validation on(onchange) input Fields
<Form.Group className="mb-3" controlId="Username">
<Form.Label>Username</Form.Label>
<Form.Control type="text" placeholder="Lastname" name='username' value={Validation} onChange={textchange}/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" name='email' value={Validation.email} onChange={emailchange}/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" >
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" name='password' autoComplete="on" onChange={passchange}
value={Validation.password}/>
</Form.Group>
<Form.Group className="mb-3" >
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
Submit
For forms in React, you can use the formik package for react as it helps in validation and forms in general.
For forms you can either use useRef if you don't care for your component to re-render, or one of useState and useReducer.
Generally having too many states in your component (or in a form like this) is not good practice.
You can use useReducer as it helps manage your logic for the onChange property of your entire form in one place.
Generally the onChange property returns an event and the value in your field can be accessed this way:
onChange={event=>{setValue(event.target.value)}}
or using functions like you are:
function handleChange (event) {
setValue(event.target.value);
}
...
<input value={value} onChange={handleChange} />
and for validation you can check before setting your state of variable depending on the conditions you need to add.
I recommend you to use react-hook-form.
It's the best library to manage forms in react.
Related
I want to set on the autocomplete attribute for an angular form but it doesn't work as expected. It remembers only the values that I submitted only the first time and I would like to remember and suggest all the values no matter how many times I click on submit button.
Here is the stackblitz with the code that I tried.
<form
autocomplete="on"
(ngSubmit)="onSubmit()"
name="filtersForm"
[formGroup]="formGroup1"
>
<div>
<label>First Name</label>
<input
id="firstName"
name="firstName"
autocomplete="on"
formControlName="firstName"
/>
</div>
<div>
<label>Last Name</label>
<input
id="firstName"
name="lastName"
autocomplete="on"
formControlName="lastName"
/>
</div>
<button type="submit">Submit</button>
</form>
Here are the details about the autocomplete attribute that I used.
In Firefox, the autocomplete is working after several clicks on Submit button, the problem is in Chrome and Edge.
Is there a way to make the autocomplete to work for inputs inside the angular form?
I think, I have found a workaround, that only works with Template Driven Form.
TLDR;
What I have discovered while looking after this issue.
On first form submit autofill remember only first time submission values
form submit POST method can remember all values.
Yes, by looking at above, it clearly seems like 2nd way is suitable for us. But why would anybody do form POST for submitting form to BE. There should be better way to tackle this. Otherwise we would have to think of handling PostBack 😃😃 (FW like .Net does it by keeping hidden input's).
Don't worry we can do some workaround here to avoid form POST. I found an answer for handling POST call without page refresh.
Working JSBin with plain HTML and JS
AutoCompleteSaveForm = function(form){
var iframe = document.createElement('iframe');
iframe.name = 'uniqu_asdfaf';
iframe.style.cssText = 'position:absolute; height:1px; top:-100px; left:-100px';
document.body.appendChild(iframe);
var oldTarget = form.target;
var oldAction = form.action;
form.target = 'uniqu_asdfaf';
form.action = '/favicon.ico';
form.submit();
setTimeout(function(){
form.target = oldTarget;
form.action = oldAction;
document.body.removeChild(iframe);
});
}
Basically we change set few things on form attribute.
target="iframe_name" - Connects to iFrame to avoid page refresh.
method="POST" - POST call
url="/favicon" - API url to favicon (lightweight call)
In angular you can create an directive for the same.
import {
Directive, ElementRef, EventEmitter,
HostBinding, HostListener, Input, Output,
} from '#angular/core';
#Directive({
selector: '[postForm]',
})
export class PostFormDirective {
#HostBinding('method') method = 'POST';
#HostListener('submit', ['$event'])
submit($event) {
$event.preventDefault();
this.autoCompleteSaveForm(this.el.nativeElement);
}
constructor(private el: ElementRef) {}
autoCompleteSaveForm(form) {
let iframe = document.querySelector('iframe');
if (!iframe) {
iframe = document.createElement('iframe');
iframe.style.display = 'none';
}
iframe.name = 'uniqu_asdfaf';
document.body.appendChild(iframe);
var oldTarget = form.target;
var oldAction = form.action;
form.target = 'uniqu_asdfaf';
form.action = '/favicon.ico'; // dummy action
form.submit();
setTimeout(() => {
// set back the oldTarget and oldAction
form.target = oldTarget;
form.action = oldAction;
// after form submit
this.onSubmit.emit();
});
}
#Output() onSubmit = new EventEmitter();
ngOnDestroy() {
let iframe = document.querySelector('iframe');
if (iframe) {
document.body.removeChild(iframe);
}
}
}
Okay, so far everything went well. Then I started integrating this in formGroup(Model Driven Form), somehow it didn't worked. It does not store value next time these fields.
<form (ngSubmit)="onSubmit()" [formGroup]="formGroup1" autocomplete="on">
<div>
<label>First Name</label>
<input id="firstName" name="firstName" formControlName="firstName" />
</div>
<div>
<label>Last Name</label>
<input id="lastName" name="lastName" formControlName="lastName" />
</div>
<button>Submit</button>
</form>
Later I tried the same with Template Driven Form. It just worked like a charm! I did not went into the depth why it didn't work for Model Driven Form (perhaps that investigation could eat more time).
<form #form1="ngForm" ngForm postForm (onSubmit)="onSubmit(form1)">
<ng-container [ngModelGroup]="userForm">
<div>
<label>First Name</label>
<input name="firstName" [(ngModel)]="userForm.firstName" />
</div>
<div>
<label>Last Name</label>
<input name="lastName" [(ngModel)]="userForm.lastName" />
</div>
</ng-container>
<button>Submit</button>
</form>
Yeah, I just said in the begining it works only with Template Driven Form. So you would have to switch to Template. And one more important thing to note, you may think of creating dummy POST api call, that can be lightweight rather than hitting favicon.
Stackblitz
autocomplete attribute works only with submitted values. It has nothing to do with Angular.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
If you need some custom behavior then you are better off creating your own component to autocomplete user's input, this way you can use some default values, add more of them on blur etc.
You just need to remove autocomplete="on" in input tag. With chrome, we only add attribute autocomplete="on" in form element and it will be cached all value that user input into input text. Result will be like this:
<form
autocomplete="on"
(ngSubmit)="onSubmit()"
name="filtersForm"
[formGroup]="formGroup1"
>
<div>
<label>First Name</label>
<input
id="firstName"
name="firstName"
formControlName="firstName"
/>
</div>
<div>
<label>Last Name</label>
<input
id="firstName"
name="lastName"
formControlName="lastName"
/>
</div>
<button type="submit">Submit</button>
</form>
You have to create an array with your desired options which should be displayed as autocomplete. You can have a look here https://material.angular.io/components/autocomplete/examples, there are multiple examples which should help you. Even if you're not using Angular Material, the logic would be the same
I'm working with Angular material and I have a search form. As shown in the following code, I have a button and after a click event on the button, the words written in the search form are given to the searchProductByName method as parameters. I'd like to substitute the button with a listener that, after having written something in the form and having clicked on enter (instead of the button), grabs the things written in the search form and passes them to the searchProductByName method as parameters. Is there a way to do so?
<form class="search-form" >
<mat-form-field class="example-full-width" appearance="fill">
<mat-label >Search</mat-label>
<input #input type="text" ngModel name="name" class="form-control" id="name"
aria-label="Search"
matInput
>
<button (click)="searchProductByName(input.value)" routerLink="/products/searchProduct/by_name" routerLinkActive="active">Go</button>
</mat-form-field>
</form>
Easy way to do that in template is add keyup event to the input:
<form class="search-form" >
<input #input type="text" ngModel name="name" class="form-control" id="name"
(keyup.enter)="searchProductByName(input.value)"
aria-label="Search"
matInput
>
<button (click)="searchProductByName(input.value)" routerLink="/products/searchProduct/by_name" routerLinkActive="active">Go</button>
</mat-form-field>
</form>
Or you can get your input element in component with ViewChild and make listener there.
If the searchPruductByName is a method that is using http request to search from backend, for example - I would suggest to also implement debounce'ing the search as well. Otherwise it would search with each keystroke. A nice elegant way would be to use a debounce decorator. https://medium.com/time-machine/how-to-implement-debounce-decorator-2e963b70cd27
<form class="search-form" >
<input #input type="text" ngModel name="name" class="form-control" id="name"
(input)="searchProductByName($event); onInput($event)"
aria-label="Search"
matInput>
</mat-form-field>
</form>
onInput(event: any) {
console.log(event.target.value);
}
To navigate to link on pressing "Enter" add to constructor Router and then use router to navigate.
constructor(router: Router) {}
onNavigate() {
// other stuff
this.router.navigateByUrl('/products/searchProduct/by_name')
}
<input (keyup.enter)="searchProductByName(input.value); onNavigate()">
I have a react form to collect a user's address. On the first row of the form I take the users first line of address, road and suburb. This form validates entry thanks to the 'validated' prop passed into the Form, and the 'required' prop passed into each Form control except in the case of 'suburb'
return (
<Form noValidate validated={props.isValidated} onSubmit={props.onSubmit}>
<Form.Row>
<Form.Group as={Col} md="4" controlId="validationCustom01">
<Form.Label>Address line 1</Form.Label>
<Form.Control
required
type="text"
onChange={(e) => {
setAddressLineOne(e.target.value);
}}
/>
<Form.Control.Feedback></Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationCustom02">
<Form.Label>Road</Form.Label>
<Form.Control
required
type="text"
defaultValue={road}
onChange={(e) => {
setRoad(e.target.value);
}}
/>
<Form.Control.Feedback></Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="4" controlId="validationCustom03">
<Form.Label>Suburb</Form.Label>
<Form.Control
type="text"
defaultValue={suburb}
onChange={(e) => {
setSuburb(e.target.value);
}}
/>
</Form.Group>
When a user hits submit without filling in any of the fields, the following is rendered:
The issue is, I don't want to validate suburb at all, it looks a little silly being highlighted in green when it's empty. Is there some prop I can pass to the suburb form group to stop it from being validated at all when the user hits submit? It shouldn't show any feedback at all, neither red nor green.
The alternative would be to split up the form into multiple forms, with some fields being in a validated form and some fields being in a non-validated form, but I feel like there should be a better way.
Recently I've stumbled upon the same problem and the only fix I could think of was kinda "forcing" the element not to show the validation feedback.
The css I used was:
.was-validated .prevent-validation.form-control:valid,
.prevent-validation.form-control.is-valid {
padding: 0.375rem 0.75rem;
border-color: #ced4da;
background-image: none;
}
After that i can use prevent-validation class in every <Form.Control> you want to prevent this behavior.
I am aiming to create a form to handle disabled JavaScript experience for a small component on my website. Currently I have the following form:
<form method="GET" action="https://mywebsite.com/somedirectory/">
<input type="radio" id="uid1" name="someParam" value="fruity" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" value="veggie" />
<label for="uid2">Vegetable</label>
...other radio options
<input type="submit" value="Submit" />
</form>
Clicking on either of the radio options and then on the submit button will result in:
option 1: https://mywebsite.com/somedirectory/?someParam=fruity
option 2: https://mywebsite.com/somedirectory/?someParam=veggie
How can I add another value for each of the radio options? Say I would like to pass someOtherParam which is unique for each option and I would like to get this as output for my options:
option 1: https://mywebsite.com/somedirectory/?someParam=fruity&someOtherParam=apple
option 2: https://mywebsite.com/somedirectory/?someParam=veggie&someOtherParam=pepper
What I have tried is:
<input type="radio" id="uid1" name="someParam" value="fruity&someOtherParam=apple" />
<input type="radio" id="uid2" name="someParam" value="veggie&someOtherParam=pepper" />
However, the & symbol is converted to %26 inside the link and feels too hacky. Is there a better way to achieve this? Also, is there a way to make sure the Submit button is only enabled once a radio option is selected?
P.S. I am aiming for pure HTML experience with no Javascript involved. Is that possible?
I'm pretty sure this is not posible in modern browsers without the use of JS. Maybe on old browsers you could do some tricks with CSS and display:none because it used to not send fields with display:none, but nowdays that is not an option.
If you can allow Javascript, you can add a data attribute to each radio option and use it to populate an extra hidden input on change.
document.querySelectorAll('input[type=radio][name="someParam"]')
.forEach(radio => radio.addEventListener('change', (event) =>
document.getElementById('someOtherParam').value = event.target.dataset.extraValue
));
<form method="GET" action="https://mywebsite.com/somedirectory/">
<input type="radio" id="uid1" name="someParam" value="fruity" data-extra-value="apple" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" value="veggie" data-extra-value="pepper" />
<label for="uid2">Vegetable</label>
<input type="hidden" id="someOtherParam" name="someOtherParam">
<input type="submit" value="Submit" />
</form>
To add another radio group independent from others, use a distinct name property. For example, to add a second parameter called someOtherParam to the request, create a radio group with name="someOtherParam":
<input type="radio" id="uid3" name="someOtherParam" value="apple" />
<input type="radio" id="uid4" name="someOtherParam" value="pepper" />
And add their correspondent labels.
Also, is there a way to make sure the Submit button is only enabled once a radio option is selected?
You can add the required attribute to prevent the browser to send the form before all the inputs have a value.
Without javascript, what you're describing cannot be done.
What you could do, as other posters have suggested is:
Create radio buttons for the list of options that are possible for each category (fruits / vegetables etc)
<input type="radio" id="uid3" name="someOtherParam" value="apple" />
<input type="radio" id="uid4" name="someOtherParam" value="pepper" />
When processing the input on your server side code, check if you have received a value or not. If not, you can choose a default option (apple or whatever). On your page you can mention what the default option would be in case they don't make a selection.
You could make some of the input required as suggested, but you would still have to make check on the server side that the input has been received, since the required attribute is just a suggestion to users browsers - it won't stop a malicious persons from making a request without that parameter by running a script etc.
To submit extra information to the server, you can use a hidden input type and change value as per your needs using javascript.
HTML code
<form method="GET" action="">
<input type="radio" id="uid1" name="someParam" value="fruity" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" value="veggie" />
<label for="uid2">Vegetable</label>
<input type="hidden" id="uid3" name="someOtherParam" value="" readonly required />
<input type="submit" value="Submit" onclick="onSubmit()" />
</form>
Javascript code
function onSubmit () {
let fruityRadio = document.getElementById( 'uid1' );
let veggieRadio = document.getElementById( 'uid2' );
if ( fruityRadio.checked ) {
document.getElementById( 'uid3' ).value = 'apple';
} else if ( veggieRadio.checked ) {
document.getElementById( 'uid3' ).value = 'pepper';
}
}
Easy, double up the value with a deliminator between every extra value:
HTML
<div>
<label for="uid1">
<input id="uid1" name="fruit1" type="radio" value="apple:orange" />
Fruit, Apple + Orange
</label>
</div>
<div>
<label for="uid2">
<input id="uid2" name="fruit1" type="radio" value="apple:cherry:lime" />
Fruit, Apple + Cherry + Lime
</label>
</div>
node.js
I'm not sure how node.js handles what PHP refers simply as $_POST['name_attribute_value_here'] though I do know you simply want to use .split(':') to get the two or more values from that single form. If you want more options per radio button just append a deliminator (it doesn't have to be :) between each value.
Both of those radio options have the name "fruit1" so the user can't choose both.
No JavaScript is necessary.
A minor adaptation on the server.
Extra values will obviously not appear to the server if the user doesn't select that radio form field.
Arrays
If you want to set your own key/values then just add a second deliminator:
<input name="fruit1" value="fruit:apple,fruit:lime,color:purple,planet:Earth" />
Then at the server use [whatever].split(',') to get the pairs and iterate in a loop to get each key/value. You could create an entire crazy multi-dimensional array if you really wanted to.
I hope this helps, feel free to comment if you need any further clarification.
Generate form:
const data = [
{ name: 'apple', type:"fruity" },
{ name: 'pepper', type:"veggie"}
]
const form = document.querySelector('form');
const uid = document.querySelector('#uid')
createOptions(data);
function createOptions(data){
data.forEach((e, index) => {
const f = document.createDocumentFragment();
const l = document.createElement('label');
const i = document.createElement('input');
l.setAttribute('for', `uid${index+1}`);
l.textContent=e.name;
i.setAttribute('type', `radio`);
i.setAttribute('for', `uid${index+1}`);
i.setAttribute('name', 'someOtherParam');
i.setAttribute('value', e.name);
i.dataset.otype = e.type;
f.appendChild(l);
f.appendChild(i);
form.insertBefore(f, uid);
i.addEventListener('change', onselectChange, false);
})
}
function onselectChange(event) {
uid.value = event.target.dataset.otype;
}
<form method="GET" action="https://mywebsite.com/somedirectory/">
<input type="text" id="uid" name="someParam"
style="width:0; visibility: hidden;">
<input type="submit" value="Submit" />
</form>
I can't think another way of doing this using less code, the following achieves your desired result:
<form name="form" method="GET" action="">
<input type="radio" id="uid1" name="someParam" required value="fruity" onchange="document.form.someOtherParam.value = 'apple'" />
<label for="uid1">Fruit</label>
<input type="radio" id="uid2" name="someParam" required value="veggie" onchange="document.form.someOtherParam.value = 'pepper'" />
<label for="uid2">Vegetable</label>
<input type="hidden" name="someOtherParam" value=""/>
<input type="submit" value="Submit"/>
</form>
There's only 3 changes to your example:
Add a name to the form, then add inline attributes required and onchange to each radio, finally add an input[type=hidden] to include the extra param. The first change is meant so you'll not need document.getElementById later, the second so the form won't be empty submitted and also update the hidden desired value.
The preventDefault() isn't working correctly. When I press the Login button, the page refresh's, but with the preventDefault() it shouldn't.
I tried it with stopPropagation(), but there was the same problem.
TypeScript:
loginUser(loginevent){
loginevent.preventDefault()
const target = loginevent.target
const username = target.getElementById('username')
const password = target.getElementById('pasword')
console.log(username, password)
}
HTML:
<form (submit)="loginUser($loginevent)">
<input type="text" placeholder="Benutzername" id="username">
<input type="text" placeholder="Passwort" id="password">
<input type="submit" value="Login">
</form>
The loginevent.preventDefault() should prevent the page from reloading it, when I press the Login button.
You'd have to pass $event as an argument and not any other word. $event is a reserved keyword to get the event data.
Here's what the Angular Docs say:
The framework passes the event argument—represented by $event—to the handler method, and the method processes it:
Try this:
<form (submit)="loginUser($event)">
<input type="text" placeholder="Benutzername" id="username">
<input type="text" placeholder="Passwort" id="password">
<input type="submit" value="Login">
</form>
I would suggest you should use what angular has to offer, either a template-driven or reactive form. We are coding with angular, then why not do it the angular way :)
Template driven:
<form #f="ngForm" (ngSubmit)="loginUser(f.value)">
<input type="text" placeholder="Benutzername" name="username" ngModel>
<input type="text" placeholder="Passwort" name="password" ngModel>
<button type="submit">Submit</button>
</form>
Here you now pass the form value to your login, which contains your username and password:
loginUser(values){
const username = values.username
const password = values.password
console.log(username, password)
}
With this, you don't even need to worry about preventDefault()
But I would also recommend the reactive way, read more about both template-driven and reactive forms: https://angular.io/guide/forms