Topic: Form validation for hidden type

ppotter10 free asked 4 years ago


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>
</>
);
}

Jakub Chmura staff answered 4 years ago


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 free commented 4 years ago

Yes, this worked. Thanks!


Jakub Chmura staff commented 4 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


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: 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