hi I am doing form validation using react-final-form.I also take help from this example
https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/field-level-validation?from-embed
I am trying to do same thing when I click submit button it will show Required error if the field is required.
currently, in my demo, it is not showing this
here is my code
https://codesandbox.io/s/quizzical-hellman-65dy3
<RFField
component={SForm.Input}
label="Name"
name="name"
placeholder="Please Enter full Name"
required={true}
validate={required}
/>
is there any way to show required message ?
The error message is available as a prop, but you actually need to setup the mark-up to display the required message.
You can restructure your SForm like this to have it work with semantic-ui and react-final-form.
<SForm.Group widths="equal">
<RFField
label="Name"
name="name"
validate={required}
>
{({ input, meta }) => (
<div>
<label>First Name</label>
<SForm.Input {...input} type="text" placeholder="First Name"/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</RFField>
<RFField
label="last Name"
name="lastName"
validate={required}
>
{({ input, meta }) => (
<div>
<label>Last Name</label>
<SForm.Input {...input} type="text" placeholder="Last Name"/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</RFField>
</SForm.Group>
See working code: https://codesandbox.io/s/flamboyant-shtern-s1pgj
Related
I'm making a form which accepts some details & can only be accessed when you are logged in.
Here is a video to the problem i have faced. Please help me where i am going wrong. The form works perfectly for mobile view but not for normal web view. I think so there is something wrong with the my state management.
https://drive.google.com/file/d/1YAEPXTe8dZdR0xcKFhSDPqDLIkLDVQTt/view?usp=share_link
<form className='login-form addAdmin'>
<h1>Add Health Partner</h1>
<input
type="text"
placeholder="Full Name"
onChange={e => setName(e.target.value)}
required
/>
<input
type="email"
placeholder="Email"
onChange={e => setEmail(e.target.value)}
required
/>
<input
type="number"
placeholder="Mobile number"
onChange={e => setNumber(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
onChange={e => setPassword(e.target.value)}
required
/>
<input
type="text"
placeholder="Address"
onChange={e => setAddress(e.target.value)}
required
/>
<input
type="text"
placeholder="Specialization"
onChange={e => setSpecialization(e.target.value)}
required
/>
<input
type="text"
placeholder="Experience"
onChange={e => setExperience(e.target.value)}
required
/>
<button type='submit' onClick={e=>handleSubmit(e)}>
Add
</button>
</form>
Using create react app with react hook form and reactstrap. It throws the above error. got few answers like it is because of the missing name attribute in the controller. I am not using a controller. It occurs only after taking a build.
Below you could find the full code.
const { register, handleSubmit, errors } = useForm({
mode: "onSubmit",
reValidateMode: "onBlur",
});
<Form className="Login" onSubmit={handleSubmit(submitHandler)}>
<h1 className="mb-4">Log in</h1>
<FormGroup className={errors.email ? "mb-2" : "mb-4"}>
<Label for="email" hidden>
Email
</Label>
<Input
type="text"
data-test="component-field"
name="email"
innerRef={register({ required: true })}
id="email"
placeholder="Email"
defaultValue={email}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
{errors.email && (
<span className="text-danger mb-1 p-1">This field is required</span>
)}
</FormGroup>{" "}
<FormGroup className={errors.password ? "mb-2" : "mb-4"}>
<Label for="password" hidden>
Password
</Label>
<Input
type="password"
data-test="component-field"
name="password"
innerRef={register({ required: true })}
defaultValue={password}
id="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
ref={register({ required: true })}
/>
{errors.password && (
<span className="text-danger mb-1 p-1">This field is required</span>
)}
</FormGroup>{" "}
<Button size="sm" className="wb-primary-button font-weight-bold">
Login
`</Button>`
got an answer from GitHub discussion from its author. since I used reactstrap library, I should use innerRef instead of ref that throws an error. In second Input element removed ref then it worked fine.
I'm converting a project to use Semantic-UI-React and a form is triggering on every change. The old form looked like this and worked as intended:
<div className="entryForm">
<form onSubmit={this.handleSubmit}>
<span className="formLabel">Location:</span>
<input type='text' name="location" placeholder="Location"
onChange={this.handleChange} autoComplete="off" /><br/>
Date Activity:
<input type='text' name="activity" placeholder="Activity"
onChange={this.handleChange} autoComplete="off"/><br/>
Cuisine:
<input type='text' name="cuisine" placeholder="Cuisine"
onChange={this.handleChange} autoComplete="off"/>
<button type="submit" value="submit" hidden="hidden"/>
</form></div>
The Semantic form looks like this and displays both SUBMIT and HELP on every change in the form:
<Form onSubmit={console.log("SUBMIT")}
onChange={console.log("HELP")}>
<Form.Field inline>
<label>Location:</label>
<Input name='location'
placeholder='Enter a neighborhood here'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Activity:</label>
<Input name='activity'
placeholder='Enter a a fun activity'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Cuisine:</label>
<Input name='cuisine'
placeholder='What do you want to eat'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
</Form>
What's going on?
onSubmit={(() => console.log("SUBMIT"))}
That fixed it as well as adding a submit button got it working
I recently created a Netlify application, with Gatsby JS and a Netlify form. I have the following as my form field:
<form
action="#"
method="post"
name="contact"
className="footer-form"
data-netlify="true">
<input
id="name"
type="text"
name="name"
placeholder="Name"
value={this.state.name}
className="footer-form__input"
onChange={e => this.setState({ name: e.target.value })}
/>
<input
id="email"
name="name"
type="email"
className="footer-form__input"
value={this.state.email}
onChange={e => this.setState({ email: e.target.value })}
placeholder="Email address"
/>
<textarea
id="message"
name="message"
className="footer-form__input footer-form__textarea"
value={this.state.message}
onChange={e => this.setState({ message: e.target.value })}
placeholder="Your message"
/>
<button type="submit" className="footer-form__button">
Submit
</button>
</form>
In development, the email field shows as planned. But in production, specifically on the netlify system, only the name and the message field shows.
Form submission works fine in production by the way, showing only the "name" and the "message" inside the Netlify dashboard.
Could there be a reason why this is happening?
The first 2 of your inputs have the same name:
<input
id="name"
type="text"
name="name"
...
/>
<input
id="email"
name="name"
type="email"
...
/>
Netlify may rely on the field name to differ between different inputs. Would you try fixing that and see if the problem still occurs?
Instead of having to attach event listener to each element, how can you add event listeners to a group? Consider having multiple input elements. Instead of repeating onChange={this.handleChange} how can I just attach this function to onChange for all input elements?
Something that with vanilla JS was as easy as selecting all inputs, looping and attaching.
render() {
return (
<form>
<input type="text" name="firstName" placeholder="First Name" onChange={this.handleChange} />
<br />
<input type="text" name="lastName" placeholder="Last Name" onChange={this.handleChange} />
<h1>{this.state.firstName} {this.state.lastName}</h1>
</form>
)
}
You could create a dedicated on-the-fly component, something like:
render() {
const Input = props =>
<input onChange={ this.handleChange } { ...props } />
return (
<form>
<Input type="text" name="firstName" placeholder="First Name" />
<br />
<Input type="text" name="lastName" placeholder="Last Name" />
<h1>{this.state.firstName} {this.state.lastName}</h1>
</form>
)
}
You could try making your elements that must be subscribed (such as the inputs in your code example) into components, creating an array object with them and .map over it, passing your handleChange function to them.