Topic: Form validation for hidden type
Expected behavior To show the invalid feedback text for a hidden type input
Actual behavior Nothing happens.
Resources (screenshots, code snippets etc.)
export default function Form(props) {
function submit(e)
{
e.preventDefault();
e.target.className += " was-validated";
}
return(
<>
<form className="needs-validation" onSubmit={e=> submit(e)} noValidate>
<input type="hidden" min="1" max="1" name="hiddenField" value="0"
id="defaultFormRegisterNameEx"
className="form-control"
required
/>
<div className="invalid-feedback">Please have valid value</div>
<MDBBtn type="submit">Submit</MDBBtn>
</form>
</>
);
}
HI @ppotter10,
Our validation with hidden input didn't work properly.
I have a workaround for that. Please use the input type number and add d-none class.
<form
className='needs-validation'
onSubmit={this.submitHandler}
noValidate
>
<MDBInput
type='number'
min='1'
max='1'
name='hiddenField'
value='0'
id='defaultFormRegisterNameEx'
className='d-none'
required
>
<div className='invalid-feedback'>Please have valid value</div>
</MDBInput>
<MDBBtn type='submit'>Submit</MDBBtn>
</form>
Let me know if it works in your case.
Best, Kuba
ppotter10 commented 5 years ago
Yes, this worked. Thanks!
Jakub Chmura staff premium commented 5 years ago
Your welcome. If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you. Best Regards, Kuba
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.24.0
- Device: any
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No