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

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

• javascript
• jquery

• you need to iterate through the set $("." + id + "-calc input[type='text']") – Arun P Johny Commented Oct 23, 2014 at 11:17

5 Answers 5

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;
        }
    });
}

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;
        }
    });
}

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./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>

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

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

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