Jquery Selector: check if input fields have the attribute required

Question

I am wanting to check if input fields have the attribute required. If these fields have an empty value, and also have the attribute required, append an error div after each field. I got a little stumped when it comes to using the selector

 // initialize validator for a bunch of input fields
 var inputs = $("#Contact :input")

 // Check all required fields
 if (inputs.attr("required") && inputs.val() === "") {
    var invalidFields = Select all fields that have the attribute required and an empty value, and assign them a class
     alert("Required Fields not completed"); 
 }

XNA_developer_group · Accepted Answer · 2012-04-06 01:38:16Z

2

Looping through each element should do it

$("#Contact :input [required]").each(function(){
if($(this).val()===""){
//the input doesn't have a value, but is required
//code here
}
});

answered Apr 6, 2012 at 1:38

XNA_developer_group

878 bronze badges

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

Comments

COLD TOLD · Accepted Answer · 2012-04-06 01:31:46Z

0

try something like this it should add class to all inputs that meet the criteria

  $("#Contact :input").each(function(){
         if ($(this).attr("required") && $(this).val() === "") 
         {
        $(this).addClass("req");

         }
      });

answered Apr 6, 2012 at 1:31

COLD TOLD

13.6k3 gold badges37 silver badges53 bronze badges

Comments

Dennis · Accepted Answer · 2012-04-06 01:29:28Z

0

You can use the filter function with a callback to narrow down the selected elements to missing required ones:

var inputs = $("#Contact :input");

var missing = inputs.filter(function() {
   return this.getAttribute("required") && this.value === "";
});

answered Apr 6, 2012 at 1:29

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Comments

Aram Kocharyan · Accepted Answer · 2012-04-06 01:36:00Z

Try this: http://jsfiddle.net/aramk/mK8YL/

HTML:

<input id="some" class="required" name="some" type="text" value="" />
<input id="submit_btn" type="submit" value="Go!" />

JS:

$(document).ready(function() {

    $('#submit_btn').click(function() {
        // initialize validator for a bunch of input fields
        var valid = true;
        var inputs = $("input.required").each(function() {
            var input = $(this);
            // Check all required fields
             if (input.val() === '') {
                input.addClass('invalid');
                valid = false; // Avoid a submit
                alert("Required Fields not completed"); 
             } else if (input.hasClass('invalid')) {
                 input.removeClass('invalid');
             }
        });
        if (valid) {
            // This will submit
            alert('submit successful');
        } else {
            return false;
        }
    });

}
);

CSS:

.required {
    background: yellow;
    color: black;
}

.invalid {
    background: red;
    color: white;
}

Make sure to add those inputs into a form for submission.

Collectives™ on Stack Overflow

Jquery Selector: check if input fields have the attribute required

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related