Checking if an input field is required using jQuery

Question

What would be the easiest way to check if an input is required? I have been trying stuff along these lines but always comes up with all required (only 4/6 are).

$('form#register').find('input').each(function(){
    if($(this).prop('required') == 'undefined'){
        console.log("NR");
    } else {
        console.log("IR");
    }
})

(I have tried .attr aswell)

Im trying to use it for form ajax validation, Im doing it this way at the moment:

if($('form#register span').length == $('form#register').children(".green").length){
    $('input#register-sub').prop('disabled', false);
} else {
    $('input#register-sub').prop('disabled', true);
}

Thanks.

EDIT: Html adding

<form id="register" action="" method="post" autocomplete="on">
<label>Nickname:</label><input type="text" name="name" value="<? echo $_POST['name'] ?>" required="" /><span id="reg-name"></span><br />

<?  if($user->type == "l"){ ?>
<label>email:</label><input type="email" name="email" value="<? echo $_POST['email'] ?>" required="" /><span id="reg-email"></span><br />
<label>Password:</label><input type="password" name="password" value="<? echo $_POST['password'] ?>" required="" /><span id="reg-password"></span><br />
<label>Again:</label><input type="password" name="password-test" value="<? echo $_POST['password-test'] ?>" required="" /><span id="reg-password-test"></span><br />
<label>Avatar:</label><input type="url" name="avatar" value="<? echo $_POST['avatar'] ?>" /><span id="reg-avatar"></span><br /> 
<? } ?>

<input type="submit" value="Register" disabled="" id="register-sub"/>

What does your HTML look like? And what version jQuery are you using? Also, try $(this).is(':required'); — putvande
– putvande, Commented Aug 28, 2013 at 18:18

gsamaras · Accepted Answer · 2016-02-08 20:06:30Z

96

The required property is boolean:

$('form#register').find('input').each(function(){
    if(!$(this).prop('required')){
        console.log("NR");
    } else {
        console.log("IR");
    }
});

Reference: HTMLInputElement

edited Feb 8, 2016 at 20:06

gsamaras

73.7k50 gold badges210 silver badges330 bronze badges

answered Aug 28, 2013 at 18:20

rink.attendant.6

46.7k64 gold badges111 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zygimantus Over a year ago

Maybe you can also point out here, how to output a text that this input is required manually in f(!$(this).prop('required')){ block?

nclsvh Over a year ago

What about <input required="">? Is that seen as false?

Max P. · Accepted Answer · 2018-12-08 13:47:56Z

A little bit of a more complete answer, inspired by the accepted answer:

$( '#form_id' ).submit( function( event ) {
        event.preventDefault();

        //validate fields
        var fail = false;
        var fail_log = '';
        var name;
        $( '#form_id' ).find( 'select, textarea, input' ).each(function(){
            if( ! $( this ).prop( 'required' )){

            } else {
                if ( ! $( this ).val() ) {
                    fail = true;
                    name = $( this ).attr( 'name' );
                    fail_log += name + " is required \n";
                }

            }
        });

        //submit if fail never got set to true
        if ( ! fail ) {
            //process form here.
        } else {
            alert( fail_log );
        }

});

In this case we loop all types of inputs and if they are required, we check if they have a value, and if not, a notice that they are required is added to the alert that will run.

Note that this, example assumes the form will be proceed inside the positive conditional via AJAX or similar. If you are submitting via traditional methods, move the second line, event.preventDefault(); to inside the negative conditional.

Kris Selbekk · Accepted Answer · 2017-04-10 12:41:36Z

8

You don't need jQuery to do this. Here's an ES2015 solution:

// Get all input fields
const inputs = document.querySelectorAll('#register input');

// Get only the required ones
const requiredFields = Array.from(inputs).filter(input => input.required);

// Do your stuff with the required fields
requiredFields.forEach(field => /* do what you want */);

Or you could just use the :required selector:

Array.from(document.querySelectorAll('#register input:required'))
    .forEach(field => /* do what you want */);

edited Apr 10, 2017 at 12:41

answered Nov 19, 2015 at 23:24

Kris Selbekk

7,6729 gold badges51 silver badges74 bronze badges

2 Comments

GeorgeButter Over a year ago

What's the browser support like for this?

Kris Selbekk Over a year ago

querySelector supports IE9 and above, Array.from requires a polyfill for IE11 and below, and arrow functions are not supported in IE11 and below. You can either use a transpiler like Babel or just change out arrow functions for regular anonymous functions - Array.from(...).forEach(function(field) { /* do what you want */ });

Aamir Nakhwa · Accepted Answer · 2019-07-09 09:28:03Z

4

$('form#register input[required]')

It will only return inputs which have required attribute.

answered Jul 9, 2019 at 9:28

Aamir Nakhwa

3911 silver badge12 bronze badges

Comments

einUsername · Accepted Answer · 2021-02-02 20:58:24Z

1

The below code works fine but I am not sure about the radio button and dropdown list

$( '#form_id' ).submit( function( event ) {
    event.preventDefault();

    //validate fields
    var fail = false;
    var fail_log = '';
    var name;
    $( '#form_id' ).find( 'select, textarea, input' ).each(function(){
        if( ! $( this ).prop( 'required' )){

        } else {
            if ( ! $( this ).val() ) {
                fail = true;
                name = $( this ).attr( 'name' );
                fail_log += name + " is required \n";
            }

        }
    });

    //submit if fail never got set to true
    if ( ! fail ) {
        //process form here.
    } else {
        alert( fail_log );
    }

});

edited Feb 2, 2021 at 20:58

einUsername

1,6192 gold badges17 silver badges30 bronze badges

answered Feb 2, 2021 at 17:43

ankur makavana

212 bronze badges

Comments

Ayham Kamel · Accepted Answer · 2021-11-11 03:15:12Z

In response to:

What would be the easiest way to check if an input is required?

The answer is:

the power of .is()

I use it to check any attribute, e.g.: .is('[type="image"]'), .is(':disabled') or .is('[disabled]')... etc. It returns a boolean.

    
    $(':input').each(function(){
      var ID  = $(this).prop('id'),
          req = $(this).is('[required]'),
          img = $(this).is('[type="image"]');
      
      if(img){
        alert(ID + ' is an image input');
      } else {
        alert(ID + ' is NOT an image');
      }
      
      if(req){
        alert(ID + ' is required');
      } else {
        alert(ID + ' is NOT required');
      }
      

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="inOne" name="test" required>
<input type="text" id="inTwo" name="test">
<input type="image" id="inThree" name="test" required>

Collectives™ on Stack Overflow

Checking if an input field is required using jQuery

6 Answers 6

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related