I need assistance with integrating a checkbox into my basic contact form. I want the validation to ensure that the checkbox is checked before allowing the form to be submitted. Any help on this matter would be greatly appreciated.
FORM:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqBootstrapValidation/1.3.7/jqBootstrapValidation.min.js" ></script>
<form id="contactForm" name="sentMessage" novalidate="">
<div class="control-group form-group">
<div class="controls"><label>Name:</label> <input id="name" class="form-control" required="" type="text" data-validation-required-message="Please enter your name." />
<p class="help-block"> </p>
</div>
</div>
<div class="control-group form-group">
<div class="controls"><label>Phone Number:</label> <input id="phone" class="form-control" required="" type="tel" data-validation-required-message="Please enter a phone number." />
<div class="help-block"> </div>
</div>
</div>
<div class="control-group form-group">
<div class="controls"><label>Email:</label> <input id="email" class="form-control" required="" type="email" data-validation-required-message="Please enter an email address." />
<div class="help-block"> </div>
</div>
</div>
<div class="control-group form-group">
<div class="controls"><label>Message:</label> <textarea id="message" class="form-control" style="resize: none;" cols="100" maxlength="999" required="" rows="10" data-validation-required-message="Write a message"></textarea>
<div class="help-block"> </div>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<input class="form-check-input" type="checkbox" value="1" id="privacy" required="" data-validation-required-message="Check this box to proceed" />
<label class="form-check-label" for="privacy">
Agree to terms and conditions
</label>
<div class="help-block"> </div>
</div>
</div>
<div id="success"> </div>
<!-- For success/fail messages --> <button id="sendMessageButton" class="btn btn-success" type="submit">Send Message</button></form>
contact_me.js:
contact_me.php:
The form functions correctly, but when attempting to validate if a checkbox is selected, the validation process fails. Despite various trials, I have yet to find a suitable solution.