Kontrol formulir yang tidak valid dengan nama = '' tidak dapat fokus

671

Saya memiliki masalah akut di situs web saya. Di Google Chrome beberapa pelanggan tidak dapat melanjutkan ke halaman pembayaran saya. Saat mencoba mengirim formulir saya mendapatkan kesalahan ini:

An invalid form control with name='' is not focusable.

Ini dari konsol JavaScript.

Saya membaca bahwa masalahnya mungkin karena bidang tersembunyi memiliki atribut yang diperlukan. Sekarang masalahnya adalah bahwa kita menggunakan .net form web diperlukan validator bidang, dan bukan atribut html5 yang diperlukan.

Tampaknya acak siapa yang mendapat kesalahan ini. Adakah yang tahu solusi untuk ini?

mp1990
sumber
11
Jika Anda berpikir bahwa itu mungkin karena bidang wajib yang disembunyikan, mungkin Anda harus memeriksa apakah dalam beberapa kasus bidang tersebut tetap kosong? Misalnya, jika Anda mengisi user_id dari sesi, atau sesuatu yang serupa, dalam kasus tertentu mungkin tetap kosong?
dkasipovic
1
Sepakat. Buka konsol pengembang (F12) di Google Chrome dan periksa nilai bidang untuk melihat apakah nilai untuk bidang ini kosong.
The Vanilla Thrilla
Terima kasih atas komentarmu. Itu tidak masuk akal bagiku? Saya memiliki formulir asp.net sederhana, yang menggunakan kontrol formulir asp.net. Kontrol input dihasilkan oleh framework.
mp1990
Saya memeriksa dan ada nilai di bidang input. Saya memiliki satu bidang input tersembunyi yang juga memiliki nilai.
mp1990
3
Saya pikir itu terjadi ketika bidang diperlukan tetapi tidak "terlihat" secara umum. Itu terjadi pada saya dalam bentuk yang dibagi menjadi beberapa tab bidang yang memicu kesalahan ada di tab yang tidak aktif pada saat mengirimkan saya menghapus atribut yang diperlukan dari bidang dan melakukan validasi khusus
TexWiller

Jawaban:

818

Masalah ini terjadi pada Chrome jika bidang formulir gagal validasi, tetapi karena kontrol yang tidak valid masing-masing tidak dapat difokus, upaya browser untuk menampilkan pesan "Silakan isi bidang ini" di sebelahnya juga gagal.

Kontrol formulir mungkin tidak dapat fokus saat validasi dipicu karena beberapa alasan. Dua skenario yang dijelaskan di bawah ini adalah penyebab paling menonjol:

  • Bidang ini tidak relevan sesuai dengan konteks logika bisnis saat ini. Dalam skenario seperti itu, kontrol masing-masing harus dihapus dari DOM atau tidak boleh ditandai dengan requiredatribut pada saat itu.

  • Validasi dini dapat terjadi karena pengguna menekan ENTER pada input. Atau pengguna mengklik tombol / kontrol input dalam bentuk yang belum mendefinisikan typeatribut kontrol dengan benar. Jika atribut tipe tombol tidak disetel ke button, Chrome (atau peramban lain dalam hal ini) melakukan validasi setiap kali tombol diklik karena submitmerupakan nilai default typeatribut tombol .

    Untuk mengatasi masalah tersebut, jika Anda memiliki tombol pada halaman Anda yang melakukan sesuatu yang lain selain menyerahkan atau ulang , selalu ingat untuk melakukan ini: <button type="button">.

Lihat juga https://stackoverflow.com/a/7264966/1356062

