Attribut obligatoire HTML5

Question

Attribut obligatoire HTML5

Demandé el 9 de Juin, 2010: Quand la question a-t-elle été
77447 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Dans mon application Web, j'utilise une validation personnalisée pour les champs de mon formulaire. Dans le même formulaire, j'ai deux boutons : l'un pour soumettre le formulaire et l'autre pour l'annuler ou le réinitialiser.

J'utilise principalement Safari comme navigateur par défaut. Maintenant que Safari 5 est sorti, mon bouton d'annulation/réinitialisation ne fonctionne plus. Chaque fois que j'ai appuyé sur le bouton de réinitialisation, le premier champ de mon formulaire a reçu le focus. Cependant, ce comportement est le même que celui de la validation de mon formulaire personnalisé. Lorsque j'ai essayé avec un autre navigateur, tout a bien fonctionné. Il devait s'agir d'un problème lié à Safari 5.

J'ai modifié un peu mon code Javascript et j'ai découvert que la ligne suivante causait le problème :

document.getElementById("somefield").required = true;

Pour être sûr que c'était vraiment le problème, j'ai créé un scénario de test :

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>

<body>
    <form id="someform">
        <label>Name:</label>&nbsp;<input type="text" id="name" required="true" /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required="true" /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>

Ce que je m'attendais à voir arriver est arrivé. Le premier champ "nom" a obtenu le focus automatiquement.

Quelqu'un d'autre est tombé sur ce problème ?

Demandé el 9 de Juin, 2010 par Joop

2 votes

Maintenant, il n'est pas nécessaire de définir l'attribut requis à true. Par exemple : <input type="text" id="name" required="true" /> et <input type="text" id="name" required /> c'est la même chose.

Commenté el 3 de Mars, 2014 par R.S.K

0 votes

C'est vrai, c'est une mauvaise habitude de ma part, quand j'avais l'habitude de coder en XHTML... Mais est-ce que tous les navigateurs modernes supportent cette balise sans ="required" ? Je crois que Safari ne le fait pas...

Commenté el 29 de Septembre, 2014 par Loic Cara

0 votes

Quel est le comportement réel et attendu ?

Commenté el 2 de Juin, 2016 par Ciro Santilli

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

255voto

Ms2ger Points 7551

Notez que

<input type="text" id="car" required="true" />

est erronée, elle devrait être l'une des

<input type="text" id="car" required />
<input type="text" id="car" required="" />
<input type="text" id="car" required='' />
<input type="text" id="car" required=required />
<input type="text" id="car" required="required" />
<input type="text" id="car" required='required' />

Cela s'explique par le fait que le true suggère que la false rendra le contrôle de formulaire facultatif, ce qui n'est pas le cas.

Répondu el 10 de Juin, 2010 par Ms2ger (7551 Points )

7 votes

Cette réponse est vraie, mais je pense que ce n'est pas le problème que nous avons ici.

Commenté el 16 de Août, 2012 par PhoneixS

0 votes

Cette solution est-elle sûre ? ... Je veux dire que je devrais l'utiliser ou m'en tenir à la validation javascript ? par sûr je veux dire, est-ce que cette solution produit des anomalies sur différents navigateurs/appareils...

Commenté el 19 de Mars, 2013 par kebyang

8 votes

Je tiens à souligner que le code original n'est pas "faux", il implique simplement que vous pourriez utiliser false afin de rendre un champ facultatif (non obligatoire) - ce qui n'est pas le cas. Ce qu'il faut comprendre, c'est que la présence de la balise required rend le champ obligatoire. La seule façon de rendre le champ facultatif est de supprimer l'attribut. Et la VALIDATION côté serveur est tout ce qui compte vraiment (désolé de crier).

Commenté el 18 de Juillet, 2013 par Ryan Wheale

Afficher 4 autres commentaires

Answer 3

48voto

Darrik Spaude Points 284

Je viens de rencontrer ce problème avec Safari 5 et c'est un problème avec Opera 10 depuis un certain temps, mais je n'ai jamais pris le temps de le résoudre. Maintenant, j'ai besoin de le résoudre et j'ai vu votre post mais pas encore de solution sur la façon d'annuler le formulaire. Après de nombreuses recherches, j'ai enfin trouvé quelque chose :

http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate

<input type=submit formnovalidate name=cancel value="Cancel">

Fonctionne sur Safari 5 et Opera 10.

Répondu el 14 de Juin, 2010 par Darrik Spaude (284 Points )

8 votes

Vous pouvez également utiliser novalidate sur la balise du formulaire pour faire cela pour l'ensemble du formulaire.

Commenté el 9 de Juin, 2011 par Michael Mior

0 votes

J'ai créé une petite extension Chrome qui ajoute cet attribut à tous les formulaires de l'onglet en cours, merci pour l'astuce ! chrome.google.fr/webstore/detail/html5-form-validation-rem/

Commenté el 10 de Avril, 2013 par Damien

