CODEWITHSUNDEEP
javascriptjquery
Francesca
Francesca

Reputation: 28148

jQuery check value of every input in a given div

I have the following validation script I'm trying to get working:

function validate(id){
    // checks only inputs with type "text" inside div id-calc
    // e.g #haveprice-calc or #dontknow-calc
    var input = $("." + id + "-calc input[type='text']").val();
    if (input == ""){
        alert("You must fill in all items on the form");
    }
}

It is passed an ID (the ID is a div that wraps around these specific elements) and then I would like it to check every input of type text within the div=ID

At present, this code works only for the first input in the HTML. If it's unfilled, the alert appears. Once you fill it, the alert will no longer appear. But it doesn't then check the NEXT text input in the DOM.

Some example HTML

<div class="dontknow-calc">
   <label>My materials cost</label><input type="text" name="materialcost" id="materialcost" /><br />
   <label>My packing materials cost</label><input type="text" name="packingmaterialcost" id="packingmaterialcost" /><br />

   <div class="btn btnCalc" id="dontknow">Calculate</div>
</div>

I expect it needs a foreach loop to run through every text element but I'm not sure how.

JSFiddle

Upvotes: 1

Views: 5541

Answers (5)

Joe
Joe

Reputation: 353

Try this:

function validate(id){
    // checks only inputs with type "text" inside div id-calc
    // e.g #haveprice-calc or #dontknow-calc
    var div = $("." + id + "-calc");
    $(div).find("input[type = 'text']").each(function() {
        if(this.value == "") {
            alert("You must fill in all items on the form");
            return false;
        }
    });
}

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388406

I think what you are trying to do is to give an alert if any of the input fields are empty, in that case use .filter() to find out if any of the inputs are empty if any input is empty then show the alert

$(".btnCalc").click(function() {
  var id = this.id;
  var valid = validate(id);
  console.log(valid)
});


function validate(id) {
  // checks only inputs with type "text" inside div id-calc
  // e.g #haveprice-calc or #dontknow-calc
  var $empties = $("." + id + "-calc input[type='text']").filter(function() {
    //may also use .trim() like !this.value.trim();
    return !this.value
  });
  if ($empties.length) {
    alert("You must fill in all items on the form");
    return false;
  }
  return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dontknow-calc">
  <label>My materials cost</label>
  <input type="text" name="materialcost" id="materialcost" />
  <br />
  <label>My packing materials cost</label>
  <input type="text" name="packingmaterialcost" id="packingmaterialcost" />
  <br />
  <div class="btn btnCalc" id="dontknow">Calculate</div>
</div>
<br />
<br />
<div class="haveprice-calc">
  <label>My other field</label>
  <input type="text" name="materiotherfieldalcost" id="otherfield" />
  <br />
  <div class="btn btnCalc" id="haveprice">Calculate</div>
</div>

Upvotes: 2

Roy Dictus
Roy Dictus

Reputation: 33139

Or you could use the jQuery.Validation plugin (see http://jqueryvalidation.org/category/methods/ for some examples), and then use something like this:

$( "#myform" ).validate({
  rules: {
    field1: {
      required: true
    }
    field2: {
      required: true
    }
    // etc...
  }
});

Upvotes: 1

Ramin
Ramin

Reputation: 483

if you want to use each loop you can write some code like this:

$("." + id + "-calc input[type='text']").each(function(index,val){
   // for current item value
    console.log(val); // to see what's in the val argument
    current_item_value = val.value;

}); I hope it helps

Upvotes: 0

Regent
Regent

Reputation: 5178

You can use .each() for this:

function validate(id)
{
    $("." + id + "-calc input[type='text']").each(function()
    {
        if (this.value == "")
        {
            alert("You must fill in all items on the form");
            return false;
        }
    });
}

Upvotes: 2

Related Questions