prevent bootstrap submit button emptying form if error encounterred

Question

I am using bootstrap and reactJS and want to build a form.

Consider the following snippet:

const CustomForm = () => {
    const [alertText, setAlertText] = ('')
    const [username, setUsername] = ('');

    const handle_submit = () => {
        //treat some possible error
        setAlertText('some warnings...')
    }

    return (
        <Form>
            {alertText && <Alert className='mb-3' variant="warning" >
                {alertText}
            </Alert>}
            <FormGroup className="mb-3">
                <FloatingLabel label='username'>
                    <Form.Control type='text' name='username' placeholder='username' onChange={e => setUsername(e.target.value)} value={username} />
                </FloatingLabel>
            </FormGroup>   
            <Button className='float-end' type='submit' variant='outline-primary' onClick={handle_submit} >Submit</Button>
        </Form>
    )
}

the problem with that snippet is that when the button is declared as submit , it auto reloads the page and empties the form, or I would like to handle some error before and do all that stuff only if the are no errors.

If I declare the type as button , it works well, but I am a little bit confused. I would like to use the submit attribute; I think it is more appropriate.

So my first question is, I am right to think that? and the second is, what do I need to change empty the form only if there are no errors?

Answer 1

Add the onSubmit prop to Form :

<Form onSubmit={handle_submit}>

and in the handle_submit function add the event ( e ) argument and call the function preventDefault (prevents refresh):

 const handle_submit = (e) => {
        // Prevent refresh
        e.preventDefault();

        //treat some possible error
        setAlertText('some warnings...')
}

Answer 2

Short answer:

type='button' is more appropriate in your case.

Long Answer:

As per MDN Documentation , a button will have by default a type of submit . If the type is submit , once clicked, it will submit the request to the server. If the form the submit button is a part of has action property defined, the POST request will be sent to that uri, otherwise it will be sent to the current uri. In your case it will trigger a page redirect to the same page, and that is the reason why your form is reset.

Since you have an event listener attached to the button, and you want to process the event client-side to later sent XHR(AJAX) request, you don't want the button to trigger the request to server. Thus you can safely set it to type='button' .

If for some reason you still need to keep type='submit' , you can stop the submit to further propagate in your onClick event handler using:

e.stopPropagation();