web-dev-qa-db-fra.com

Un contrôle de formulaire non valide avec le nom = '' ne peut pas être mis au point. SANS AUCUN OBLIGE OR Entrées cachées

Je suis confronté à l'erreur "non-focusable-input" de Chrome, bien connue, mais ma situation est différente de celle expliquée dans l'autre message que j'ai pu trouver ici. 

J'ai ce message d'erreur dupliqué en premier sur une entrée bien pointue, cette entrée n'a pas d'attribut requis: Le code:

<fieldset>
    <label>Total (montaje incl.)</label>
    <input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>

L'erreur: Un contrôle de formulaire non valide avec name = 'priceFinal' ne peut pas être mis au point.

Pendant que l'utilisateur remplit le formulaire, ce champ obtient sa valeur par un script js avec jquery. L'utilisateur tape une taille dans une autre entrée, le script fait ses calculs avec la valeur de la taille, puis place le résultat dans l'entrée 'priceFinal' avec la fonction jquery: .val ()

Dans le navigateur, nous pouvons voir que la saisie est correctement remplie et qu'aucune erreur n'est affichée à ce moment-là. Et avec la solution 'novalidate', tout se passe bien, donc je ne peux pas être tenu responsable de l'erreur nofocusable.

Ensuite, j'ai eu la même erreur avec une entrée sans nom que je n'ai pas écrit et qui n'existe pas dans mon DOM:

Un contrôle de formulaire non valide avec le nom = '' ne peut pas être mis au point.

C'est étrange car la seule entrée sans nom dans mon formulaire est le type: submit one 

<input type="submit" class="btn btn-default" value="Ver presupuesto" />

J'ai quelques champs obligatoires, mais j'ai toujours vérifié qu'ils étaient tous remplis lorsque j'envoyais le formulaire. Je le colle juste au cas où cela pourrait aider:

<fieldset>
    <input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos"  class="cInput" required >
    <input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
    <input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>

<fieldset>
    <input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
    <input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required> 
</fieldset>

La solution novalidate efface l’erreur mais ne la résout pas, je veux dire qu’il doit y avoir un moyen de la résoudre sans piratage. 

Quelqu'un at-il une idée de ce qui pourrait se passer? Merci.

html5formsvalidationgoogle-chrome
13
nach

J'avais le même problème, et tout le monde accusait les pauvres entrées cachées, mais cela ressemble à un bogue dans lequel votre champ requis se trouve dans un jeu de champs . contribution.

Ce bogue est présent uniquement en chrome que j'ai testé dans la version 43.0.2357.124 m . Ne se produit pas dans Firefox.

Exemple (très simple).

<form>
  <fieldset name="mybug">
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

Un contrôle de formulaire non valide avec name='mybug' ne peut pas être mis au point.

Le bogue est difficile à détecter car généralement les champs ne portent pas de nom, donc name='' est un WTF! mais coupez morceau par morceau le formulaire jusqu'à ce que je trouve le culprid . Si vous obtenez votre entrée requise de la champs, l'erreur est partie.

<form>
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>

  <fieldset name="mybug">
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

Je le signalerais mais je ne sais pas où est la communauté Chrome pour les bugs.

18
Neto Yo

Grâce à cet article, j'ai constaté que mon problème résidait également dans le fait que Chrome essayait de se concentrer sur mes champs, au lieu du champ de saisie.

Pour obtenir une meilleure réponse de la console:

  • Attribuer un nouveau nom à chaque élément DOM
  • Définissez chaque entrée et sélectionnez style.display sur 'bloquer'

  • Changement du type d'éléments d'entrée [type = "hidden"] en 'text'

    function cleanInputs(){
    var inputs  = document.getElementsByTagName( 'input' ),
        selects = document.getElementsByTagName( 'select' ),
        all     = document.getElementsByTagName( '*' );
    for( var i=0, x=all.length; i<x; i++ ){
        all[i].setAttribute( 'name', i + '_test' );
    }
    for( var i=0, x=selects.length; i<x; i++ ){
        selects[i].style.display = 'block';
    }
    for( var i=0, x=inputs.length; i<x; i++ ){
        if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
            inputs[i].setAttribute( 'type', 'text' );
        }
        inputs[i].style.display = 'block';
    }
    return true;
}

Dans la console, j'ai exécuté cleanInputs () puis soumis le formulaire . Le résultat, à partir de la console, était le suivant:

Un contrôle de formulaire non valide dont le nom est = '28_test' ne peut pas être mis au point.

Un contrôle de formulaire non valide dont le nom est = '103_test' ne peut pas être mis au point.

Ensuite, en passant à la vue "Éléments" du développeur Web, j'ai pu trouver "28_test" et "103_test" (les deux champs), confirmant que mon problème était un champ de saisie obligatoire, imbriqué dans un jeu de champs.

5
Doug

J'ai eu le même problème alors j'ai supprimé required = "required" des champs problématiques.

1
iltaf khalid

Si vous obtenez l'erreur lorsque la fonction jQuery est exécutée, essayez de mettre "return false" sur votre fonction ou function (e) {e.preventDefault (); ...}

1
acarayol

j'ai eu ce problème une fois. pour le réparer, ajoutez 

novalidate

en tant qu'attribut à la forme. par exemple

<form action="" novalidate>
....
</form>
1
Canaan Etai

En écrivant la question, j'ai réalisé une chose: la valeur que le script mettait dans le champ 'priceFinal' était parfois un nombre décimal. 

Dans ce cas, la solution consistait à écrire l'attribut step pour cette entrée:

... step="any" ...

Pas sur w3s

Ce bogue 'nofocusable' n'est donc pas seulement un problème de champs obligatoires et cachés, il est également généré par des conflits de format. 

0
nach

Nach m'a donné le meilleur pointeur ... (y) J'ai aussi eu un type d'entrée = "nombre" avec step = "0.1" et la console m'a montré cette erreur lors de la validation: Un contrôle de formulaire non valide avec nom = '' n'est pas actif .

supprimer le step = "0.1" sur l'élément et maintenant le formulaire peut être validé

0
Sjoerd

Voici la solution ....

<form>
  <input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>

Beaucoup de gens ne se rendent pas compte que le passage de false à ng-required désactive la directive.

0
Mohammad Amir