Remove jQuery element validation from a specific element

Question

I have form with jQuery validation defined as follows.

 //#costCalculation is a form id
 $('#costCalculation').validate({

    onsubmit: false, //To prevent validation during form submit
       errorClass: "my-error-class",

    rules: {
        adSizeFull: {
            required: true
        },
        fullAdNo: {
            required: true
        }  
    },
    messages: {

        adSizeFull: "Please select Full adsize",
        fullAdNo: "Please select total Ads(Full)"
    },
    submitHandler: function (form) { // for demo
        //alert('valid form');
        return true;
    }
});

I have a form with select box like this

<div class="row">
         <div class="col-sm-6">
         <div class="form-group">
           <label class="control-label col-xs-4">Ads(Full):</label>
           <div class="col-xs-8">
              <select name="adSizeFull" id="fullads-list" class="form-control" onchange="fullAdSizeChange()">
                 <option value="">--Select--</option>
              </select>
           </div>
         </div>
         </div>
         <div class="col-sm-6">
            <div class="form-group">
             <label class="control-label col-xs-4" for="fullAdNo">#:</label>     
             <div class="col-xs-8">
               <select name="fullAdNo" id="fulladnos-list" class="form-control" onchange="fullAdNoChange()">
                 <option value="">--Select--</option>
               </select>
             </div>
         </div>
         </div>
        </div>

I would like to remove validation in the following scenario JS

function fullAdSizeChange() {
  var adSizeFull = $("#fullads-list").val();
  var fullAdNo = $("#fulladnos-list").val();
    if(adSizeFull == "" && fullAdNo == "") {
            $("#fullads-list").rules("remove", "required");
            $("#fulladnos-list").rules("remove", "required");  
        }
}

How to remove the validation from specific elements if the form is specified as above??

I haven't copied the entire code. There may problems in syntaxes. I need guidelines only to implement this

DibsyJr · Accepted Answer · 2016-11-21 10:55:38Z

1

jQuery Validate actually directly supports dependency expressions.

All you need to do is change your validate options like this:

parent: {
  required: function(element) {
    return $("#age").val() < 13;
    // Makes "parent" required only if age is below 13.
  }

Full Example:

$( "#myform" ).validate({
  rules: {
    age: {
      required: true,
      min: 3
    },
    parent: {
      required: function(element) {
        return $("#age").val() < 13;
      }
    }
  }
});
}

edited Nov 21, 2016 at 10:55

DibsyJr

8847 silver badges18 bronze badges

answered Nov 21, 2016 at 10:27

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit Chauhan · Accepted Answer · 2016-11-21 10:40:32Z

0

just add the required class in both select box class no need to add change event

          <select name="adSizeFull" id="fullads-list" class="form-control required" onchange="fullAdSizeChange()">
             <option value="">--Select--</option>
          </select>

edited Nov 21, 2016 at 10:40

answered Nov 21, 2016 at 10:24

Amit Chauhan

6827 silver badges22 bronze badges

3 Comments

Amit Chauhan Over a year ago

you want to remove or add the required in validation when change the select box ?

Sam Over a year ago

Yes. I want to remove or add the required in validation when change the select box

Amit Chauhan Over a year ago

you just add the required class in select box ,

Collectives™ on Stack Overflow

Remove jQuery element validation from a specific element

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related