"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 soumis. La console Chrome enregistre l'erreurAn invalid form control with name='' is not focusable . Des idées?

Notez que bien que les contrôles ci-dessous n'aient pas de noms, ils devraient 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>

Chrome souhaite se concentrer sur un contrôle requis mais toujours vide afin de pouvoir afficher le message «Veuillez remplir ce champ». Cependant, si le contrôle est masqué au moment où Chrome souhaite afficher 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é, le formulaire ne sera donc pas soumis.

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

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 soumis à moins que ce champ ne soit obligatoire, vous devez désactiver le bouton d'envoi

donc le code js pour afficher le div doit également activer le bouton d'envoi

vous pouvez également masquer le bouton (devrait être désactivé et masqué car s'il est masqué mais pas désactivé, l'utilisateur peut soumettre le formulaire avec d'autres moyens comme appuyez sur enterdans n'importe quel autre champ, mais si le bouton est désactivé, cela ne se produira pas

si vous voulez que le formulaire soit soumis si le div est masqué, vous devez désactiver toute entrée requise à l'intérieur et activer les entrées pendant que vous affichez le div

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

Si vous ne vous souciez pas de la validation HTML5 (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.

essayez d'utiliser les balises appropriées pour les contrôles HTML5 Comme 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 saisissant 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.

J'obtenais cette erreur et j'ai déterminé qu'il s'agissait en fait d'un champ qui n'était pas masqué.

Dans ce cas, c'était un type="number"champ, qui est obligatoire. Lorsqu'aucune valeur n'a jamais été saisie 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 que c'est un bogue dans Chrome: ma solution de contournement pour l'instant était de proposer une valeur initiale / par défaut.

J'ai eu l'erreur:

Un contrôle de formulaire non valide avec le nom = 'telefono' n'est pas focalisable.

Cela se produisait parce que je n'utilisais pas correctement le champ requis, ce qui était activé et désactivé en cliquant sur un checkbok. La solution était de supprimer l' requiredattribut chaque fois que le checkbok n'était pas marqué et de le marquer comme requis lorsque la case était cochée.

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

Je dois faire quelque chose comme ça pour corriger le bogue, car j'en ai 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 nullchrome, j'essaierai toujours de valider l'entrée.

Aucune validation ne fera le travail.

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

J'ai eu ce problème lorsque 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é un champ d'entrée radio supplémentaire faisant partie du même groupe où je voulais que le msg apparaisse:

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

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

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

step="0.1"

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

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

$("...").attr("required"); and $("...").removeAttr("required"); 

n'a pas fonctionné pour moi jusqu'à ce que j'aie mis tout mon code jQuery entre cela:

$(document).ready(function() {
    //jQuery code goes here
});

remplacer requiredpar requis = "requis"