remove mandatory option if not selected

Question

I have a form that contains 3 different payment options:

1 - Direct Deposit
2 - Credit Card
3 - Cash at Office

What I want to do is remove the mandatory status (validation) from the form fields for Credit Cards if Credit Card is NOT selected so that the form can process without requesting this information.

Any ideas? I have a JSfiddle with what I have setup at present: http://jsfiddle.net/barmar/Kvg8M/2/

JS Code:

    $(document).ready(function () {
        $(".paymentmethod").click(function () {
        $(".paymentinfo").hide();
        switch ($(this).val()) {
        case "Direct Deposit":
            $("#pay0").show("slow");
            break;
        case "Credit Card Authorisation":
            $("#pay1").show("slow");
            break;
        case "Cash at FAA Office (In Person)":
            $("#pay2").show("slow");
            break;
            }
        });
    });

I am using Adobe Business Catalyst as well if that helps or hinders??

are you using any validator to validate the form.. since i just see `class=req` in the`` and nothing in the `` — bipen, Mar 07 '13 at 05:05
@bipen - The form is created within Adobe Business Catalyst and has a validation at the end of the form that starts with //<![CDATA[ var submitcount44202 etc, etc. — sampotts, Mar 07 '13 at 05:08

score 0 · Answer 1 · edited Mar 07 '13 at 14:56

try this

$(document).ready(function () {
        $(".paymentmethod").click(function () {
        $(".paymentinfo").hide();
        switch ($(this).val()) {
        case "Direct Deposit":
            $("#pay0").show("slow");
         $("#filedID").rules('remove', 'required');
            break;
        case "Credit Card Authorisation":
            $("#pay1").show("slow");
            break;
        case "Cash at FAA Office (In Person)":
            $("#pay2").show("slow");
            break;
            }
        });
    });

score 0 · Answer 2 · edited May 23 '17 at 12:27

Point: req is the affected class for requirement of the filed values. if req class apply for any element it will be must to fill as your code.

Tip: So think simply if you remove this class from element. It will be not must fill element. And if you add this class again, It will be must fill element.

How to add or remove class from a element if you use jQuery:

$('#CardName').addClass('req');
$('#CardName').removeClass('req');

if you are not use JQuery look at here.

Remove CSS class from element with JavaScript (no jQuery)

$(document).ready(function () {

function setMend() {
   alert("seting mend");
  $('#CardName').addClass('req');
  $('#CardNumber').addClass('req');
  $('#CardExpiryMonth').addClass('req');
}

function unsetMen(){
    alert("unseting mend");
    $('#CardName').removeClass('req');
    $('#CardNumber').removeClass('req');
    $('#CardExpiryMonth').removeClass('req');
 }

    $(".paymentmethod").click(function () {
        $(".paymentinfo").hide();
        switch ($(this).val()) {
            case "Direct Deposit":
                $("#pay0").show("slow"); 
                unsetMen();                
                break;
            case "Credit Card Authorisation":
                $("#pay1").show("slow");
                setMend();
                break;
            case "Cash at FAA Office (In Person)":
                $("#pay2").show("slow"); 
                unsetMen();
                break;
        }
    });
});

Sorry if I was not clear but its not the class I am trying to remove as that is just displaying the red * next to a field name to indicate that it is mandatory. I am treying to remove the validation of the fields within Credit Card if Credit Card is not selected so the form processes without requesting this information. — sampotts, Mar 07 '13 at 05:17

remove mandatory option if not selected

2 Answers2