„Nieprawidłowa kontrola formularza” tylko w Google Chrome

Poniższy kod działa dobrze w Safari, ale w Chrome i Firefox formularz nie zostanie przesłany. Konsola Chrome rejestruje błąd An invalid form control with name='' is not focusable. Jakieś pomysły?

Zauważ, że chociaż poniższe kontrolki nie mają nazw, powinny mieć nazwy w momencie przesyłania, wypełnione poniższym JavaScriptem. Formularz DZIAŁA w 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 chce skupić się na kontrolce, która jest wymagana, ale wciąż jest pusta, aby mógł wyświetlić komunikat „Proszę wypełnić to pole”. Jeśli jednak formant jest ukryty w momencie, gdy Chrome chce wyświetlić wiadomość, czyli w momencie przesyłania formularza, Chrome nie może skupić się na kontrolce, ponieważ jest ukryta, dlatego formularz nie zostanie przesłany.

Tak więc, aby obejść problem, gdy formant jest ukryty przez javascript, musimy również usunąć atrybut „required” z tej kontrolki.

Pokaże tę wiadomość, jeśli masz taki kod:

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

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

rozwiązanie tego problemu będzie zależeć od tego, jak witryna powinna działać

na przykład jeśli nie chcesz, aby formularz był przesyłany, chyba że to pole jest wymagane, wyłącz przycisk przesyłania

więc kod js pokazujący div powinien również włączać przycisk przesyłania

możesz również ukryć przycisk (powinien być wyłączony i ukryty, ponieważ jeśli jest ukryty, ale nie wyłączony, użytkownik może przesłać formularz z innymi w taki sposób, jak naciśnięcie enterw dowolnym innym polu, ale jeśli przycisk jest wyłączony, to się nie stanie

jeśli chcesz, aby formularz został przesłany, jeśli element div jest ukryty, wyłącz wszystkie wymagane w nim dane wejściowe i włącz je podczas wyświetlania elementu div

jeśli ktoś potrzebuje do tego kodów, powiedz mi dokładnie, czego potrzebujesz

Jeśli nie zależy Ci na walidacji HTML5 (być może walidujesz w JS lub na serwerze), możesz spróbować dodać „novalidate” do formularza lub elementów wejściowych.

spróbuj użyć odpowiednich tagów dla kontrolek HTML5, takich jak liczba (liczby całkowite)

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

dla liczb dziesiętnych lub zmiennoprzecinkowych

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

step = 'Any' Bez tego nie możesz przesłać formularza, wprowadzając w powyższym polu wartości dziesiętne lub zmiennoprzecinkowe, takie jak 3,5 lub 4,6.

Spróbuj naprawić wzorzec, wpisz kontrolki HTML5, aby rozwiązać ten problem.

Otrzymałem ten błąd i ustaliłem, że faktycznie dotyczy to pola, które nie było ukryte.

W tym przypadku było to type="number"pole, które jest wymagane. Jeśli w tym polu nie wprowadzono żadnej wartości, w konsoli wyświetlany jest komunikat o błędzie, a formularz nie jest przesyłany. Wprowadzenie wartości, a następnie usunięcie jej oznacza, że ​​błąd walidacji jest wyświetlany zgodnie z oczekiwaniami.

Uważam, że jest to błąd w Chrome: moim obejściem na razie było wymyślenie wartości początkowej / domyślnej.

Miałem błąd:

Nieprawidłowa kontrolka formularza z name = 'telefono' nie jest aktywna.

Działo się tak, ponieważ nie użyłem poprawnie wymaganego pola, które włączało się i wyłączało po kliknięciu checkboka. Rozwiązaniem było usunięcie requiredatrybutu, gdy checkbok nie był zaznaczony i oznaczenie go jako wymaganego, gdy checkbox był zaznaczony.

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

Muszę zrobić coś takiego, aby naprawić błąd, ponieważ mam kilka type="number"z 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);
});

Jeśli nie ustawię wszystkich ukrytych pól wejściowych na nullchrome nadal będę próbował zweryfikować dane wejściowe.

Żaden walidator nie wykona zadania.

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

Miałem ten problem, gdy miałem class = "hidden" w polach wejściowych, ponieważ użyłem przycisków zamiast punktorów radia - i zmieniłem stan "aktywny" przez JS ..

Po prostu dodałem dodatkową część pola wejściowego radia do tej samej grupy, w której chciałem, aby pojawiła się wiadomość:

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

pozostałe 2 aktywne kule są niewidoczne, ten nie jest, a to powoduje wyświetlenie komunikatu walidacji i brak błędów konsoli - trochę hackowania, ale co nie jest obecnie ..

ten błąd zostanie wyświetlony, jeśli dodasz format dziesiętny. po prostu dodaję

step="0.1"

Otrzymałem ten komunikat o błędzie, kiedy wprowadziłem liczbę (999999), która była poza zakresem ustawionym dla formularza.

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

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

nie działało dla mnie, dopóki nie umieściłem całego kodu jQuery między tym:

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

zamień requiredna wymagane = „wymagane”