0 votes

C'était important pour mon affaire, formnovalidate fonctionne également avec le type de bouton submit : <button type="submit" formnovalidate>Submit</button> .

Commenté el 16 de Août, 2018 par Mayeenul Islam

Answer 4

19voto

David Foster Points 2849

Si je comprends bien votre question, est-ce que c'est le fait que les required semble avoir un comportement par défaut dans Safari qui vous perturbe ? Si c'est le cas, consultez : http://w3c.github.io/html/sec-forms.html#the-required-attribute

required n'est pas un attribut personnalisé dans HTML 5. Il est défini dans la spécification et est utilisé précisément de la manière dont vous l'utilisez actuellement.

EDITAR : Eh bien, pas précisément . Comme l'a souligné ms2ger, le required est un attribut attribut booléen et voici ce que la spécification HTML 5 dit à ce sujet :

Remarque : les valeurs "true" et "false" ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, l'attribut doit être complètement omis.

Voir : http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes

Répondu el 9 de Juin, 2010 par David Foster (2849 Points )

2 votes

Et c'est pourquoi nous ne devrions pas créer des attributs ou des propriétés personnalisés sur des objets standard.

Commenté el 10 de Juin, 2010 par Quentin

0 votes

Avez-vous une idée de la façon de désactiver cette fonction pour Chrome et Safari pour cette page particulière ?

Commenté el 16 de Juin, 2010 par Restuta

0 votes

@Restuta allez à about:flags pour désactiver ceci dans Chrome. Dans Firefox, je ne suis pas sûr.

Commenté el 20 de Octobre, 2011 par therealklanni

Answer 5

8voto

Evalds Urtans Points 591

Safari 7.0.5 ne prend toujours pas en charge la notification de la validation des champs de saisie.

Pour y remédier, il est possible d'écrire un script de repli comme ceci : http://codepen.io/ashblue/pen/KyvmA

Pour savoir quelles fonctionnalités HTML5 / CSS3 sont prises en charge par les navigateurs, vérifiez : http://caniuse.com/form-validation

function hasHtml5Validation () {
  //Check if validation supported && not safari
  return (typeof document.createElement('input').checkValidity === 'function') && 
    !(navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0);
}

$('form').submit(function(){
    if(!hasHtml5Validation())
    {
        var isValid = true;
        var $inputs = $(this).find('[required]');
        $inputs.each(function(){
            var $input = $(this);
            $input.removeClass('invalid');
            if(!$.trim($input.val()).length)
            {
                isValid = false;
                $input.addClass('invalid');                 
            }
        });
        if(!isValid)
        {
            return false;
        }
    }
});

SASS / LESS :

input, select, textarea {
    @include appearance(none);
    border-radius: 0px;

    &.invalid {
        border-color: red !important;
    }
}

Répondu el 29 de Juillet, 2014 par Evalds Urtans (591 Points )

0 votes

Merci. Cela m'a beaucoup aidé.

Commenté el 30 de Janvier, 2015 par theGreenCabbage

0 votes

C'est du simple CSS ou du Less ?

Commenté el 15 de Mars, 2015 par James A Mohler

0 votes

J'ai un iPod touch qui se déclenche toujours lorsque les entrées marquées comme nécessaires ne fonctionnent pas et j'ai trouvé cette FAQ. Cette réponse est la seule qui ait fonctionné pour moi. J'ai pensé que je devais la partager.

Commenté el 10 de Avril, 2016 par Fred -ii-

Answer 6

7voto

Ludder Points 549

Une petite note sur les attributs personnalisés : HTML5 autorise toutes sortes d'attributs personnalisés, pour autant qu'ils soient préfixés par la particule data- c'est-à-dire data-my-attribute="true" .

Répondu el 17 de Novembre, 2010 par Ludder (549 Points )

1 votes

Et ils fonctionnent bien dans les anciens navigateurs (sauf que vous aurez besoin de votre propre code pour accéder à leurs valeurs, plutôt que de la nouvelle API), ils constituent donc un meilleur choix que de créer vos propres attributs (car ils n'entreront pas en conflit avec les attributs officiels ajoutés à l'avenir).

Commenté el 9 de Juillet, 2011 par Paul D. Waite

1 votes

En fait, les attributs personnalisés peuvent littéralement être n'importe quoi. Ceux qui sont préfixés par "data-" apparaîtront dans la section element.dataset ainsi que d'autres avantages (par exemple, jQuery sera automatiquement capable de saisir la valeur de tout attribut personnalisé préfixé "data-" en utilisant l'objet .data() c'est-à-dire .data("myAttribute") = valeur de data-my-attribute ). L'utilisation d'attributs personnalisés plus courts peut parfois être utile pour créer des sélecteurs CSS3 personnalisés.

Commenté el 20 de Octobre, 2011 par therealklanni

Attribut obligatoire HTML5

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Attribut obligatoire HTML5

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: