In the below screenshot, User have to Add Address but If they enter Space bar 4-5 time then this input type assume it a value & then addres submit button Proceed,
<div className={AddressBox} style={{ marginTop: "1rem" }}>
</div>
<button className="submit_Button" type="button" onClick={() => submit()}><span>Submit</span></button>
But If I apply .trim() inside value option i.e.. value={form.address_1.trim()} then I don't have any option to give space between the address.
Guide me in this.
On Submit Button, I put this below condition
if (!address.length) {
alert( 'Enter Your Address' );
return;
}
Requirement:- If I enter multiple space inside Input type="text" box then form is not submitted.

You can use trim on onBlur to remove sapce when click outside the input:
onChange={(e) => handleChange(e)}
value={form.address}
onBlur={(e) => handleChange({ target: { value: e.target.value.trim() } })}
I would create a flag to specify if the form can be submitted.
Something like (simplified version)
const canSubmitForm = form.address.trim() !== '';
and then on the button set the disable attribute accordingly
<button
className="submit_Button"
type="button"
onClick={() => submit()}
disabled={!canSubmitButton}
>
<span>Submit</span>
</button>
The test above is very simple, you should create a validation for the whole form