Menu icon Foundation
Foundation 6 Abide: Normal HTML5 Error Callouts?

Just jumping into using Foundation 6 abide for form validation, and one extremely frustrating element I'm encountering right now is that a) fields no longer validate on blur if there's nothing written in them, and b) if I click 'submit' on a form with several required fields but nothing filled out, I don't get the Foundation error fields popping out of display:none - instead, I get the ugly, default HTML5 error callout on the first required field, and nothing else. Surely this can't be right? Am I missing something?

<form class="submit-form" action="" method="post" data-abide>
									<label>
										<div class="row">
											<div class="medium-2 columns structure-column">
												<span class="label pull-right">Name</span>
											</div>
											
											<div class="medium-10 columns structure-column">
												<input type="text" name="name" value="<?php echo $_POST['name']; ?>" required pattern="alpha_numeric">
												<small class="form-error">You must enter your name.</small>
											</div>
										</div>
									</label>

									<label>
										<div class="row">
											<div class="medium-2 columns structure-column">
												<span class="label pull-right">Email</span>
											</div>
											
											<div class="medium-10 columns structure-column">
												<input type="email" name="email" value="<?php echo $_POST['email']; ?>" required pattern="email">
												<small class="form-error">You must enter a valid email.</small>
											</div>
										</div>
									</label>

									<label>
										<div class="row">
											<div class="medium-2 columns structure-column">
												<span class="label pull-right">Note</span>
											</div>
											
											<div class="medium-10 columns structure-column">
												<textarea name="note" rows="6" required pattern="alpha_numeric"><?php echo $_POST['note']; ?></textarea>
												<small class="form-error">You must enter your note.</small>
											</div>
										</div>
									</label>

									<button class="form-submit pull-right" type="submit">Send</button>
								</form>

abidefoundation 6sites

Just jumping into using Foundation 6 abide for form validation, and one extremely frustrating element I'm encountering right now is that a) fields no longer validate on blur if there's nothing written in them, and b) if I click 'submit' on a form with several required fields but nothing filled out, I don't get the Foundation error fields popping out of display:none - instead, I get the ugly, default HTML5 error callout on the first required field, and nothing else. Surely this can't be right? Am I missing something?

<form class="submit-form" action="" method="post" data-abide>
									<label>
										<div class="row">
											<div class="medium-2 columns structure-column">
												<span class="label pull-right">Name</span>
											</div>
											
											<div class="medium-10 columns structure-column">
												<input type="text" name="name" value="<?php echo $_POST['name']; ?>" required pattern="alpha_numeric">
												<small class="form-error">You must enter your name.</small>
											</div>
										</div>
									</label>

									<label>
										<div class="row">
											<div class="medium-2 columns structure-column">
												<span class="label pull-right">Email</span>
											</div>
											
											<div class="medium-10 columns structure-column">
												<input type="email" name="email" value="<?php echo $_POST['email']; ?>" required pattern="email">
												<small class="form-error">You must enter a valid email.</small>
											</div>
										</div>
									</label>

									<label>
										<div class="row">
											<div class="medium-2 columns structure-column">
												<span class="label pull-right">Note</span>
											</div>
											
											<div class="medium-10 columns structure-column">
												<textarea name="note" rows="6" required pattern="alpha_numeric"><?php echo $_POST['note']; ?></textarea>
												<small class="form-error">You must enter your note.</small>
											</div>
										</div>
									</label>

									<button class="form-submit pull-right" type="submit">Send</button>
								</form>
Christian Griffin almost 3 years ago

Bump?

Sander Blue almost 3 years ago

If this is still an issue for you, try adding the novalidate attribute to the form tag. The novalidate attribute remove default HTML5 validation.