web-dev-qa-db-fra.com

Contourner l'attribut HTML "requis" lors de la soumission

J'utilise required pour un premier contrôle avant de soumettre un formulaire.

<form action="myform.php">
  Foo: <input type="text" name="someField" required="required">
  <input type="submit" value="submit">
  <input type="submit" value="ignore">
</form>

Le problème est que j'ai un bouton "ignorer", qui soumet également le formulaire et la logique principale définit ensuite un état correct dans une base de données. Dans ce cas (ignorer) la validation n'est pas souhaitée (car il n'est pas nécessaire de remplir le champ "Foo").

Quelle est la meilleure façon de gérer les 2 scénarios?

  1. Je suis conscient que je pourrais abandonner "requis" et faire la validation ailleurs (backend/JavaScript). Je cherche un moyen de garder le "nécessaire".
  2. Je pourrais utiliser certains Js onclick pour le scénario de bouton Ignorer et supprimer l'attribut juste avant d'envoyer le formulaire ( https://stackoverflow.com/a/13951500/356726 ).

Mais en fait je cherche quelque chose de plus intelligent ...

--- Éditer ---

Oui, doublon de Attribut obligatoire HTML5

javascriptjqueryhtmlform-submitrequiredfieldvalidator
26
Horst Walter

Aucun JavaScript, aucun deuxième formulaire nécessaire, et la validation peut rester:

Pour exactement ce cas d'utilisation, la spécification HTML5 a conçu formnovalidate attribut pour les éléments de soumission (comme <input type=submit> ), comme l'un des attributs pour la soumission du formulaire :

L'attribut formnovalidate peut être utilisé pour créer des boutons de soumission qui ne déclenchent pas la validation de la contrainte.

Donc, mettez simplement

<form action="myform.php">
  Foo: <input type="text" name="someField" required>
  <input type="submit" value="submit">
  <input type="submit" value="ignore" formnovalidate>
</form>
69
Bergi

Votre # 2 est une approche courante. Quelque chose comme:

$('input[value="ignore"]').click(function() {
    $(this).siblings('input[type="text"]').removeAttr('required');
});

Pourrait devoir utiliser mousedown pour battre soumettre.

4
isherwood

Si vous ne voulez pas utiliser Javascript, vous pouvez en faire des formulaires séparés et avoir toutes les entrées définies comme masquées pour le formulaire ignore.

Ce n'est pas la meilleure option, mais c'est une alternative.

1
Matt Kenefick

Vous devez utiliser l'approche n ° 1 pour les raisons suivantes: Les principales raisons d'utiliser required au lieu de la validation JavaScript sont qu'elles sont plus simples et fonctionnent même lorsque JavaScript est désactivé. Ici, la simplicité ne s'applique pas, car l'utilisation de required rend les choses plus difficiles. Et cette dernière raison ne s'applique pas non plus: avec JavaScript désactivé et le navigateur prenant en charge required, le bouton "ignorer" ne fonctionne que si certaines données sont entrées dans le champ de texte.

Une autre alternative est celle mentionnée dans la réponse de @ MattKenefick. Il pourrait même en résulter une structure et une logique plus simples. Si le formulaire est vraiment aussi simple que dans l'exemple, il est simple de le diviser en deux formulaires:

<form action="myform.php">
  Foo: <input type="text" name="someField" required="required">
  <input type="submit" value="submit">
</form>
<form action="myform.php">
  <input type="submit" value="ignore">
</form>
1
Jukka K. Korpela