108 votes

"Non valide forme de contrôle" que dans Google Chrome

Le code ci-dessous fonctionne bien dans Safari mais sur Chrome et Firefox, la forme ne se soumettra pas. Chrome journaux de la console de l'erreur An invalid form control with name='' is not focusable. Des idées?

Noter que, bien que les commandes ci-dessous n'ont pas de noms, ils doivent avoir des noms au moment de la soumission, remplie 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>

251voto

MFB Points 3407

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'. Toutefois, si le contrôle est caché au point que Chrome se veut pop-up le message, qui est, au moment de la soumission du formulaire, Chrome ne peuvent pas se concentrer sur le contrôle parce qu'il est caché, donc la forme ne se soumettent pas.

Donc, pour contourner le problème, lorsqu'un contrôle est masqué par du javascript, mais nous devons aussi supprimer le 'nécessaire' de l'attribut de ce contrôle.

13voto

robert Points 249

si U ont un code comme celui-ci va afficher ce message

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

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

9voto

John Velonis Points 161

Si vous n'avez pas de soins sur la validation HTML5 (peut-être que vous validez en JS ou sur le serveur), vous pourriez essayer d'ajouter "novalidate" à la forme ou les éléments d'entrée.

5voto

sudhAnsu63 Points 1971

essayez d'utiliser correctement les balises HTML5 contrôles Comme pour les nombres(entiers)

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

pour les Décimales ou float

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

étape= "Tout" Sans cela, vous ne pouvez pas soumettre votre formulaire de saisie de toute décimal ou float valeur de 3,5 4,6 dans le champ ci-dessus.

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

1voto

frddy Points 1

J'ai eu l'erreur:

Une défaillance de contrôle de formulaire avec nom='téléphone' est pas le peut recevoir le focus.

Ce qui se passait parce que je n'étais pas en utilisant le champ correctement activé et désactivé en appuyant sur un checkbok. La solution a été de supprimer l' required d'attribut à chaque fois que le checkbok n'a pas marqué et le marquer comme nécessaire lorsque la case à cocher a été marqué.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X