jQuery add required to input fields

Question

I have been searching ways to have jQuery automatically write required using html5 validation to my all of my input fields but I am having trouble telling it where to write it.

I want to take this

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

and have it automatically add required before the closing tag

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

I thought I could do someting along the lines of

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

But it doesn't work. Any help is greatly appreciated.

I am using this http://jsfiddle.net/japaneselanguagefriend/LEZ4r/ — Miura-shi, Oct 03 '13 at 18:44
if 'input' is an id the jquery is missing the # in the selector here. — John Meyer, May 11 '16 at 20:43
@JohnMeyer "input" is a tag selector. No # needed if targeting input tags — Spartacus, May 24 '17 at 17:45

Kiran · Accepted Answer · 2013-10-03T18:51:06.657

552

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

DEMO FIDDLE

edited Oct 03 '13 at 18:51

answered Oct 03 '13 at 18:39

Kiran

20,167
11
67
99

2

Hmm, added a submit button but still not validating or adding the required attribute to the input fields. http://jsfiddle.net/japaneselanguagefriend/LEZ4r/ – Miura-shi Oct 03 '13 at 18:45
1

@JohnMeyer "input" is a tag selector – morefromalan Dec 10 '16 at 00:51
2

got a `TypeError: element.prop is not a function` error – davideghz Mar 29 '17 at 09:32
@Miura-shi You're missing the `
` tags in your jsFiddle – JESTech Oct 09 '17 at 23:24
1

If it can help someone : this wasn't working for me at first because I was calling `.prop('required',true)` on the input *before* calling `.css("display", "block")` on it. – electrotype Jan 21 '18 at 15:15

score 71 · Answer 2 · answered Jul 25 '14 at 04:43

71

You can do it by using attr, the mistake that you made is that you put the true inside quotes. instead of that try this:

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

answered Jul 25 '14 at 04:43

Joz Naveen Joz

837
7
3

2

@JohnMeyer "input" is the name of a tag selector – dave4jr Feb 11 '17 at 23:09
`required` is a _boolean_ attribute and should only ever be omitted (for "false"), or have the same value as its name (i.e. `"required"`) for "true". It's actually better to use `.prop()`. – Alnitak Jan 10 '20 at 10:33
@Alnitak Not if you're working on making a site compatible with IE, `prop()` doesn't work on there as it does on modern browsers. Still best to use `$(ele).attr("required", true)` and `false` to remove. – Oliver Heward Jun 18 '20 at 15:09

John Meyer · Answer 3 · 2017-11-14T19:26:23.707

46

I have found that the following implementations are effective:

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

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

These commands (attr, removeAttr, prop) behave differently depending on the version of JQuery you are using. Please reference the documentation here: https://api.jquery.com/attr/

edited Nov 14 '17 at 19:26

answered May 11 '16 at 18:35

John Meyer

2,296
1
31
39

Dexter · Answer 4 · 2023-01-12T12:38:05.767

19

Using .attr method

// syntax
.attr(attribute,value);

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

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

Using .prop

// syntax
.prop(property,value)

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

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

Read more from here

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

edited Jan 12 '23 at 12:38

answered Oct 14 '18 at 02:54

Dexter

7,911
4
41
40

score 8 · Answer 5 · answered Oct 04 '18 at 10:41

Should not enclose true with double quote " " it should be like

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

Also you can use prop

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

Instead of true you can try required. Such as

$('input').prop('required', 'required');

score 6 · Answer 6 · edited Apr 20 '16 at 22:04

6

I found that jquery 1.11.1 does not do this reliably.

I used $('#estimate').attr('required', true) and $('#estimate').removeAttr('required').

Removing required was not reliable. It would sometimes leave the required attribute without value. Since required is a boolean attibute, its mere presence, without value, is seen by the browser as true.

This bug was intermittent, and I got tired of messing with it. Switched to document.getElementById("estimate").required = true and document.getElementById("estimate").required = false.

edited Apr 20 '16 at 22:04

Paul Roub

36,322
27
84
93

answered Apr 20 '16 at 21:47

Doris Gammenthaler

616
7
8

`removeAttr` doesn't work to me. Then I use your solution and works fine. Thanks! – Diego Somar May 31 '17 at 15:05

jQuery add required to input fields

6 Answers6

Linked