Igwe Kalu
sumber
2
Masalah ini dapat muncul ketika halaman dibuat & diuji dengan browser yang tidak mendukung validasi sisi klien atau tidak mencegah pengiriman formulir (lihat Safari). Pengembang atau pengguna berikutnya dengan peramban yang benar-benar mencegah pengiriman formulir atas kesalahan sisi klien (lihat Chrome; bahkan pada elemen formulir tersembunyi) mengalami masalah pada formulir yang tidak dapat diakses karena seseorang tidak dapat mengirimkan formulir dan tidak mendapatkan pesan apa pun dari browser atau situs. Mencegah validasi sama sekali melalui 'novalidate' bukanlah jawaban yang benar karena validasi di sisi klien harus mendukung input pengguna. Mengubah situs web adalah solusinya.
graste
4
Terima kasih atas jawaban terinci. Mengabaikan requiredatau menambah novalidatetidak pernah merupakan solusi yang baik.
fatCop
2
Ini seharusnya jawaban yang benar. Jika Anda menggunakan validasi sisi klien html5, menambahkan perbaikan novalidate satu masalah saat membuat yang lain. Buruk Chrome ingin memvalidasi input yang tidak ditampilkan (dan karenanya tidak harus diminta).
kheit
1
Hanya meninggalkan contoh pada kasus saya, memiliki numberbidang tersembunyi di mana nilai default tidak dapat dibagi secara merata oleh ukuran langkah. Mengubah ukuran langkah memecahkan masalah.
James Scott
3
@IgweKalu panggilan bagus. Saya mengalami implementasi TinyMCE ini di bidang textarea. TinyMCE menyembunyikan bidang formulir asli (yang "diperlukan") dan memicu kesalahan ini. Solusi, hapus atribut "wajib" yang sekarang tersembunyi dari formulir dan andalkan metode lain untuk memastikannya terisi.
john
355

Menambahkan novalidateatribut ke formulir akan membantu:

<form name="myform" novalidate>
pengguna2909164
sumber
41
Itu bukan risiko keamanan. (Mengandalkan pemeriksaan sisi klien adalah.) Ini masalah kegunaan.
Jukka K. Korpela
9
Saya mencoba dan menemukan bahwa "novalidate" tidak diperlukan! Saya baru saja memberi nama saya bentuk dan semuanya bekerja dengan baik!
Sunny Sharma
33
Saya mencoba dan menemukan bahwa "novalidate" memang diperlukan. Hanya menambahkan nama formulir tidak berfungsi.
Jeff Tian
13
Menambahkan novalidate juga menghentikan validasi sisi klien, seperti dengan permata Rails Simple Form. Lebih baik membuat bidang masalah tidak diperlukan, sesuai jawaban Ankit + komentar David Brunow.
baja
9
Saya menemukan bahwa "Kontrol formulir yang tidak valid dengan nama = '' tidak dapat fokus." juga menunjukkan jika input dalam<fieldset>
oscargilfc
261

Di Anda form, Anda mungkin inputmemiliki requiredatribut tersembunyi :

  • <input type="hidden" required />
  • <input type="file" required style="display: none;"/>

Yang formtidak bisa fokus pada elemen-elemen itu, Anda harus menghapus requireddari semua input tersembunyi, atau menerapkan fungsi validasi dalam javascript untuk menangani mereka jika Anda benar-benar membutuhkan input tersembunyi.

Ankit Sharma
sumber
7
Saya perhatikan bahwa ini juga dapat terjadi dengan bidang yang bertipe "email" yang disetel untuk tidak menampilkan apa pun, masalah yang disebabkan oleh Chrome yang mencoba memvalidasi format.
David Brunow
3
Tidak perlu required. patternsendiri dapat menyebabkan masalah ini.
Pacerier
3
Dalam kasus saya, bidang formulir bukan tipe = "disembunyikan" mereka hanya tidak terlihat, misalnya dalam bentuk dengan tab.
Josh Mc
Saya memiliki dua bentuk, satu dengan kedua <input type="hidden" required />dan yang lain dengan <input type="text" style="display: none" required />, dan satu-satunya yang menampilkan kesalahan di Chrome adalah display: none, sedangkan yang "hidden"satu mengirimkan baik-baik saja.
Pere
Ini jawaban yang benar. Chrome berusaha memvalidasi bidang yang telah disembunyikan di CSS. Ini mencegahnya menampilkan pesan peringatan validasinya, dan itu mengingatkan Anda tentang fakta ini.
superluminary
33

