É necessário adicionar o jQuery aos campos de entrada

171

Eu tenho procurado maneiras de que o jQuery grave automaticamente a gravação necessária, usando a validação html5 em todos os meus campos de entrada, mas estou tendo problemas para informar onde escrevê-lo.

Eu quero pegar isso

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

e tê-lo automaticamente adicionar exigido antes da tag de fechamento

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

Eu pensei que eu poderia fazer algo ao longo das linhas de 

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

Mas isso não funciona. Qualquer ajuda é muito apreciada.

javascript jquery validation Miura-shi
fonte
2
Não está envolto em dom pronto? $(function(){....});
PSL
Eu estou usando este jsfiddle.net/japaneselanguagefriend/LEZ4r
Miura-shi
se 'input' for um id, o jquery está faltando o # no seletor aqui.
John Meyer
@JohnMeyer "input" é um seletor de tags. Não # necessário se alvo tags de entrada
Spartacus

Respostas:

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

DEMO FIDDLE

Desconhecido
fonte
1
Hmm, adicionou um botão de envio, mas ainda não está validando ou adicionando o atributo necessário aos campos de entrada. jsfiddle.net/japaneselanguagefriend/LEZ4r
Miura-shi
1
@JohnMeyer "input" é um seletor de tags
morefromalan
1
tem um TypeError: element.prop is not a functionerro
davideghz
@ Miura-shi Você está perdendo as <form></form>tags no seu jsFiddle
JESTech 9/17
Se puder ajudar alguém: isso não funcionou para mim no começo, porque eu estava ligando .prop('required',true)para a entrada antes de ligá .css("display", "block")-la.
electrotype
52

Você pode fazer isso usando attr, o erro que cometeu é colocar as verdadeiras aspas internas. em vez disso, tente o seguinte:

$("input").attr("required", true);
Joz Naveen Joz
fonte
2
@JohnMeyer "input" é o nome de um seletor de tags
dave4jr
requiredé um atributo booleano e só deve ser omitido (para "false") ou ter o mesmo valor que seu nome (ie "required") para "true". Na verdade, é melhor usar .prop().
Alnitak 10/01
@ Alnitak Não, se você está trabalhando para tornar um site compatível com o IE, prop()não funciona lá como nos navegadores modernos. Ainda é melhor usar $(ele).attr("required", true)e falseremover.
Oliver Heward
29

Eu descobri que as seguintes implementações são eficazes:

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

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

Esses comandos (attr, removeAttr, prop) se comportam de maneira diferente, dependendo da versão do JQuery que você está usando. Consulte a documentação aqui: https://api.jquery.com/attr/

John Meyer
fonte
6

Usando o .attrmétodo

.attr(attribute,value); // syntax

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

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

Usando .prop 

.prop(property,value) // syntax

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

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

Leia mais aqui

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

Dexter
fonte
4

Eu descobri que o jquery 1.11.1 não faz isso de maneira confiável.

Eu usei $('#estimate').attr('required', true)e $('#estimate').removeAttr('required').

A remoção requirednão era confiável. Às vezes, deixava o requiredatributo sem valor. Como requiredé um atributo booleano, sua mera presença, sem valor, é vista pelo navegador como true.

Esse bug era intermitente e eu me cansei de mexer com ele. Mudou para document.getElementById("estimate").required = truee document.getElementById("estimate").required = false.

Doris Gammenthaler
fonte
removeAttrnão funciona para mim. Então eu uso sua solução e funciona bem. Obrigado!
Diego Somar 31/05
4

Não deve incluir true com aspas duplas "", deve ser como

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

Também você pode usar prop

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

Em vez de verdadeiro, você pode tentar o necessário. Tal como

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