I'm new to HTML form validation and I'm currently trying to utilize browser defaults for this purpose. The form is designed to use a JQuery script to submit the data. Despite going through similar posts and updating my code, I am still facing issues. When I click on the Subscribe button without entering any information, no prompts are displayed.
HTML
<form class="form-inline" id="sub-form">
<div class="flex-fill mr-2">
<div class="mc-form-group-FNAME" style="display: inline">
<input type="name" class="form-control required" name="FNAME" id="mce-FNAME" value="" placeholder="First name" required />
</div>
<div class="mc-form-group-EMAIL" style="display: inline">
<input type="email" class="form-control required email" name="EMAIL" id="mce-EMAIL" value="" placeholder="Email address" required />
</div>
<button type="submit" class="btn btn-primary" id="subscribe-btn" onclick="submitForm()">Subscribe</button>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_8a28f24e93a8a23b993145f05_2d6480ea6a" tabindex="-1" value=""></div>
</form>
JQuery/JS
//Mail Chimp form submission
$('#sub-form').MailChimpForm({
url: 'https://-.us19.list-manage.com/subscribe/post?u=8a28f24e93a8a23b993145f05&id=2d6480ea6a',
fields: '0:FNAME,1:EMAIL',
submitSelector: '#subscribe-btn',
customMessages: {
E001: 'This field can not be empty',
E003: 'Please enter a valid email address',
},
onFail: (message) => {
if ((message.indexOf("already") >= 0) || (message.indexOf("recent")) >=0) {
alert('This email address is already subscribed. Stay tuned for our newsletter!')
}
},
onOk: function() {
$('#subscribe-ok').modal('show');
$('#sub-form').each(function() {
this.reset();
});
}
});
UPDATE
In further testing, it appears that when I remove the JQuery script, the HTML validation functions properly. However, upon reintroducing the script, the validation breaks. Any insights into why my JS might be interfering with HTML validation?