Jika ada orang lain yang memiliki masalah ini, saya mengalami hal yang sama. Seperti yang dibahas dalam komentar, itu disebabkan oleh peramban yang berusaha memvalidasi bidang tersembunyi. Itu menemukan bidang kosong dalam bentuk dan mencoba untuk fokus pada mereka, tetapi karena mereka ditetapkandisplay:none; , itu tidak bisa. Karena itu kesalahannya.

Saya dapat menyelesaikannya dengan menggunakan sesuatu yang mirip dengan ini:

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

Juga, ini mungkin merupakan duplikat dari "Kontrol formulir tidak valid" hanya di Google Chrome

Horatio Alderaan
sumber
6
Jika Anda merasa cenderung untuk memilih jawaban ini, silakan tinggalkan komentar untuk memberi tahu saya alasannya. Saya lebih suka menghapus jawabannya jika itu berisi informasi yang buruk daripada meninggalkannya di sini dan menyesatkan komunitas.
Horatio Alderaan
1
Saya tidak akan memilih, tetapi merasa kode ini menggunakan pendekatan "menutupi masalah" yang brutal. Ini tentu memiliki kegunaan ketika berhadapan dengan kode warisan, tetapi untuk proyek yang lebih baru saya akan merekomendasikan melihat masalah Anda sedikit lebih sulit. Jawaban ini juga berlaku untuk menggunakan "novalidate" pada tag formulir, tetapi itu sedikit lebih terlihat. +1 untuk dinonaktifkan alih-alih menghapus yang diperlukan.
Jonathan DeMarks
1
Untuk memberikan sedikit konteks, saya berada persis dalam situasi "berurusan dengan kode warisan" ketika saya mengalami masalah ini. Saya sepenuhnya setuju bahwa ini adalah peretasan. Jauh lebih baik untuk merancang markup sehingga Anda tidak menghadapi situasi ini. Namun, dengan basis kode lama dan sistem CMS yang tidak fleksibel, ini tidak selalu mungkin. Pendekatan di atas untuk menonaktifkan daripada menggunakan "novalidate" adalah cara terbaik yang dapat saya pikirkan untuk menyelesaikan masalah.
Horatio Alderaan
2
Saya setuju dengan pendekatan menonaktifkan bidang tersembunyi. Menghapus atribut 'wajib' mereka kehilangan informasi jika harus ditampilkan lagi nanti. Namun, mengaktifkan kembali mereka akan mempertahankan ini.
Druckles
1
Saya suka solusi ini, dan berpikir ini berfungsi dengan baik ketika Anda memiliki formulir dengan input yang ditampilkan atau disembunyikan secara variatif berdasarkan nilai yang dipilih dari input lain. Ini mempertahankan pengaturan yang diperlukan, dan masih memungkinkan formulir dikirimkan. Lebih baik lagi, jika validasi gagal dan pengguna melakukan sesuatu yang sama sekali berbeda, tidak diperlukan pengaturan ulang tambahan.
lewsid
17

Dalam kasus saya masalahnya adalah dengan input type="radio" requireddisembunyikan dengan:

visibility: hidden;

Pesan kesalahan ini juga akan ditampilkan jika tipe input yang diperlukan radioatau checkboxmemiliki display: none;properti CSS.

Jika Anda ingin membuat input radio / kotak centang khusus yang harus disembunyikan dari UI dan tetap mempertahankan requiredatributnya, Anda sebaiknya menggunakan:

opacity: 0; Properti CSS

Gus
sumber
masalah yang sama dengan pengecualian bahwa saya menggunakan perpustakaan selectivity.js yang menyembunyikan kotak pilih saat ini dan menunjukkan kotak js alternatif dengan js dan css. ketika saya gunakan diperlukan di atasnya melempar kesalahan ini form-field.js: 8 buat: 1 Kontrol formulir tidak valid dengan nama = 'listing_id' tidak fokus. cny sugestion bagaimana saya bisa mengatasinya.
Inzmam ul Hassan
@InzmamGujjar seperti yang saya mengerti, plugin js Anda membuat input pilih lain dengan kelasnya sendiri. Mungkin mengubah plugin kelas CSS atau memilih input yang dibuat, name=""bukan yang asli?
Gus
13

