CODEWITHSUNDEEP
jqueryjquery-validate
RGilkes
RGilkes

Reputation: 1052

Other textfield required jQuery validate

I have a form that looks like this:enter image description here

I am able to easily validate the name field, email field, and checkbox group, but I would like the checkbox group to fail if the other checkbox is checked and the additional field is not filled out.

Fiddle: http://jsfiddle.net/yfLmana8/

This is my JS (not working for the checkbox):

$('#contact').validate({
    rules: {
      other: {
        required: {
          depends: function(element) {
            return $(".contact_more_info_other_chk").is(":checked");
          }
        }
      }
    },
    errorPlacement: function(error, element) {},
    highlight: function(element, errorClass, validClass) {
      if (element.name == 'name') {
        $('.contact_name').addClass(errorClass).removeClass(validClass);
      } else if (element.name == 'email') {
        $('.contact_email').addClass(errorClass).removeClass(validClass);
      } else if (element.name == 'more_info[]' ) {
        $('.contact_more_info').addClass(errorClass).removeClass(validClass);
      } else if (element.name == 'other') {
        $('.contact_more_info').addClass(errorClass).removeClass(validClass);
        $('.contact_more_info_other_txt').addClass(errorClass).removeClass(validClass);
      }
    },
    unhighlight: function(element, errorClass, validClass) {
      if (element.name == 'name') {
        $('.contact_name').addClass(validClass).removeClass(errorClass);
      } else if (element.name == 'email') {
        $('.contact_email').addClass(validClass).removeClass(errorClass);
      } else if (element.name == 'more_info[]') {
        $('.contact_more_info').addClass(validClass).removeClass(errorClass);
      } else if (element.name == 'other') {
        $('.contact_more_info').addClass(validClass).removeClass(errorClass);
        $('.contact_more_info_other_txt').addClass(validClass).removeClass(errorClass);
      }
    },
  });
})

HTML:

<form action="" id="contact">
 <div class="contact_name">
   <input type="text" name="name" placeholder="Name" required>
   <i class="fa fa-exclamation-circle form-feedback"></i>
   <i class="fa fa-check-circle form-feedback"></i>
 </div>
 <div class="contact_email">
   <input type="email" name="email" placeholder="Email" required>
   <i class="fa fa-exclamation-circle form-feedback"></i>
   <i class="fa fa-check-circle form-feedback"></i>
 </div>
 <div>
   <input type="text" name="company" placeholder="Company">
 </div>
 <div>
   <input type="text" name="fav_brand" placeholder="Favorite Brand">
 </div>
</div>
<div class="contact_more_info">
 <h3>What keeps you up at night?</h3>
 <i class="fa fa-exclamation-circle form-feedback"></i>
 <i class="fa fa-check-circle form-feedback"></i>
 <div>
   <label>
     <input type="checkbox" name="more_info[]" required> Lead gen / gain interest
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Customer dev / relationship growth
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Lead nurture / inform to conversion
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Retention / minimize attention
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Onboarding / experience management
   </label>
 </div>
 <div>
   <label>
     <input type="checkbox" name="more_info[]"> Winback / recoupe lost revenue
   </label>
 </div>
 <div class="col-xs-12">
     <input type="checkbox" name="more_info[]" class="contact_more_info_other_chk"> Other <input class="other" type="text" name="other" class="contact_more_info_other_txt">
 </div>
</div>
 <div>
   <button type="submit" class="btn btn-default">Submit</button>
 </div>
</form>

Upvotes: 0

Views: 29

Answers (1)

Sparky
Sparky

Reputation: 98738

You simply need a custom method for the checkbox group. This sees if the last checkbox is checked and fails if the text box is left blank.

$.validator.addMethod('otherbox', function(value, element, params) {
    if ($(".contact_more_info_other_chk").is(':checked')) {
        return ($('[name="other"]').is(':filled')) ? true : false;
    } else {
        return true;
    }
});

within the rules object...

    rules: {
        other: {
            required: {
                depends: function (element) {
                    return $(".contact_more_info_other_chk").is(":checked");
                }
            }
        },
        'more_info[]': {
            required: true,
            otherbox: true
        }
    }

DEMO: http://jsfiddle.net/L76fvhym/

Upvotes: 1

Related Questions