CODEWITHSUNDEEP
javascriptjqueryhtmlvalidation
Praful Bagai
Praful Bagai

Reputation: 17372

jQuery Dynamic Validations on radio button select

I've a form.

<form>
    <fieldset>
        <div>
            <label>title</label>
            <input id="title" name="title" type="text">
        </div>
        <div>
            <label>Type</label>
                <input name="type" id="1" value="1" checked="checked" type="radio">1
                <input name="type" id="2" value="2" type="radio">2
            </div>
        </div>
        <div>
            <label for="3">3</label>
            <input id="3" name="3" placeholder="3">
        </div>
        <div class="2_details" style="display:none;">
            <input id="4" name="4" placeholder="4">
        </div>
    </fieldset>
</form>

It has 2 radio buttons. 1 and 2. Currently div with class 2_details is hidden. It only gets activated if radio button 2 is clicked, else it's hidden.

Following is the jquery for that:-

$('form').change(function (event) {
    var value = $('input[name=type]:checked', 'form').val();
    if (value == '2'){
        $('.2_details').show()
    }
    else{
        $('.2_details').hide()
    }
});

Now I want to apply jquery validations. The scenario is as such that if radio button 2 is checked, then value of 3 should be greater than value of 4, else accept any value of 3.

Also, apply validations on class 2_details if 2 is checked else dont apply validations on 2_details.

Here is my validation code:-

$.validator.addMethod("3greater4", function(value, element) {
    return $('#4').val() > $('#3').val()
},  "* 3 should be greater than or equal to 4.");


 $('form').validate({
    rules: {
        title: {
            required: true,
            minlength: 10
        },
        3: {
            required: true,
            number: true,,
            3greater4 : true
        },
        4: {
            required: true, // only if radio 2 is checked.
            number: true,,
            3greater4 : false
        }
    }
});

Upvotes: 1

Views: 1183

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

There is no need of a custom rule, you can use

jQuery(function($) {
  $('input[name="type"]').change(function(event) {
    $('.2_details').toggle(this.value == 2)
  });

  $('form').validate({
    rules: {
      title: {
        required: true,
        minlength: 10
      },
      3: {
        required: true,
        number: true
      },
      4: {
        required: true,
        number: true,
        min: function() {
          return +$('#3').val() || 0;
        }
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<form>
  <fieldset>
    <div>
      <label>title</label>
      <input id="title" name="title" type="text">
    </div>
    <div>
      <label>Type</label>
      <input name="type" id="1" value="1" checked="checked" type="radio">1
      <input name="type" id="2" value="2" type="radio">2
    </div>
    <div>
      <label for="3">3</label>
      <input id="3" name="3" placeholder="3">
    </div>
    <div class="2_details" style="display:none;">
      <input id="4" name="4" placeholder="4">
    </div>
  </fieldset>
  <input type="submit" value="save" />
</form>

Upvotes: 2

Related Questions