jQuery perlu menambahkan ke kolom input

171

Saya telah mencari cara agar jQuery secara otomatis menulis diperlukan menggunakan validasi html5 untuk semua bidang input saya, tetapi saya mengalami kesulitan menentukan di mana harus menulisnya.

Saya ingin mengambil ini

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150">

dan memilikinya secara otomatis menambahkan diperlukan sebelum tag penutup

 <input type="text" name="first_name" value="" id="freeform_first_name"
 maxlength="150" required>

Saya pikir saya bisa melakukan sesuatu di sepanjang garis 

$("input").attr("required", "true");

Tapi itu tidak berhasil. Setiap bantuan sangat dihargai.

javascript jquery validation Miura-shi
sumber
2
Apakah tidak dibungkus dom siap? $(function(){....});
PSL
Saya menggunakan jsfiddle.net/japaneselanguagefriend/LEZ4r
Miura-shi
jika 'input' adalah id, jquery tidak memiliki # pada pemilih di sini.
John Meyer
@JohnMeyer "input" adalah pemilih tag. Tidak perlu # jika menargetkan tag input
Spartacus

Jawaban:

420 
$("input").prop('required',true);

DEMO FIDDLE

Tidak dikenal
sumber
1
Hmm, menambahkan tombol kirim tetapi masih belum memvalidasi atau menambahkan atribut yang diperlukan ke kolom input. jsfiddle.net/japaneselanguagefriend/LEZ4r
Miura-shi
1
@JohnMeyer "input" adalah pemilih tag
morefromalan
1
mendapat TypeError: element.prop is not a functionkesalahan
davideghz
@ Miura-shi Anda kehilangan <form></form>tag di jsFiddle Anda
JESTech
Jika itu dapat membantu seseorang: ini pada awalnya tidak berhasil bagi saya karena saya memanggil .prop('required',true)input sebelum memanggilnya .css("display", "block").
electrotype
52

Anda dapat melakukannya dengan menggunakan attr, kesalahan yang Anda buat adalah Anda memasukkan tanda kutip yang sebenarnya. alih-alih itu coba ini:

$("input").attr("required", true);
Joz Naveen Joz
sumber
2
@JohnMeyer "input" adalah nama pemilih tag
dave4jr
requiredadalah atribut boolean dan hanya boleh dihilangkan (untuk "false"), atau memiliki nilai yang sama dengan namanya (yaitu "required") untuk "true". Ini sebenarnya lebih baik digunakan .prop().
Alnitak
@Alnitak Tidak jika Anda berupaya membuat situs yang kompatibel dengan IE, prop()tidak berfungsi di sana seperti halnya di browser modern. Masih lebih baik digunakan $(ele).attr("required", true)dan falsedihapus.
Oliver Heward
29

Saya telah menemukan bahwa implementasi berikut ini efektif:

$('#freeform_first_name').removeAttr('required');

$('#freeform_first_name').attr('required', 'required');

Perintah-perintah ini (attr, removeAttr, prop) berperilaku berbeda tergantung pada versi JQuery yang Anda gunakan. Silakan rujuk dokumentasi di sini: https://api.jquery.com/attr/

John Meyer
sumber
6

Menggunakan .attrmetode

.attr(attribute,value); // syntax

.attr("required", true);
// required="required"

.attr("required", false);
//

Menggunakan .prop 

.prop(property,value) // syntax

.prop("required", true);
// required=""

.prop("required", false);
//

Baca lebih lanjut dari sini

https://stackoverflow.com/a/5876747/5413283

Dexter
sumber
4

Saya menemukan bahwa jquery 1.11.1 tidak melakukan ini dengan andal.

Saya menggunakan $('#estimate').attr('required', true)dan $('#estimate').removeAttr('required').

Menghapus requiredtidak dapat diandalkan. Kadang-kadang akan meninggalkan requiredatribut tanpa nilai. Karena requiredattibute boolean, kehadirannya semata, tanpa nilai, dilihat oleh browser sebagai true.

Bug ini intermiten, dan saya bosan mengacaukannya. Beralih ke document.getElementById("estimate").required = truedan document.getElementById("estimate").required = false.

Doris Gammenthaler
sumber
removeAttrtidak bekerja untuk saya. Lalu saya menggunakan solusi Anda dan berfungsi dengan baik. Terima kasih!
Diego Somar
4

Seharusnya tidak menyertakan benar dengan "" kutipan ganda itu harus seperti

$(document).ready(function() {            
   $('input').attr('required', true);   
});

Anda juga dapat menggunakan prop

jQuery(document).ready(function() {            
   $('input').prop('required', true);   
});

Alih-alih benar Anda dapat mencoba diperlukan. Seperti

$('input').prop('required', 'required');
Rokan Nashp
sumber