Envoie via Ajax
Soumission de formulaire via une requête Ajax.
Pour voir cet example en action, vérifier l'onglet réseaux de la console du fureteur afin de voir la requête Ajax envoyé.
View code
<form action="wb-postback-fr.html" class="wb-postback" data-wb-postback='{"success":".success-message","failure":".failure-message"}'>
<div class="form-content">
<div class="form-group">
<label for="firstname1"><span class="field-name">Prénom</span></label>
<input class="form-control" id="firstname1" name="firstname" type="text" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="lastname1"><span class="field-name">Nom de famille</span></label>
<input class="form-control" id="lastname1" name="lastname" type="text" data-rule-minlength="2" />
</div>
<div class="form-group">
<label for="preferredNumber1"><span class="field-name">Numéro de téléphone</span></label>
<input class="form-control" id="preferredNumber1" name="preferredNumber" type="tel" data-rule-phoneUS="true" />
</div>
<div class="form-group">
<label for="email1"><span class="field-name">Addresse courriel</span> (test@domaine)</label>
<input class="form-control" id="email1" name="email" type="email" />
</div>
<button class="btn btn-primary">Soumettre</button>
</div>
</form>
<p class="success-message hide">Merci!</p>
<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>Variable de bouton de soumission
Soumission de formulaire via une requête Ajax utilisant une variable de bouton de soumission.
Pour voir cet example en action, vérifier l'onglet réseaux de la console du fureteur afin de voir la requête Ajax envoyé.
View code
<form action="wb-postback-fr.html" class="wb-postback" data-wb-postback='{"success":".success-message-2","failure":".failure-message-2"}'>
<div class="form-content">
<button class="btn btn-primary" name="submitBtn" value="submitBtnValue">Soumettre</button>
</div>
</form>
<p class="success-message-2 hide">Merci!</p>
<p class="failure-message-2 hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>Plugiciel validation de formulaires
Soumission de formulaire via une requête Ajax en utilisant le plugiciel validation de formulaires .
Pour voir cet example en action, vérifier l'onglet réseaux de la console du fureteur afin de voir la requête Ajax envoyé.
View code
Considérez ajouter un attribut aria-hidden="true" à <strong class="required"> (c.-à-d. <strong class="required" aria-hidden="true">) dans les libellés des champs obligatoires. Le code ajouté de façon statique préviendra les lecteurs d’écran d’annoncer « obligatoire » deux fois dans les versions sans script et HTML simplifiée de la page. Le plugiciel de validation de formulaires ajoute l’attribut automatiquement à la version JavaScript. N’utilisez pas l’attribut dans les éléments <legend> obligatoires.
<div class="wb-frmvld">
<form action="wb-postback-fr.html" class="wb-postback" data-wb-postback='{"success":".success-message-3","failure":".failure-message-3"}'>
<div class="form-content">
<div class="form-group">
<label for="firstname2" class="required"><span class="field-name">Prénom</span> <strong class="required">(obligatoire)</strong></label>
<input class="form-control" id="firstname2" name="firstname" type="text" data-rule-minlength="2" required="required" />
</div>
<div class="form-group">
<label for="lastname2" class="required"><span class="field-name">Nom de famille</span> <strong class="required">(obligatoire)</strong></label>
<input class="form-control" id="lastname2" name="lastname" type="text" data-rule-minlength="2" required="required" />
</div>
<div class="form-group">
<label for="preferredNumber2"><span class="field-name">Numéro de téléphone</span></label>
<input class="form-control" id="preferredNumber2" name="preferredNumber" type="tel" data-rule-phoneUS="true" />
</div>
<div class="form-group">
<label for="email2"><span class="field-name">Addresse courriel</span> (test@domaine)</label>
<input class="form-control" id="email2" name="email" type="email" />
</div>
<button class="btn btn-primary">Soumettre</button>
</div>
</form>
<p class="success-message-3 hide">Merci!</p>
<p class="failure-message-3 hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
</div>Plugiciel validation de formulaires
Soumission de formulaire via une requête Ajax en utilisant le plugiciel validation de formulaires avec une variable de bouton de soumission.
Pour voir cet example en action, vérifier l'onglet réseaux de la console du fureteur afin de voir la requête Ajax envoyé.
View code
Considérez ajouter un attribut aria-hidden="true" à <strong class="required"> (c.-à-d. <strong class="required" aria-hidden="true">) dans les libellés des champs obligatoires. Le code ajouté de façon statique préviendra les lecteurs d’écran d’annoncer « obligatoire » deux fois dans les versions sans script et HTML simplifiée de la page. Le plugiciel de validation de formulaires ajoute l’attribut automatiquement à la version JavaScript. N’utilisez pas l’attribut dans les éléments <legend> obligatoires.
<div class="wb-frmvld">
<form action="wb-postback-fr.html" class="wb-postback" data-wb-postback='{"success":".success-message-4","failure":".failure-message-4"}'>
<div class="form-content">
<div class="form-group">
<label for="firstname3" class="required"><span class="field-name">Prénom</span> <strong class="required">(obligatoire)</strong></label>
<input class="form-control" id="firstname3" name="firstname" type="text" data-rule-minlength="2" required="required" />
</div>
<button class="btn btn-primary" name="submitBtn" value="submitBtnValue">Soumettre</button>
</div>
</form>
<p class="success-message-4 hide">Merci!</p>
<p class="failure-message-4 hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
</div>- Date de modification :