Checkbox required does not pass validation

  • Resolved sten360

    (@sten360)


    3 years, 11 months ago

    Hi. I’m encountering an issue with form validation. Namely, I have the following checkbox code:

    <div class="checkbox checkbox--terms">
    <input type="checkbox" id="demo-form-terms" class="checkbox__input" required>
    <div class="checkbox__label">
      	I hereby agree with the processing of my personal data on the purposes, with <a href="#" target="_blank" rel="noopener">Terms and Conditions</a> and <a href="#" target="_blank" rel="noopener">Privacy Policy</a>
    </div>
</div>

    However, the checkbox doesn’t pass validation when it’s checked. I always get the following error from the form:
    Please fill in all the required fields.
    If I make the checkbox not required, the form submits just fine. Obviously, it being a terms checkbox, I need it to be required though. Any possible solution for this?

    Thanks in advance.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hey @sten360,

    Can you please share a link where we can test the form?

    Also, from the backend of the form, can you please share the complete form code?

    Thread Starter sten360

    (@sten360)

    Hi. The website is unfortunately in a closed development environment and I cannot share it. I can however share the form code.

    <h2 class="form__title h3">
  	Contact us
</h2>

<div class="text-field">
  	<label for="contact-form-name">Full name</label>
	<input type="text" id="contact-form-name" name="FULL_NAME" placeholder="Full name" required />
</div>

<div class="text-field">
  	<label for="contact-form-email">E-mail</label>
	<input type="email" id="contact-form-email" name="EMAIL" placeholder="[email protected]" required />
</div>

<div class="text-field">
  	<label for="contact-form-company">Company</label>
	<input type="text" id="contact-form-company" name="COMPANY" placeholder="Company inc." required />
</div>

<div class="text-field">
  <label for="contact-form-message">Message</label>
  <textarea placeholder="How can we help you?" id="contact-form-message" name="MESSAGE" required></textarea>
</div>

<div class="checkbox checkbox--terms">
    <input type="checkbox" id="contact-form-terms" class="checkbox__input" required>
    <div class="checkbox__label">
      	I hereby agree with the processing of my personal data on the purposes, with <a href="#" target="_blank" rel="noopener">Terms and Conditions</a> and <a href="#" target="_blank" rel="noopener">Privacy Policy</a>
    </div>
</div>

<div class="form__options">
  	<input type="submit" value="Submit" class="button button--size-lg button--size-fullwidth" />
</div>
    • This reply was modified 3 years, 11 months ago by sten360.
    • This reply was modified 3 years, 11 months ago by sten360.
    • This reply was modified 3 years, 11 months ago by sten360.

    Maybe you can let us test it on your site by sending us a link / access code by email?

    support at htmlformsplugin.com

    Hi, I’m having the same issue, is there a solution available?

    Where can I test the form @jani20 ?

    Thanks for letting me know.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Checkbox required does not pass validation’ is closed to new replies.