I am using react-bootstrap but I am noticing some weird behavior on form submit.
I have a sign-in file which is a form in a modal
<Modal>
...
<Form
className="d-flex justify-content-center align-items-center flex-column"
onSubmit={onSubmitSignIn}
>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="email"
placeholder="Enter email"
className={`signInputStyle ${
invalidEmail ? "invalidFieldStyle" : ""
}`}
value={email}
onChange={handleEmailValidation}
required
/>
<div>
<small className="errorFormText">
{invalidEmail ? "must be a valid email" : ""}
</small>
</div>
</Form.Group>
...
<div className="signupAcc">
Do not have an account?
<span onClick={() => setModalShow(true)}>SignUp</span>
<SignUp show={modalShow} onHide={() => setModalShow(false)} />
</div>
...
</Form>
</Modal>
In the sign-in component when you click on the SignUp span, it displays the second modal(which is for sign-up, therefore I have two modals now).
The sign-up modal has a form that is similar to that of the sign-in and they both have onSubmit function.
<Modal>
...
<Form
className="d-flex justify-content-center align-items-center flex-column"
onSubmit={onSubmitValue}
>
<Form.Group controlId="formGridFirstName1">
<Form.Control
placeholder="First Name"
required
name="firstname"
className={`signInputStyle ${
invalidateField.firstname ? "invalidFieldStyle" : ""
}`}
onChange={handleUserInput}
/>
<div>
<small className="errorFormText">
{invalidateField.firstname
? "must be at least three letters"
: ""}
</small>
</div>
</Form.Group>
...
</Form>
</Modal>
I noticed when I clicked on the button(type='submit') for the sign-up file it also triggers the onSubmit for the sign-in. My question is why is this behavior? Is it because both form fields are in the dom already? or something else? I really want to know the reason behind this behavior and how to resolve it. Thank you.
Make one of the buttons as type="button" and add an onClick action. the other one should work this way.
It is just native HTML button behaviour. As stated on the documentation, the button element contains the type attribute accepts 3 values: submit, reset, and button. If the type attribute is supplied with the submit value, it will
Submit the current form data.
Deep inside the hood of, React-bootstrap's Form Components, it probably makes use of the HTML Form Element, hence clicking on the button triggers the same mechanism for Form.submit().
If you do not want this behaviour, you may simply remove the type attribute ,or set the type attribute aas button (type="button").
Related
I am using React along with react-bootstrap for creating forms.
I have a form with an email field like this -
Code -
<Form
noValidate
autoComplete="off"
validated={this.state.validated}
onSubmit={this.handleSubmit}
>
<Form.Group className="mb-3" controlId="email">
<Form.Label>Email</Form.Label>
<Form.Control
type="email"
aria-describedby="email"
placeholder="Email"
value={this.state.email}
onChange={this.handleChange}
name="email"
required
/>
<Form.Control.Feedback type="invalid">
Please enter your email
</Form.Control.Feedback>
</Form.Group>
<Button type="submit">Register</Button>
</Form>
I know that if I want to keep showing the error message even if the user has filled the field I can do this -
<Form.Control isInvalid={true}>
But this doesn't remove the green border and the tick mark, and the form still gets submitted. Only the invalid message is visible
Is there any way or any class name that I can specify so that react-bootstrap doesn't consider the field as validated?
I want to do this as the email validation in react bootstrap forms considers this as a correct email - my#email. So, I want to apply custom validation.
Try adding isValid={false} prop to <Form.Control />. It should do it. For more info see the docs here.
When using a Form.Control.Feedback element with type="invalid", you must also use the isInvalid property on the Form.Control, ie isInvalid={true}
I am using Ant Design Forms in my React applpication. I want to prevent browser's credential manager from auto populating the password. Adding DOM attribute autocomplete="off" is not working for me. I also tried adding it in camelCase as pecified in React Doc but no luck!
<Form.Item label="New Password" name={["new"]}>
<Input.Password autoComplete="off" placeholder="Please enter new password" />
</Form.Item>
All that I want to know is how do I prevent auto filling using Ant Design Forms in my React applpication.
you need to put the property autoComplete="off" in the form.item, not in the input
<Form.Item
label="New Password"
autoComplete="off"
name={["new"]}>
<Input.Password placeholder="Please enter new password" />
</Form.Item>
Edit:
Another option to prevent Chrome still autofill the user and email, its passing the autoComplete prop like this:
<Input
type="email"
autoComplete="new-user"
style={{ maxWidth:300}}
/>
<Input.Password
style={{ maxWidth: 300 }}
autoComplete="new-password"
/>
This workaround really prevents chrome weird behavior
I want to use "Enter" key for one of my input field. I am using Ant Design with React hook.
I have big form with child element and form submit functionality. Here is relevant part of the code,
<Form onSubmit={handlesubmit}>
<div className="column1">
<Form.Item>
<Text strong={true}>Supplier</Text>
</Form.Item>
</div>
<div className="column2">
<Form.Item>
<Input
onChange={handleChange}
name="supplier"
/>
</Form.Item>
</div>
<ChildElement/>
<Button
value="submit"
type="primary"
htmlType="submit"
style={{ float: 'right', marginBottom: '10px', marginTop: '10px' }}
>
submit form
</Button>
</Form>
Child component "ChildElement" also have an input submit field
<Input onChange={processArticleNumber} onKeyPress={(e) => (e.key === 'Enter' && fetchArticleData())}/>
When I press 'Enter' key after providing the input in the child element, the "fetchArticleData()" function of child is called but also the parent form is getting submitted which I want to avoid.
But I also want to keep "onSubmit" option on the parent form as I know that allows to submit the form with clicking "Enter" or any button with type "submit".
In class based react, I can specify "this.fetchArticleData" to correctly specify my Input element(from my child component in this case) on which I want this enter key facility but how to do that in function based React approach ?
Or do I need to use another form element inside my child ? for example,
<Form onSubmit={fetchData}>
<Form.Item>
<Input onChange={processArticleNumber}/>
</Form.Item>
</Form>
In the above case, is it a good idea to use "Form element" under a parent "Form element" ?
Any help is much appreciated.
Seems to me that what you need is to add event.stopPropagation(); in the child event handler.
This will prevent the event from propagating up.
Read: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
One way is to disable enterKey option to parent(your submit button) and enable only onClick for button.
You can achieve it by doing some code changes,
use form hook
const [form] = Form.useForm();
Add form to Form tag
< Form
name="basic"
form={form}
onFinish={}
onFinishFailed={}>
Remove htmlType="submit" and call onfinish like dis
< Button type="primary" onClick={form.submit}>
Submit
< /Button>
Still have any issue?, Refer my Codesandbox for removing enterkey option to antdesign form
https://codesandbox.io/s/formwithouthtmltypestackover-bpbhd?file=/index.js:1414-1494
If I pass allowClear={true} to an AntD Input component, a small circle with an × appears at the end of the field once a user has typed something, which can be clicked to empty the contents of the field.
Is there some way to instruct AntD to use a different icon?
The AntD docs for reference: Input with Clear Icon
For current version 3.19.8 you can't.
The closest clean solution will be using Input.Group with revealing clear button on typing.
<Input.Group compact>
<Input
style={{ width: "80%" }}
onChange={e => setValue(e.target.value)}
value={value}
/>
{value && <Button onClick={reset} type="danger" icon="delete" />}
</Input.Group>;
Note: Should add animation on button reveal.
Yes, you can by passing prop to allowClear:
<Input
allowClear={{ clearIcon: <CloseOutlined /> }}
/>
I added the React.js context cause of the NavLink reference (from React Router) in the button I am trying to use. Either way, when I want to submit data with:
submitData(event) {
event.preventDefault();
alert("Submitted");
}
This will work:
<FormGroup>
<input type="submit" />
</FormGroup>
But this will not:
<FormGroup>
<Button type="submit" id="submitButton" color="primary"><NavLink to="/Confirm">Submit</NavLink></Button>
</FormGroup>
Not sure why the second won't work, but it is my preferred method. Any ideas or thoughts as to why? I know <button> is newer, but adding type="input" should force it ton work all the same.
The NavLink component is already listening to it's own submit/click event, which isn't propagating to your own form's onSubmit.
The easy solution would simply to bind the NavLink's onClick to your own handler:
<FormGroup>
<Button type="submit" id="submitButton" color="primary">
<NavLink to="/Confirm" onClick={this.submitData.bind(this)}>Submit</NavLink>
</Button>
</FormGroup>