„Nieprawidłowa kontrola formularza” tylko w Google Chrome


106

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>

Zostaną wysłane tylko udane kontrole. Aby odnieść sukces, formant musi mieć nazwę. Są też inne wymagania (patrz link).
RobG

Przyciski opcji mają nazwy. Wszystko inne otrzymuje nazwę poprzez JavaScript.
MFB

Odpowiedzi:


247

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.


9
Ach, to jest do bani. To ma sens, chociaż wydaje mi się, że przeglądarka nie może zgadnąć, jak chce, aby twój interfejs radził sobie z komunikatami o błędach walidacji, jeśli pole jest ukryte (może formularz z zakładkami ...).
Wesley Murch

12
Dzięki, to działa. Szkoda, że ​​Chrome to robi, powinien po prostu pominąć pole.
472084

Miałem ten problem w Chrome dla textarea, gdy długość tekstu w textarea wynosiła ponad 4100 liter, brak ukrytych wymaganych pól. Kiedy długość tekstu jest <4000 wszystko działa, w przeciwnym razie w konsoli widzę tę wiadomość i nie mogę przesłać formularza
ikos23

Jeśli pole nie jest wymagane, gdy jest ukryte, czy nie byłoby sensowniej je wyłączyć? ( stackoverflow.com/a/22753533/421243 )
David Cook

3
Co się stanie, jeśli ten błąd nadal występuje w przeglądarce Chrome, ale pole nie jest puste? Czy masz pomysł, jak to rozwiązać?
Leah

12

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


Tak .. czy możesz podać rozwiązanie tego problemu?
Rex Rex

@RexRex Edytuję odpowiedź, sprawdź, czy ci to pomoże, lub powiedz mi, czego dokładnie potrzebujesz
Robert

@KaziMasumBillah Nie rozumiem, czy możesz podać przykład w odpowiedzi
Robert

9

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.


1
ludzie nigdy nie powinni robić takich rzeczy powinien dokonać jego dzieła JS kod HTML5 HTML5 nie po prostu zamknąć, bo nie może sobie z tym poradzić
Robert

Nie zgadzam się. Potrzebujesz tylko dobrego powodu, by robić rzeczy inaczej. Wciąż istnieje wiele potężnych bibliotek walidacyjnych. Walidacja HTML5 jest łatwa i szybka w konfiguracji. A przede wszystkim dobrze jest przestrzegać standardów. Ale to nie znaczy, że jest to „najlepsze” rozwiązanie. Nigdy nie mów nigdy. To zawsze zależy. Chociaż zgadzam się, że „nigdy” nie należy całkowicie pomijać weryfikacji klienta. ;-)

5

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.


rozwiązałeś mój problem. Ale zwróć uwagę, że patternnie wydaje się to być uniwersalne do zaakceptowania w type="number"terenie
João Pimentel Ferreira

4

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.


Możliwy błąd w Chrome. Mnie też się przydarzyło. +1
gamliela

1

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");

1

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.


1

Żaden walidator nie wykona zadania.

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

0

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 ..



0

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">

-2
$("...").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
});

-5

zamień requiredna wymagane = „wymagane”


2
Wymagany to atrybut HTML5, a „wymagany” ma to samo znaczenie z required = „required”, ponieważ nie ma innych dostępnych atrybutów.
ilter
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.