Se requiere jQuery add para ingresar campos

171

He estado buscando formas de que jQuery escriba automáticamente requerido usando la validación html5 para todos mis campos de entrada, pero tengo problemas para decirle dónde escribirlo.

Quiero tomar esto

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

y haga que sea añadir automáticamente requerida antes de la etiqueta de cierre

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

Pensé que podría hacer algo en la línea de 

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

Pero no funciona. Cualquier ayuda es muy apreciada.

javascript jquery validation Miura-shi
fuente
2
¿No está envuelto en dom listo? $(function(){....});
PSL
Estoy usando este jsfiddle.net/japaneselanguagefriend/LEZ4r
Miura-shi
si 'input' es un id, a jquery le falta el # en el selector aquí.
John Meyer
@JohnMeyer "input" es un selector de etiquetas. No se necesita # si se apunta a etiquetas de entrada
Spartacus

Respuestas:

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

DEMO FIDDLE

Desconocido
fuente
1
Hmm, agregó un botón de envío pero aún no valida o agrega el atributo requerido a los campos de entrada. jsfiddle.net/japaneselanguagefriend/LEZ4r
Miura-shi
1
@JohnMeyer "input" es un selector de etiquetas
morefromalan
1
tiene un TypeError: element.prop is not a functionerror
davideghz
@ Miura-shi Te faltan las <form></form>etiquetas en tu jsFiddle
JESTech
Si puede ayudar a alguien: esto no estaba funcionando para mí al principio porque estaba llamando .prop('required',true)a la entrada antes de llamarla .css("display", "block").
electrotipo
52

Puede hacerlo usando attr, el error que cometió es poner las verdaderas comillas internas. en lugar de eso intente esto:

$("input").attr("required", true);
Joz Naveen Joz
fuente
2
@JohnMeyer "input" es el nombre de un selector de etiquetas
dave4jr
requiredes un atributo booleano y solo debe omitirse (para "falso"), o tener el mismo valor que su nombre (es decir, "required"para "verdadero"). En realidad es mejor usarlo .prop().
Alnitak
@Alnitak No si usted está trabajando en hacer un sitio compatible con IE, prop()no funciona allí como lo hace en los navegadores modernos. Sigue siendo mejor usar $(ele).attr("required", true)y falsequitar.
Oliver Heward
29

He descubierto que las siguientes implementaciones son efectivas:

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

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

Estos comandos (attr, removeAttr, prop) se comportan de manera diferente según la versión de JQuery que esté utilizando. Consulte la documentación aquí: https://api.jquery.com/attr/

John Meyer
fuente
6

Utilizando el .attrmétodo

.attr(attribute,value); // syntax

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

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

Utilizando .prop 

.prop(property,value) // syntax

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

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

Leer más desde aquí

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

Diestro
fuente
4

Descubrí que jquery 1.11.1 no hace esto de manera confiable.

Yo solía $('#estimate').attr('required', true)y $('#estimate').removeAttr('required').

La eliminación requiredno fue confiable. Algunas veces dejaría el requiredatributo sin valor. Como requiredes un atributo booleano, el navegador ve su mera presencia, sin valor true.

Este error era intermitente y me cansé de jugar con él. Cambiado a document.getElementById("estimate").required = truey document.getElementById("estimate").required = false.

Doris Gammenthaler
fuente
removeAttrno me funciona Entonces uso tu solución y funciona bien. ¡Gracias!
Diego Somar
4

No debe encerrar verdadero con comillas dobles "" debería ser como

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

También puedes usar utilería

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

En lugar de cierto , puede intentarlo. Como

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