Bonjour,
j'ai un problème avec foundation 5, quand je fais un formulaire d'inscription (ou autre), je lui dis d'afficher un message d'erreur (en js je penses) quand l'utilisateur rempli mal un formulaire mais le problème, c'est que le formulaire ne marche pas quand je le rempli bien et que quand je fais une faute, il me marque des erreurs partout.
Mon code :
<!DOCTYPE html>
<html class="no-js" lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php echo $config'title']; ?></title>
<meta name="keywords" content="<?php echo $config'keywords'] ?>">
<meta name="description" content="<?php echo $config'description']; ?>">
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="large-8 large-push-4 columns">
<div class="panel">
<h1>Lorem ipsum dolor sit amet, consectetur.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, obcaecati, ut doloribus accusamus officiis esse soluta illo corporis sed rem eveniet amet ipsa. Soluta ipsam nisi tenetur praesentium mollitia commodi.</p>
</div>
</div>
<div class="large-4 large-pull-8 columns">
<div class="panel">
<form action="#" methode="post" data-abide>
<div class="password-field">
<label>Mot de passe <small>requis</small>
<input type="password" id="password" required pattern="[A-Z][a-z][0-9]+">
</label>
<small class="error">Votre mot de passe n'est pas valide</small>
</div>
<div class="password-confirmation-field">
<label>Confirmé votre mot de passe <small>requis</small>
<input type="password" required pattern="[A-Za-z0-9]+" data-equalto="password">
</label>
<small class="error">Vos mots de passe ne correspondent pas</small>
</div>
<button type="submit">S'inscrire</button>
</form>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.abide.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>Au passage, j'utilise la documentation du site officiel.
Merci d'avance et bonne journée
1 réponse
Excusez-moi, pour ceux qui aurais le même problème que moi :
il faut remplacer
<input type="password" id="password" required pattern="[A-Z][a-z][0-9]+">par
<input type="password" id="password" required pattern="[A-Za-z0-9]+">et entourer chaque input et son erreur par une div