Clever Geek Handbook

Multiple inputs validation using jquery

I have multiple input fields where they have the same class names. I need to check that at least 1 of them is not empty. So, I have a,

$('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 flow before shipping. \ n"; return false; }

if (msg! = "") {alerts (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 used are date-mask, for the top row of dates, and calc, for the rest of the table.

I only need one input so that it is not empty so that the true view can be presented.

Any ideas?

Edit Here is a link to the live page. What I'm checking here is two different things, but essentially the same function. First line, dates. Also, the whole table. If not all, MOSTLY, each entrance has one of the same classes.

+2


source to share


4 answers


@ karim79 the code should work. I wrote a proof of concept here that it works:

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

Basting



<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 in pure html and you will see that it actually works.

Edit for the added code: the code does not reach the alert part because you are already returning false here: msg + = "Please provide at least 1 date before submitting. \ N"; return false; Don't come back until you show a warning.

+2


source


Here:



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


source


You can have the validation flag set in your code and send it if it is 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 each will trim the spaces and then check the length of the value. If it is greater than 0, we have a value; set the valid flag to true and return false to stop the iterations.

0


source


You can 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 is valid, the concatenated string will not be empty.

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

0


source






More articles:


All Articles