Tidak ada jawaban sebelumnya yang berfungsi untuk saya, dan saya tidak memiliki bidang tersembunyi dengan required atribut.

Dalam kasus saya, masalah ini disebabkan dengan memiliki <form>dan kemudian <fieldset>sebagai anak pertama, yang memegang <input>dengan requiredatribut. Menghapus masalah yang <fieldset>diselesaikan. Atau Anda dapat membungkus formulir Anda dengannya; itu diizinkan oleh HTML5.

Saya menggunakan Windows 7 x64, Chrome versi 43.0.2357.130 m.

Pere
sumber
Punya masalah yang sama, terima kasih atas petunjuknya. Berhasil menyelesaikannya dengan solusi Anda, itu aneh.
Ben
Terima kasih, ini adalah masalah dalam kasus saya juga.
fantasticrice
dalam kasus saya petunjuk ini membantu saya
Anja Ishmukhametova
2
Fieldsets adalah masalah saya juga. Dalam kasus saya, jawabannya ditemukan di sini: stackoverflow.com/a/30785150/1002047 Tampaknya menjadi bug Chrome (karena HTML yang bersangkutan memvalidasi menggunakan validator W3C). Cukup mengubah bidang saya ke divs memecahkan masalah.
Eric S. Bullington
@ EricS.Bullington terima kasih telah menunjukkan. Saya tidak tahu jawaban itu; sebagai pengguna itu, saya menemukannya sendiri "memotong" potongan-potongan formulir saya. Ngomong-ngomong, saya tidak tahu tentang sistem penomoran versi Chrome, tetapi dari 124 menjadi 130 dalam 4 tahun tidak terlihat seperti langkah besar ...
Pere
9

Namun kemungkinan lain jika Anda mendapatkan kesalahan pada input kotak centang. Jika kotak centang Anda menggunakan CSS khusus yang menyembunyikan default dan menggantinya dengan gaya lain, ini juga akan memicu kesalahan yang tidak dapat fokus di Chrome pada kesalahan validasi.

Saya menemukan ini di stylesheet saya:

input[type="checkbox"] {
    visibility: hidden;
}

Perbaikan sederhana adalah untuk menggantinya dengan ini:

input[type="checkbox"] {
    opacity: 0;
}
Sam
sumber
Ini juga solusi yang saya temukan bekerja paling baik. Ini memungkinkan pesan kesalahan untuk benar-benar ditampilkan di dekat kontrol bentuk tak terlihat.
Rob
8

Bisa jadi Anda telah menyembunyikan (menampilkan: tidak ada) bidang dengan atribut yang diperlukan .

Silakan periksa semua bidang yang diperlukan terlihat oleh pengguna :)

ghuroo
sumber
7

Bagi saya ini terjadi, ketika ada <select>bidang dengan opsi yang dipilih sebelumnya dengan nilai '':

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

Sayangnya itu satu-satunya solusi lintas-browser untuk placeholder ( Bagaimana cara membuat placeholder untuk kotak 'pilih'? ).

Masalahnya muncul di Chrome 43.0.2357.124.

piotr_cz
sumber
7

Jika Anda memiliki bidang apa pun dengan atribut yang diperlukan yang tidak terlihat selama pengiriman formulir, kesalahan ini akan terjadi. Anda cukup menghapus atribut yang diperlukan saat Anda mencoba menyembunyikan bidang itu. Anda dapat menambahkan atribut yang diperlukan jika Anda ingin menampilkan bidang lagi. Dengan cara ini, validasi Anda tidak akan terganggu dan pada saat yang sama, kesalahan tidak akan dibuang.

orang gila
sumber
Petunjuk: $("input").attr("required", "true"); atau $("input").prop('required',true);sebaliknya Anda bisa removedengan atribut / properti . >> jQuery menambahkan yang diperlukan untuk memasukkan bidang
fWd82
7

Untuk masalah Select2 Jquery

Masalahnya adalah karena validasi HTML5 tidak dapat memfokuskan elemen tidak valid tersembunyi. Saya menemukan masalah ini ketika saya berurusan dengan plugin jQuery Select2.

