"Contrôle de formulaire invalide" seulement dans Google Chrome
le code ci-dessous fonctionne bien dans Safari mais dans Chrome et Firefox le formulaire ne sera pas soumis. Chrome console enregistre l'erreur An invalid form control with name='' is not focusable . Des idées?
notez que bien que les contrôles ci-dessous n'aient pas de nom, ils devraient avoir des noms au moment de la soumission, complétés par le Javascript ci-dessous. Le formulaire fonctionne en 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>
12 réponses
Chrome veut se concentrer sur un contrôle qui est nécessaire, mais encore vide, de sorte qu'il peut apparaître le message "Veuillez remplir le champ'. Cependant, si le contrôle est caché au point où Chrome veut 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 parce qu'il est caché, donc le formulaire ne sera pas soumis.
donc, pour contourner le problème, quand un contrôle est caché par javascript, nous devons également supprimer le "nécessaire" attribut de ce contrôle.
si vous ne vous souciez pas de la validation HTML5 (peut-être que vous validez en JS ou sur le serveur), vous pouvez essayer d'ajouter" novalidate " au formulaire ou aux éléments d'entrée.
il affichera ce message si vous avez le code suivant:
<form>
<div style="display: none;">
<input name="test" type="text" required/>
</div>
<input type="submit"/>
</form>
la solution à ce problème dépendra de la façon dont le site devrait fonctionner
par exemple, si vous ne voulez pas que le formulaire soit soumis à moins que ce champ ne soit requis, vous devez désactiver le bouton Soumettre
ainsi le code js pour montrer le div devrait activer le bouton Soumettre aussi bien
vous pouvez cacher le bouton aussi (devrait être désactivé et caché parce que si c'est caché mais pas désactivé l'utilisateur peut soumettre le formulaire avec d'autres de la manière comme appuyer sur enter dans tout autre domaine, mais si le bouton est désactivé ce ne sera pas le cas
si vous voulez que le formulaire soit soumis si le div est caché, vous devez désactiver toute entrée requise à l'intérieur et activer les entrées pendant que vous montrez le div
si quelqu'un a besoin des codes pour le faire, vous devez me dire exactement ce dont vous avez besoin""
essayez d'utiliser des étiquettes appropriées pour les commandes HTML5 Comme pour le nombre (entiers)
<input type='number' min='0' pattern ='[0-9]*' step='1'/>
pour décimales ou flottant
<input type='number' min='0' step='Any'/>
step='Any' sans cela, vous ne pouvez pas soumettre votre formulaire en entrant une valeur décimale ou flottante comme 3.5 ou 4.6 dans le champ ci-dessus.
essayez de fixer le modèle , tapez pour contrôles HTML5 pour corriger ce problème.
j'ai eu cette erreur, et j'ai déterminé qu'elle était en fait sur un champ qui n'était pas caché.
dans ce cas, c'était un champ type="number" , qui est requis. Si aucune valeur n'a jamais été saisie dans ce champ, le message d'erreur est affiché 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 crois que C'est un bug dans Chrome: ma solution pour le moment a été à venir avec une initiale/par défaut la valeur.
j'ai eu l'erreur:
un contrôle de forme invalide avec nom= "telefono" n'est pas focalisable.
cela se passait parce que je n'utilisais pas le champ requis correctement, ce qui a activé et désactivé en cliquant sur un crochet. La solution était de supprimer l'attribut required chaque fois que la case à cocher n'était pas marquée et de la marquer comme requis lorsque la case à cocher était marquée.
var telefono = document.getElementById("telefono");
telefono.removeAttribute("required");
j'ai eu ce problème quand j'ai eu class=" hidden "sur les champs d'entrée parce que j'utilisais des boutons au lieu de balles radio - et en changeant l'état" actif " via JS..
j'ai simplement ajouté un champ d'entrée radio supplémentaire 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 n'est pas et cela déclenche le message de validation et aucune erreur de console-un peu d'un hack mais ce qui n'est pas ces jour..
je dois faire quelque chose comme ça pour corriger le bug, puisque j'ai quelque 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 positionne pas tous les champs d'entrée cachés sur null , chrome va encore essayer de valider l'entrée.
cette erreur obtient si ajouter le format décimal. j'ajoute juste
step="0.1"
non validée fera l'affaire.
<form action="whatever" method="post" novalidate>
$("...").attr("required"); and $("...").removeAttr("required");
n'a pas fonctionné pour moi jusqu'à ce que j'ai mis tout mon code jQuery entre cela:
$(document).ready(function() {
//jQuery code goes here
});