validating 1 input of multiple inputs using jquery

Question

I've got multiple input fields where they have the same class names. I need to check to make sure at least 1 of them isn't empty. So I've got,

$('form[name=expForm]').submit(function(){
 var msg = "";
 var found = false;
 $('.date-mask').each(function(){
  if($(this).val()){
   found = true;
  }
 });

 if (found != true)  {

msg += "Please provide at least 1 date before submitting.\n"; return false; } var calcFnd = false; $('.calc').each(function(){ if($(this).val()){ calcFnd = true; } });

if (calcFnd != true) { msg += "Please provide at least 1 expense before submitting.\n"; return false; }

if(msg != ""){ alert(msg); return false; }

 if($('.ttlR27').val()==""){
  var net = $('.ttlR26').val();
  $('.ttlR28').val(net);
 }
 return false;

});

<cfloop from="1" to="#ArrayLen(labels)#" index="r">
<tr>
 <td class="labels <cfif labels[r] EQ "Day of Week:">row1</cfif>"><cfif ArrayIsDefined(labels,r) AND labels[r] NEQ "Open1"><cfif labels[r] EQ "Open"><input type="text" id="descript#r#" name="descript#r#" class="description descript#r#" value="Enter text here" style="width:auto;" /><cfelse>#labels[r]#</cfif></cfif></td>   

 <cfloop from="1" to="7" index="i">
  <td id="Day#i#" class="row#r# col#i#">
   <cfif r EQ 1>#Left(DayOfWeekAsString(i),3)#<cfelse><cfif r EQ 2>
   <input type="text" class="date-mask" name="dates#i#" required="yes" message="Please provide at least 1 date before submitting.">
   <cfelse>
   <input type="text" 
   <cfif labels[r] EQ "Personal Car: Mileage ##"> id="gasamount#i#" <cfelseif labels[r] EQ "Personal Car: Mileage $">id="gasmoney#i#"</cfif><cfif labels[r] EQ "Open">id="open#r#"</cfif><cfif labels[r] EQ "Daily Totals">id="dailytotals#i#"</cfif> class="all <cfif labels[r] EQ "Personal Car: Mileage ##">gasamount <cfelse><cfif labels[r] NEQ "Daily Totals">C#i# </cfif></cfif><cfif labels[r] EQ "Personal Car: Mileage $">gasmoney<cfelse>calc R#r#<cfif labels[r] EQ "Daily Totals"> </cfif></cfif><cfif labels[r] EQ "Daily Totals">ttlC#i#</cfif><cfif labels[r] EQ "Less Advance(if applicable)"> less</cfif><cfif labels[r] EQ "Net Due Employee"> net</cfif><cfif labels[r] EQ "Open"> open</cfif>" 
    <cfif labels[r] EQ "Daily Totals" OR labels[r] EQ "Personal Car: Mileage $" OR labels[r] EQ "Open1">readonly="readonly"</cfif>
    name="<cfif labels[r] NEQ "Personal Car: Mileage ##" AND labels[r] NEQ "Personal Car: Mileage $" AND labels[r] NEQ "Dates:" AND labels[r] NEQ "Open1" AND labels[r] NEQ "Daily Totals">R#r#.C#i#</cfif><cfif labels[r] EQ "Personal Car: Mileage ##">gasamt#i#</cfif><cfif labels[r] EQ "Daily Totals">celltotals#i#</cfif><cfif labels[r] EQ "Personal Car: Mileage $">gastot#i#</cfif>" /></cfif>
      </cfif>
  </td>
 </cfloop>

  <td class="totals<cfif r EQ 1>1</cfif>"><cfif r EQ 1>Total<cfelse><input type="text" <cfif labels[r] EQ "Less Advance(if applicable)">id="less"</cfif><cfif labels[r] EQ "Net Due Employee">id="net"</cfif>id="totals" class="ttlR#r#" name="totals#r#" readonly="readonly" /></cfif></td>


</tr>
</cfloop>

The class names that are being used are: date-mask, for the top row of dates and calc, for the rest of the table.

I only need 1 input to not be empty to allow for a true submission.

Any ideas?

Edit Here is the link to the live page. What I'm validating here are two different things, but essentially the same function. The first row, the dates. Also, the entire table. If not all, MOSTLY every input has one of the same classes.

Answer 1

You could have a validation flag you set in your code and submit if it's true.

var valid = false;
$('.huh').each(function(){
  var value = $(this).val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
  if(value.length > 0){
    valid = true;
    return false;
  }
});

The first statement in the each will trim the whitespaces and then check for the length of the value. If it's greater than 0 we have a value; set the valid flag to true and return false to stop the iterations.

Answer 2

You could do something like this:

var valid = !!$.makeArray($('input.huh').map(function() { return this.value; })).join('');

Explanation:

Get all the inputs, map the array to just get the values, change the array to a JS array and join. If at least one has a value, the joined string will not be empty.

The !! just converts to a boolean (may or may not be necessary/desirable).

Answer 3

Here:

var found = false;
$('.huh').each(function(){
   if($(this).val()){
      found = true;
      return false;
   }
});

Answer 4

@karim79's code should work. Here, I wrote a proof of concept that it works:

The script:

function checkFields() {
    var found = false;
    $('.huh').each(function(){
        if($(this).val()){
            found = true;
            return false;
        }
    });

    if (found == true)  {
        alert("at least one field has value");
    } else {
        alert("all fields are empty");
    }
}

The mark-up

<input type="text" class="huh" name="limit1" />
<input type="text" class="huh" name="limit2" />
<input type="text" class="huh" name="limit3" />
<input type="text" class="huh" name="limit4" />
<input type="text" class="huh" name="limit5" />
<input type="button" name="submit" value="Submit" onclick="checkFields();"/>

Try this code yourself on a clean html and you'll see that it actually works.

Edit for the added code: The code is not reaching the alert part because you are already returning false here: msg += "Please provide at least 1 date before submitting.\n"; return false; Don't return until you've shown the alert