Solusi Anda bisa menyuntikkan pendengar acara dan acara 'tidak valid' dari setiap elemen formulir sehingga Anda dapat memanipulasi sesaat sebelum HTML5 memvalidasi acara.

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});
SudarP
sumber
3

Ini akan menunjukkan pesan itu jika Anda memiliki kode seperti ini:

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

  <input type="submit"/>
</form>
Robert
sumber
saya tahu itu sama saya hanya membuat contoh, beberapa orang yang mereka pahami lebih baik dengan kode: D
Robert
3

Ya .. Jika kontrol formulir tersembunyi memiliki bidang wajib maka itu menunjukkan kesalahan ini. Salah satu solusinya adalah dengan menonaktifkan kontrol formulir ini . Ini karena biasanya jika Anda menyembunyikan kontrol bentuk itu karena Anda tidak peduli dengan nilainya. Jadi formulir ini mengontrol pasangan nilai nama tidak akan dikirim saat mengirimkan formulir.

Kartik Shenoy
sumber
1
Terima kasih atas ide ini! Berguna bagi saya untuk mengaktifkan SEMUA elemen formulir yang kadang-kadang tersembunyi, terlepas dari apakah elemen individual diperlukan atau tidak, jadi logika saya bagus dan sederhana :)
Gabe Kopley
3

Anda dapat mencoba .removeAttribute("required")elemen-elemen yang tersembunyi pada saat memuat jendela. karena sangat mungkin bahwa elemen yang bersangkutan ditandai disembunyikan karena javascript (bentuk tab)

misalnya

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

Ini harus melakukan tugas.

Itu berhasil untuk saya ... tepuk tangan

utkarshk
sumber
3

Kemungkinan penyebab lain dan tidak tercakup dalam semua jawaban sebelumnya ketika Anda memiliki formulir normal dengan bidang yang diperlukan dan Anda mengirimkan formulir lalu menyembunyikannya langsung setelah pengiriman (dengan javascript) tidak memberikan waktu untuk fungsi validasi berfungsi.

Fungsionalitas validasi akan mencoba untuk fokus pada bidang yang diperlukan dan menampilkan pesan validasi kesalahan tetapi bidang tersebut telah disembunyikan, jadi "Kontrol formulir yang tidak valid dengan nama = '' tidak dapat fokus." muncul!

Edit:

Untuk menangani kasus ini cukup tambahkan kondisi berikut di dalam handler kirim Anda

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

Edit: Penjelasan

Andaikata Anda menyembunyikan formulir pada saat pengiriman, kode ini menjamin bahwa formulir / bidang tidak akan disembunyikan sampai formulir menjadi valid. Jadi, jika bidang tidak valid, peramban dapat fokus padanya tanpa masalah karena bidang ini masih ditampilkan.

Mouneer
sumber
3

Ada hal-hal yang masih mengejutkan saya ... Saya memiliki bentuk dengan perilaku dinamis untuk dua entitas yang berbeda. Satu entitas memerlukan beberapa bidang yang tidak lainnya. Jadi, kode JS saya, tergantung pada entitas, melakukan sesuatu seperti: $ ('# periodo'). RemoveAttr ('wajib'); $ ("# periodo-container"). hide ();

dan ketika pengguna memilih entitas lain: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('wajib', true);

Tetapi kadang-kadang, ketika formulir dikirimkan, masalah muncul: "Kontrol formulir yang tidak valid dengan nama = periodo '' tidak dapat fokus (saya menggunakan nilai yang sama untuk id dan nama).

Untuk memperbaiki masalah ini, Anda harus memastikan bahwa input tempat Anda mengatur atau menghapus 'wajib' selalu terlihat.

Jadi, yang saya lakukan adalah:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

Thats memecahkan masalah saya ... luar biasa.

Gustavo Soler
sumber
3

Dalam hal ini..

ng-showsedang digunakan.
ng-ifdimasukkan ke tempatnya dan memperbaiki kesalahan saya.

Chareesa Graham
sumber
Menyelamatkan hariku. Terima kasih
Syed Atir Mohiuddin
2

