web-dev-qa-db-fra.com

"Contrôle de formulaire non valide" uniquement dans Google Chrome

Le code ci-dessous fonctionne bien dans Safari, mais dans Chrome et Firefox, le formulaire ne sera pas envoyé. La console Chrome enregistre l'erreur An invalid form control with name='' is not focusable. Des idées?

Notez que bien que les contrôles ci-dessous ne portent pas de noms, ils doivent avoir des noms au moment de la soumission, renseignés par le Javascript ci-dessous. Le formulaire fonctionne dans Safari.

<form method="POST" action="/add/bundle"> 
<p> 
    <input type="text" name="singular" placeholder="Singular Name" required> 
    <input type="text" name="plural" placeholder="Plural Name" required> 
</p> 
<h4>Asset Fields</h4> 
<div class="template-view" id="template_row" style="display:none"> 
    <input type="text" data-keyname="name" placeholder="Field Name" required> 
    <input type="text" data-keyname="hint" placeholder="Hint"> 
    <select data-keyname="fieldtype" required> 
        <option value="">Field Type...</option> 
        <option value="Email">Email</option> 
        <option value="Password">Password</option> 
        <option value="Text">Text</option> 
    </select>    
    <input type="checkbox" data-keyname="required" value="true"> Required
    <input type="checkbox" data-keyname="search" value="true"> Searchable
    <input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
    <input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
    <input type="radio" data-keyname="label" value="label" name="label"> Label
    <input type="radio" data-keyname="unique" value="unique" name="unique"> Unique
    <button class="add" type="button">+</button> 
    <button class="remove" type="button">-</button> 
</div> 

<div id="target_list"></div> 
    <p><input type="submit" name="form.submitted" value="Submit" autofocus></p> 
</form>

<script> 
function addDiv()
{
    var pCount = $('.template-view', '#target_list').length;
    var pClone = $('#template_row').clone();
    $('select, input, textarea', pClone).each(function(idx, el){
        $el = $(this);
        if ((el).type == 'radio'){
            $el.attr('value', pCount + '_' + $el.data('keyname'));
        }
        else {
            $el.attr('name', pCount + '_' + $el.data('keyname'));
        };
    });
    $('#target_list').append(pClone);
    pClone.show();
}

function removeDiv(elem){
    var pCount = $('.template-view', '#target_list').length;
    if (pCount != 1)
    {
        $(elem).closest('.template-view').remove();
    }
};

$('.add').live('click', function(){
    addDiv();
});

$('.remove').live('click', function(){
    removeDiv(this);
});

$(document).ready(addDiv);

</script>
htmlgoogle-chrome
100
MFB

Chrome souhaite se concentrer sur un contrôle requis, mais toujours vide, afin de pouvoir afficher le message "Veuillez remplir ce champ". Toutefois, si le contrôle est masqué au moment où Chrome souhaite faire apparaître le message, c'est-à-dire au moment de la soumission du formulaire, Chrome ne peut pas se concentrer sur le contrôle car il est masqué.

Donc, pour contourner le problème, lorsqu'un contrôle est masqué par javascript, nous devons également supprimer l'attribut "requis" de ce contrôle. 

234
MFB

Si la validation HTML5 ne vous intéresse pas (peut-être que vous validez dans JS ou sur le serveur), vous pouvez essayer d'ajouter "novalidate" au formulaire ou aux éléments d'entrée.

9
John Velonis

Il affichera ce message si vous avez un code comme celui-ci:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

la solution à ce problème dépendra du fonctionnement du site.

par exemple, si vous ne souhaitez pas que le formulaire soit envoyé sauf si ce champ est obligatoire, vous devez désactiver le bouton d'envoi. 

de sorte que le code js pour montrer le div devrait permettre au bouton de soumission ainsi

vous pouvez également masquer le bouton (doit être désactivé et masqué car s'il est masqué mais non désactivé, l'utilisateur peut soumettre le formulaire avec d'autres moyens, comme appuyer sur enter dans tout autre champ, mais si le bouton est désactivé, cela ne se produira pas.

si vous souhaitez que le formulaire soit envoyé si la div est masqué, vous devez désactiver toutes les entrées requises et l'activer pendant que vous affichez la div.

si quelqu'un a besoin des codes pour le faire, vous devriez me dire exactement ce dont vous avez besoin

9
Robert

essayez d'utiliser les balises appropriées pour les contrôles HTML5Comme pour Number (entiers)

<input type='number' min='0' pattern ='[0-9]*' step='1'/>

pour décimales ou float

 <input type='number' min='0' step='Any'/>

step = 'Any' Sans cela, vous ne pouvez pas soumettre votre formulaire en indiquant une valeur décimale ou flottante telle que 3.5 ou 4.6 dans le champ ci-dessus.

Essayez de corriger le modèle, tapez pour les contrôles HTML5 pour résoudre ce problème.

5
sudhAnsu63

J'avais cette erreur et j'ai déterminé que c'était en fait sur un champ qui n'était pas caché.

Dans ce cas, c’était un champ type="number" qui était requis. Lorsqu'aucune valeur n'a jamais été entrée dans ce champ, le message d'erreur s'affiche dans la console et le formulaire n'est pas soumis. Entrer une valeur, puis la supprimer signifie que l'erreur de validation est affichée comme prévu.

Je pense qu'il s'agit d'un bogue dans Chrome: ma solution de contournement consistait à définir une valeur initiale/par défaut.

2
Matthew Schinckel

Aucune validation ne fera le travail.

<form action="whatever" method="post" novalidate>
1
Hassi

J'ai eu l'erreur:

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

Cela se passait parce que je n'utilisais pas correctement le champ requis, ce qui activait et désactivait lorsque je cliquais sur un checkbok. La solution consistait à supprimer l'attribut required lorsque le checkbok n'était pas marqué et à le marquer comme requis lorsque la case à cocher était cochée.

var telefono = document.getElementById("telefono");  
telefono.removeAttribute("required");
1
frddy

cette erreur obtient si ajouter un format décimal . Je viens d'ajouter

step="0.1"
0
Роман Зыков

Je dois faire quelque chose comme ceci pour corriger le bogue, car j'ai un type="number" avec min="0.00000001":

HTML:

<input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" />

JS:

$('input[type="submit"]').click(function(e) {
    //prevent chrome bug
    $("input:hidden").val(null);
});

Si je ne règle pas tous les champs de saisie masqués sur null, chrome tentera toujours de valider l'entrée.

0
Daniel H

J'avais ce problème quand j'avais class = "hidden" dans les champs de saisie parce que j'utilisais des boutons au lieu de puces radio - et que je changeais l'état "actif" via JS ..

J'ai simplement ajouté une partie supplémentaire du champ d'entrée radio du même groupe où je voulais que le message apparaisse:

<input type="radio" id="thenorm" name="ppoption" value=""  required style="opacity:0"/>

les 2 autres puces actives sont invisibles, celle-ci n'est pas et cela déclenche le message de validation et pas d'erreur de console - peu d'un bidouillage, mais ce qui n'est pas ces jours-ci ..

0
Fstarocka Burns

J'ai reçu ce message d'erreur lorsque j'ai entré un nombre (999999) en dehors de la plage que j'avais définie pour le formulaire.

<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">
0
Thomas David Kehoe