CODEWITHSUNDEEP
jqueryeach
Ana DEV
Ana DEV

Reputation: 1030

Check in jquery each if some attribute length is equal to something and add some class to ALL elements which attribute will fit to if statement

I have a form and wanna do validation but not for all in separate, wanna do in each so will not write extra code. Here is my code below

jQuery(".editable_addressItem_parent input[type=text]").each(function () {
    if (jQuery(this).prev("label").children("abbr").length == 1) {
          jQuery(this).parent().addClass('invalidinput');
          jQuery(this).css({'border':'1px solid #ff0000'});
          valid = false;
          return false;
    }else{
          jQuery(this).css({'border':'1px solid #5ee1a2'});
    }
 });

And here is the markup

<div class="shipping_address_wholewrap shipping_default_address editable_addressItem_parent">
<div class="shipping_address address_block one_address_item editable_addressItem" id="shipping_address_1">
<p class="form-row form-row form-row-first validate-required formrow_editscreen" id="shipping_first_name_field">
    <label for="shipping_first_name" class="" style="display: inline;">First Name 
        <abbr class="required" title="required">*</abbr>
    </label>
    <input type="text" class="input-text editable_fields" name="shipping_first_name[]" id="shipping_first_name" placeholder="Type here..." value="Test two" style="border: 1px solid rgb(255, 0, 0);">
</p>
<p class="form-row form-row form-row-last validate-required formrow_editscreen shipping_last_name_field_editscreen" id="shipping_last_name_field">
<label for="shipping_last_name" class="" style="display: inline;">Last Name 
    <abbr class="required" title="required">*</abbr></label><input type="text" class="input-text editable_fields" name="shipping_last_name[]" id="shipping_last_name" placeholder="Type here..." value="Testing">
</p>
<div class="clear"></div>
<p class="form-row form-row form-row-wide address-field update_totals_on_change validate-required formrow_editscreen" id="shipping_country_field">
<label for="shipping_country" class="" style="display: inline;">Country / Region 
    <abbr class="required" title="required">*</abbr>
</label>
<select name="shipping_country[]" id="shipping_country" class="country_to_state country_select  shipping_address_select_editscreen editable_fields">
<option value="">Select a country…</option>
<option value="AX">Åland Islands</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
</select>
</p>
</div>
<div class="shipping_default_addresswrap">
    <input type="checkbox" class="default_shipping_address" checked="" value="true"> Default address
    <input type="hidden" class="hidden_default_shipping_address" name="shipping_address_is_default[]" value="true">
</div>

With this code it works but only for ONE first input. How i can update the code so it will apply for ALL invalid or empty input fields?

Thanks in advance.

Upvotes: 0

Views: 295

Answers (1)

Nineoclick
Nineoclick

Reputation: 814

In my opionion, it's the return false exiting the each loop.

Look at this fiddle -> https://jsfiddle.net/5hewdf4p/1/

** html **

<p>test</p>
<ul id="obj">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

** js **

$(document).ready(function(){

  $('#obj li').each(function(eq,elem){
        $('body').append('<p>"li" text is '+$(elem).text()+'</p>');
    if($(elem).text() == 1)
    {
        return false;
    }
  });
});

The if expression is immediately validate by the first object, and returning false inside the if statement exits the loop.

Hope this helps.

Upvotes: 2

Related Questions