Untuk penggunaan sudut:

ng-diperlukan = "boolean"

Ini hanya akan menerapkan atribut 'wajib' html5 jika nilainya benar.

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
Nick Taras
sumber
2

Saya datang ke sini untuk menjawab bahwa saya telah memicu masalah ini sendiri berdasarkan TIDAK menutup </form> tag DAN memiliki beberapa bentuk pada halaman yang sama. Formulir pertama akan diperluas untuk mencakup mencari validasi pada input formulir dari tempat lain. Karena formulir MEREKA disembunyikan, mereka memicu kesalahan.

jadi misalnya:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

Pemicu

Kontrol formulir yang tidak valid dengan name = 'userId' tidak bisa fokus.

Kontrol formulir yang tidak valid dengan nama = 'kata sandi' tidak dapat fokus.

Kontrol formulir yang tidak valid dengan nama = 'konfirmasi' tidak dapat fokus.

Frankenmint
sumber
2

Ada banyak cara untuk memperbaikinya

  1. Tambahkan novalidate ke form Anda tetapi itu benar-benar salah karena akan menghapus validasi form yang akan menyebabkan informasi yang dimasukkan oleh pengguna salah.

<form action="...." class="payment-details" method="post" novalidate>

  1. Gunakan dapat menghapus atribut yang diperlukan dari bidang yang diperlukan yang juga salah karena akan menghapus validasi formulir sekali lagi.

    Alih-alih ini:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

  1. Gunakan dapat menonaktifkan bidang yang diperlukan ketika Anda tidak akan mengirimkan formulir alih-alih melakukan beberapa opsi lain. Ini adalah solusi yang disarankan menurut saya.

    Suka:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

atau menonaktifkannya melalui kode javascript / jquery tergantung pada skenario Anda.

Umar Asghar
sumber
2

Saya menemukan masalah yang sama ketika menggunakan Angular JS. Itu disebabkan dari penggunaan yang diperlukan bersama dengan ng-hide . Ketika saya mengklik tombol kirim ketika elemen ini disembunyikan maka terjadilah kesalahan Kontrol formulir yang tidak valid dengan nama = '' tidak dapat fokus.akhirnya!

Misalnya menggunakan ng-hide bersamaan dengan yang dibutuhkan:

<input type="text" ng-hide="for some condition" required something >

Saya menyelesaikannya dengan mengganti yang dibutuhkan dengan ng-pattern saja.

Sebagai contoh solusinya:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
Khachornchit Songsaen
sumber
1

Untuk pengguna AngularJS 1.x lain di luar sana, kesalahan ini muncul karena saya menyembunyikan kontrol formulir dari tampilan alih-alih menghapusnya dari DOM sepenuhnya ketika saya tidak membutuhkan kontrol untuk diselesaikan.

Saya memperbaikinya dengan menggunakan ng-ifbukan ng-show/ng-hide pada div yang berisi kontrol formulir yang memerlukan validasi.

Semoga ini bisa membantu Anda sesama pengguna case edge.

JD Mallen
sumber
1

Biarkan saya menyatakan kasus saya karena berbeda dari semua solusi di atas. Saya memiliki tag html yang tidak ditutup dengan benar. elemen itu tidak required , tapi itu tertanam dalam hiddendiv

masalah dalam kasus saya adalah dengan type="datetime-local", yang - untuk beberapa alasan - divalidasi pada pengiriman formulir.

saya mengubah ini

<input type="datetime-local" />

ke dalam itu

<input type="text" />
SoliQuiD
sumber
1

Saya ingin menjawab di sini karena TIDAK ada jawaban ini, atau hasil Google lainnya yang menyelesaikan masalah bagi saya.

Bagi saya itu tidak ada hubungannya dengan fieldset atau input tersembunyi.

Saya menemukan bahwa jika saya menggunakan max="5"(misalnya) itu akan menghasilkan kesalahan ini. Jika saya menggunakan maxlength="5" ... tidak ada kesalahan.

Saya dapat mereproduksi kesalahan dan menghapus kesalahan beberapa kali.

