Here is my code, I did write "required" inside <Form.Control>.
I also checked the documentation https://react-bootstrap.github.io/forms/validation/
But still doesn't work, could someone give me some suggestions?
Thank you so much :)
return (
<>
<Helmet>
<title>Add Media</title>
</Helmet>
<Container className="d-flex justify-content-center mt-3">
<Row className="col-12 col-sm-12 col-lg-6">
<Form action="/api/concerts/add-new" method="post">
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Title</Form.Label>
<Form.Control
required
type="text"
placeholder="title"
name="title"
value={title}
id=""
onChange={(e) => setTitle(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>YouTube Link</Form.Label>
<Form.Control
required
type="text"
placeholder="paste the YouTube link here"
name="title"
value={youTubeSrc}
id=""
onChange={(e) => setYouTubeSrc(e.target.value)}
/>
</Form.Group>
<Modal.Footer>
<Button variant="dark text-white col-12 mx-auto" type="submit" onClick={handleSubmit}>
<TbUpload /> Upload
</Button>
</Modal.Footer>
</Form>
</Row>
</Container>
</>
);
You have to pass noValidate and validated=false to the Form so it can be handled by library.
<Form
action="/api/concerts/add-new"
method="post"
noValidate
validated=false
/>
...
Related
How can I align my labels, inputs, and textarea on the same line?
export default function Display() {
...
return (
<form onSubmit={handleChange}>
<div className="mb-4 align-middle">
<label>
Title :
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</label>
<label>
{" "}
Comment :
<textarea
value={comment}
placeholder="comment"
onChange={(e) => setComment(e.target.value)}
cols="50"
rows="3"
/>
</label>
</div>
</form>
);
}
Here a picture (what I have vs expectations):
Set the parent div to display: flex and flex-direction: row
...
return (
<form onSubmit={handleChange}>
<div className="mb-4 align-middle" style={{display: 'flex', flexDirection: 'row'}}>
<label>
Title :
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</label>
<label>
{" "}
Comment :
<textarea
value={comment}
placeholder="comment"
onChange={(e) => setComment(e.target.value)}
cols="50"
rows="3"
/>
</label>
</div>
</form>
);
}```
You can use flex properties of tailwind css to align them in a same row. Also I have wrapped the the two inputs in two separate rate divs.
export default function Display() {
...
return (
<form onSubmit={handleChange}>
<div className="mb-4 align-middle flex flex-row items-center justify-center space-x-10">
<div>
<label>
Title :
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</label>
</div>
<div>
<label>
{" "}
Comment :
<textarea
value={comment}
placeholder="comment"
onChange={(e) => setComment(e.target.value)}
cols="50"
rows="3"
/>
</label>
</div>
</div>
</form>
);
}
I'm working on a project which required ant design datepicker along with bootstrap.I'm not sure whats making this datepicker move out of screen. Is there something I need to do with bootstrap classes to fix this? I have shared my screenshot.thanenter image description here]1]1
const form= () => (
<form onSubmit={onFormSubmit}>
<div className="form-group">
<label className="btn btn-outline-secondary btn-block m-3">Add image
<input type="file" name="image" onChange={handleImageChange} accept="image/*" hidden/>
</label>
<input className="form-control m-2" type="text" name="title" placeholder="title" onChange={handleChange} value={title}/>
<textarea className="form-control m-2" type="text" name="content" placeholder="content" onChange={handleChange} value={content}/>
<AlgoliaPlaces className="form-control ml-2" placeholder="location" defaultValue={location} options={config} onChange={handleSearch} style={{height:"50px"}} />
<input className="form-control m-2" type="number" name="price" placeholder="price" onChange={handleChange} value={price}/>
<input className="form-control m-2" type="number" name="bed" placeholder="Number of beds" onChange={handleChange} value={bed}/>
</div>
**<DatePicker className="form-control m-2"/>**
<button className="btn btn-outline-primary m-2">Add</button>
</form>
)
return(
<div>
<div className="container-fluid p-5 text-center">
<h2>Add </h2>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-10">
{hotelForm()}
</div
<div className="col-md-2">
<img src={preview} alt="preview-image" className="img img-fluid m-2" />
<pre>{JSON.stringify(values,null, 2)}</pre>
</div>
</div>
</div>
</div>
)
It looks like you are missing ant design css stylesheet.
Try to add the following line at the root of your app :
import 'antd/dist/antd.css';
<Formik
initialValues={LoginSchema}
validationSchema={LoginSchemaValidation}
onSubmit={(values, { setSubmitting, resetForm }) => {
this.handleSubmit(values);
setSubmitting(false);
resetForm();
}}
>
<Form>
<div className="input-group mb-3">
<Field name="username" type="email" className="form-control" placeholder="Email" />
<div className="input-group-append">
<div className="input-group-text">
<span>
<FontAwesomeIcon icon={faEnvelope} />
</span>
</div>
</div>
</div>
<p className="errors">
<ErrorMessage name="username" />
</p>
<div className="input-group mb-3">
<Field
name="password"
type="password"
className="form-control"
placeholder="Password"
/>
<div className="input-group-append">
<div className="input-group-text">
<span>
<FontAwesomeIcon icon={faLock} />
</span>
</div>
</div>
</div>
<p className="errors">
<ErrorMessage name="password" />
</p>
<div className="input-group mb-3">
<label>
<Field name="isRemember" type="checkbox"/> Remember Me
</label>
</div>
<div className="row">
<div className="col-12">
<button type="submit" className="btn btn-yellow btn-block">
Sign In
</button>
</div>
</div>
</Form>
</Formik>
This is my react form for user input, i used spring boot as backend.
Now i want to implement remember me feature at front-end
Is it secure to store username and password in local storage?
If not then how should i implement this functionality?
I am trying to make what I think is called sub components in React though I can't find any official up to date documentation on how to do this. My issue is I would like to make a large form with different sections broken up as bootstrap cards, within a card I want an arbitrary number of rows of inputs.
Ex)
Section 1
First_Name Last_Name
Email_Address
Section 2
Address
City State Zip
The code looks something like this for Section 1:
<div className="MyCard floatingCard card">
<h5 className="MyCardHeader card-header">Section 1</h5>
<div className="MyCardBody card-body">
{/* Row 1 */}
<div className="row">
<div className="form-group col-md-6" style={{ marginBottom: "2em" }}>
<input />
</div>
<div className="form-group col-md-6" style={{ marginBottom: "2em" }}>
<input />
</div>
</div>
{/* Row 2 */}
<div className="row">
<div className="form-group col-md-12" style={{ marginBottom: "2em" }}>
<input />
</div>
</div>
</div>
</div>
The above is not very clean, and I would also need to do the same for section 2, is there a way to make this look like:
<FormSection header="Section1">
<FormRow>
<Input name="firstName" label="First Name" />
<Input name="lastName" label="Last Name" />
</FormRow>
<FormRow>
<Input name="email" label="Email address" />
</FormRow>
</FormSection>
<FormSection header="Section2">
<FormRow>
<Input name="email" label="Email address" />
</FormRow>
<FormRow>
<Input name="city" label="City" />
<Input name="state" label="State" />
<Input name="zip" label="Zip" />
</FormRow>
</FormSection>
I have an issue with a confirmation popup being triggered from an edit modal built with reactstrap. Currently, when I click the edit button and fill in the edit form, I click submit, and expect to see the confirmation modal. However, the confirmation modal is rendering behind the edit form. How do I resolve this so that the confirmation modal is not rendered behind the form?
I would like to render the confirmation modal in front of the edit form modal, like a double nested modal.
<Media className="align-items-center">
<Media>
<button className="btn btn-primary" onClick= {() => this.editClient(post , post.clientId)}><i class="fa fa-edit"></i></button>
<Button className="btn btn-danger" onClick= {(event) => this.handleDelete(event, post.clientId)} ><i class="fa fa-trash"></i></Button>
<Modal isOpen={this.state.modal} toggle={this.handleEdit} className={this.props.className}>
<ModalHeader>Edit Client</ModalHeader>
<ModalBody>
<Form >
<FormGroup>
<Label htmlFor="clientId">ID Client</Label>
<Input type="text" value={clientId} name="clientId" className="form-control" placeholder="ID Client" onChange={this.handleForm} disabled />
</FormGroup>
<FormGroup>
<label htmlFor="durasi">Tipe Client</label>
<select onChange={this.handleForm} value={clientType} className="form-control" name = "clientType" required="" >
<option value="">Pilihan</option>
<option value="BACKEND">BACKEND</option>
<option value="CHANNEL">CHANNEL</option>
</select>
</FormGroup>
<FormGroup>
<Label htmlFor="name">Nama</Label>
<Input onChange={this.handleForm} value={name} type="text" name = "name" className="form-control" placeholder="Name" required="" />
</FormGroup>
<FormGroup>
<Label htmlFor="url">Url</Label>
<Input onChange={this.handleForm} value={url} type="text" name = "url" className="form-control" placeholder="Url" required="" />
</FormGroup>
<FormGroup>
<Label htmlFor="urlBlacklist">Url Blacklist</Label>
{(this.state.post3.map(h => {
if ( `${h.clientId}` === `${this.state.formData.clientId}`) {
return <Input onChange={this.handleForm} value= {urlBlacklist} type="text" name = "urlBlacklist" className="form-control" placeholder="URL Black List" required="" />
}} ))}
</FormGroup>
<FormGroup>
<label>
<input type="checkbox" checked= {isChecked} onChange= {this.toggleChange} value="remember-me" /> Anda yakin, Data anda sudah benar ?
</label>
</FormGroup>
<FormGroup>
<ButtonAntd type="primary" htmlType="submit" onClick={(event) => this.handleSubmit(event)}>Submit</ButtonAntd>{' '}
<ButtonAntd type="danger" htmlType="submit" onClick={this.handleBatal}>Cancel</ButtonAntd>
</FormGroup>
</Form>
</ModalBody>
</Modal>
you can use window.confirm("Are you sure to update pocket?")