Google Chrome nie może przesłać formularza z ekranem: brak

Question

Przycisk Prześlij w tym formularzu nie robi nic, chyba że usunę style="display:none" z elementu div template=row. Czemu??

(The name każdej kontroli forma jest wypełniana dynamicznie JavaScript, jednak dla uproszczenia rozwiązywania problemów uruchomiony formie bez Javascript oraz problem sprowadza się do tego, czy nie, że display znacznik jest tam).

To co mówi konsola Chrome:

bundleAn invalid form control with name='' is not focusable. 
bundleAn invalid form control with name='label' is not focusable. 
bundleAn invalid form control with name='unique' is not focusable 

HTML:

<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"> 
    <input type="text" data-keyname="hint" placeholder="Hint"> 


    <select data-keyname="fieldtype" required> 
     <option value="">Field Type...</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" required> Label 
    <input type="radio" data-keyname="unique" value="unique" name="unique" required> 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> 

Answer 1

Przyczyną wydaje się być HTML 5 constraint validation - to atrybut require. Chrome zaczął ją obsługiwać w swoich najnowszych wersjach.

Wygląda na to, że jest to backward compatibility issue, ale można to naprawić, ustawiając atrybut formnovalidate dla przycisku przesyłania.

Zakładam, że jest to faktycznie zabezpieczenie, które uniemożliwia złożenie rzekome dane użytkownika poprzez złożenie manipulowane, ukryte treści, to wskazuje cytat w tym kierunku:

Jeżeli jedna z kontroli nie są renderowane (np ma ukryty zestaw atrybutów), wtedy agenty użytkownika mogą zgłaszać błąd skryptu.

Twoje dane wejściowe są typu text, więc ich celem jest umożliwienie użytkownikom wprowadzania danych, a ich zawartość ukryta jest czymś, czego prawdopodobnie użytkownik nie chciałby mieć.

Jeśli nadal chcesz przesłać ukryte dane wejściowe podczas sprawdzania poprawności klienta, proponuję zamiast tego użyć <input type="hidden"> - Mogę sobie wyobrazić, że tam nie ma błędu sprawdzania poprawności, ponieważ są one przeznaczone do niewidoczności.

Answer 2

Zrobiłem JSFiddle do zbadania problemu here, i udało mi się go naprawić dodając sprawdzone do wejść Radiobutton tak: <input type="radio" data-keyname="label" value="label" name="label" required checked>. W powyższym kodzie przyciski radiowe nie są zaznaczone, ale ponieważ są oznaczone jako required, formularz nie sprawdza poprawności, a Chrome odmawia przesłania formularza.