JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://mananpatel.in/validation/jQuery-2.1.4.min.js"></script>
<script src="http://mananpatel.in/validation/jquery.validate.js"></script>
<script src="http://mananpatel.in/validation/additional-methods.js"></script>
<form name="FrmEditAccountDetails" id="FrmEditAccountDetails" method="post" action="#">
<div class="box box-default">
<div class="box-header">
<h3 class="box-title">Payment Details</h3>
</div>
<div class="box-body">
<div class="form-group">
<label for="title">* Please select your prefered payment option</label> <span class="has-error"></span>
</div>
<div class="form-group">
<div class="radio bank_div">
<label for="pd_bank_payment_option">
<input type="radio" name="pd_payment_option" id="pd_bank_payment_option" class="pd_bank_payment_option" value="bank">Bank details</label>
</div>
<div class="radio paypal_div">
<label for="pd_paypan_payment_option">
<input type="radio" name="pd_payment_option" id="pd_paypan_payment_option" class="pd_bank_payment_option" value="paypal">Paypal email</label>
</div> <span class="has-error"></span>
</div>
<div class="form-group frm-grp1">
<div class="form-group">
<label for="pd_account_holder_name">Account Holder Name *</label>
<input type="text" name="pd_account_holder_name" value="" id="pd_account_holder_name" class="form-control" maxlength="50"> <span class="has-error"></span>
</div>
<div class="form-group">
<label for="pd_iban">IBAN *</label>
<input type="text" name="pd_iban" value="" id="pd_iban" class="form-control" maxlength="50"> <span class="has-error"></span>
</div>
<div...
JavaScript
$(document.body).on('click', '.pd_bank_payment_option', function () {
if (this.value == "bank") {
$('.frm-grp2').hide();
$('.frm-grp1').show();
$("#pd_paypal_email").prop('disabled', true);
$("#pd_account_holder_name").prop('disabled', false);
$("#pd_iban").prop('disabled', false);
$("#pd_bic_code").prop('disabled', false);
$("#pd_bank_name").prop('disabled', false);
$('#FrmEditAccountDetails').valid();
} else {
$('.frm-grp2').show();
$('.frm-grp1').hide();
$("#pd_account_holder_name").prop('disabled', true);
$("#pd_iban").prop('disabled', true);
$("#pd_bic_code").prop('disabled', true);
$("#pd_bank_name").prop('disabled', true);
$("#pd_paypal_email").prop('disabled', false);
$('#FrmEditAccountDetails').valid();
}
});
// Code for form validation
$(document.body).ready(function () {
if ($("#FrmEditAccountDetails").length) {
$("#FrmEditAccountDetails").validate({
onkeyup: false,
onfocusout: false,
errorElement: 'span',
// errorClass: 'has-error',
ignore: [],
rules: {
"pd_payment_option": {
required: true
},
"pd_account_holder_name": {
required: true
},
"pd_iban": {
required: true
},
"pd_bic_code": {
required: false
},
"pd_bank_name": {
required: true
},
"pd_paypal_email": {
required: function (element) {
return $("input[name='pd_payment_option']:checked").val() == 'paypal';
}
}
},
messages: {
"pd_payment_option": {
...