Saya masih tidak tahu mengapa menggunakan kode itu menghasilkan kesalahan, sejauh ini menyatakan itu harus valid, bahkan tanpa "min" saya percaya.

Kevin Marmet
sumber
Milik saya diselesaikan dengan cara yang sama, tetapi konfigurasi itu min='-9999999999.99' max='9999999999.99'.
Ricardo Green
0

Atau jawaban lain dan sangat mudah adalah dengan menggunakan atribut Placeholder HTML5 maka tidak perlu menggunakan validasi js.

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome tidak akan dapat menemukan elemen kosong, tersembunyi, dan diperlukan untuk fokus. Solusi Sederhana.

Semoga itu bisa membantu. Saya benar-benar disortir dengan solusi ini.

utkarshk
sumber
0

Saya datang ke sini dengan masalah yang sama. Bagi saya (menyuntikkan elemen tersembunyi sesuai kebutuhan - yaitu pendidikan dalam aplikasi pekerjaan) memiliki bendera yang diperlukan.

Apa yang saya sadari adalah bahwa validator menembaki yang disuntik lebih cepat daripada dokumen siap, sehingga mengeluh.

Tag wajib-asli saya menggunakan tag visibilitas (vm.flags.hasHighSchool).

Saya menyelesaikannya dengan membuat bendera khusus untuk mengatur ng-diperlukan = "vm.flags.highSchoolRequired == true"

Saya menambahkan callback 10ms pada pengaturan bendera itu dan masalahnya diselesaikan.

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

Html:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>
James Fleming
sumber
Solusi Anda sebenarnya sangat, sangat berisiko. Siapa pun dengan CPU lambat masih akan mendapatkan kesalahan yang sama. Ini (atau akan) kondisi lomba yang khas. Mungkin smartphone lama mungkin terpengaruh. Jadi harap berhati-hati dengan solusi ini.
Drachenfels
0

Pastikan bahwa semua kontrol di formulir Anda dengan atribut yang diperlukan juga memiliki set atribut nama

Adam Diament
sumber
0

Kesalahan ini terjadi pada saya karena saya mengirimkan formulir dengan bidang wajib yang tidak diisi.

Kesalahan ini dihasilkan karena browser mencoba fokus pada bidang yang diperlukan untuk memperingatkan pengguna bahwa bidang tersebut diperlukan tetapi bidang yang diperlukan disembunyikan di layar tanpa div sehingga peramban tidak dapat fokus pada bidang tersebut. Saya mengirimkan dari tab yang terlihat dan bidang yang diperlukan ada di tab yang tersembunyi, karenanya kesalahan.

Untuk memperbaikinya, pastikan Anda mengontrol kolom yang wajib diisi.

eloone
sumber
0

Itu karena ada input tersembunyi dengan atribut yang diperlukan dalam formulir.

Dalam kasus saya, saya memiliki kotak pilih dan disembunyikan oleh tokenizer jquery menggunakan gaya inline. Jika saya tidak memilih token apa pun, browser melempar kesalahan di atas pada pengiriman formulir.

Jadi, saya memperbaikinya menggunakan teknik css di bawah ini:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }
sudip
sumber
0

Saya menerima kesalahan yang sama ketika mengkloning elemen HTML untuk digunakan dalam formulir.

(Saya memiliki sebagian formulir yang lengkap, yang memiliki template yang disuntikkan ke dalamnya, dan kemudian template tersebut dimodifikasi)

Kesalahan merujuk pada bidang asli, dan bukan versi kloning.

Saya tidak dapat menemukan metode apa pun yang akan memaksa formulir untuk mengevaluasi kembali sendiri (dengan harapan itu akan menghilangkan referensi ke bidang lama yang sekarang tidak ada) sebelum menjalankan validasi.

Untuk mengatasi masalah ini, saya menghapus atribut yang diperlukan dari elemen asli dan menambahkannya secara dinamis ke bidang kloning sebelum menyuntikkannya ke dalam formulir. Formulir sekarang memvalidasi bidang yang dikloning dan dimodifikasi dengan benar.

AlastairDewar
sumber