Develop Reference

Validate only visible fields with HTML form validation?

I have two group of form fields and in each group there are some fields with required attribute. However, depends on what user selects one group might be hidden and those fields should not be included in HTML form validation. So far if I have only one visible container in the form and I populate all required fields my form won't submit. Those hidden fields are still required for some reason.
Is there a way to exclude those fields from validation?
Here is example:
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
How can I prevent fields inside of the hidden container from being validated?

Since both check boxes are off by default, add disabled to the inputs (selects) inside both divs. Then all you have to do is, inside .change(), toggle that disabled property according to the corresponding check box's state.
var checkbox = $('.account-type');
checkbox.on('change', function() {
var checked = false;
checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
checkbox.prop('required', !checked);
$('div'+$(this).data('target') + ' :input').prop('disabled', !$(this).is(':checked'));
});
$('.frm-Submit').on('submit', submitAdminFrm);
function submitAdminFrm(e) {
e.preventDefault(); // Prevnts default form submit.
alert('Submit form!');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activeuser" id="frmSaveaccount_activeuser" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select disabled class="form-control" name="frmSaveaccount_activestaff" id="frmSaveaccount_activestaff" required>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>

How to trigger Bootstrap 3 data-toggle with JQuery?

I have form that has two check box elements. Those two will show/hide additional form elements depends if they are checked or not. Then I have tried to implement feature where user clicks on add new record. In that case all form data should be cleared out including those two check box elements. However, I get both elements to be unchecked but data-toggle didn't hide the elements. Here is example of my code:
$('.account-type').on('change', checkFormFld);
function checkFormFld() {
var checked = false,
containerID = $(this).data('target'),
checkboxes = $('.account-type');
$('.account-type').each(function() {
checked = checked || $(this).is(':checked');
});
$(containerID + ' :input').prop('disabled', !$(this).is(':checked'));
checkboxes.prop('required', !checked); // Set required attribute to false.
}
$('#account_goback').on('click', clearForm);
function clearForm(e) {
e.preventDefault();
$('.frm-Submit')[0].reset();
$('.frm-Submit .collapse').collapse('hide');
$('.account-type').trigger('change', checkFormFld);
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="searchaccount_container" class="collapse in">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container">
<span class="glyphicon glyphicon-plus-sign"></span> New Account
</button>
</div>
</div>
</div>
<div id="saveaccount_container" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" name="account_goback" id="account_goback" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
</button>
</div>
</div>
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="email"><span class="label label-primary">Email address:</span></label>
<input type="email" class="form-control check-existence" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select class="form-control" name="frm_activeuser" id="frm_activeuser" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="admin"><span class="label label-default">System Admin:</span></label>
<select class="form-control" name="frm_systemadmin" id="frm_systemadmin" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select class="form-control" name="frm_activestaff" id="frm_activestaff" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
If you run example and un-comment line of code in clearForm function you can see that hidden container will slide up but won't show up if I click again. Is there a way to achieve this to work with JQuery?

Use the Collapse component methods...
https://getbootstrap.com/docs/3.3/javascript/#collapse-methods
$('.frm-Submit .collapse').collapse('toggle');

All you need to do is remove those classes which we need to collapse on Go Back Button. And remove attribute required as well
$('#user-account').removeClass('in');
$('#staff-account').removeClass('in');
$("#frm_isstaff").removeAttr('required'); // Set required attribute to false.
$("#frm_activeuser").removeAttr('required'); // Set required attribute to false.
$("#frm_systemadmin").removeAttr('required'); // Set required attribute to false.
var $checkbox = $('.account-type');
$checkbox.on('change', function() {
var checked = false,
containerID = $(this).data('target');
$checkbox.each(function() {
checked = checked || $(this).is(':checked');
});
$('div' + containerID + ' :input').prop('disabled', !$(this).is(':checked')); // Set disabled attribute on all input fields when check box is unchecked.
$checkbox.prop('required', !checked); // Set required attribute to false.
});
$('#account_new').on('click', clearForm);
function clearForm(e) {
e.preventDefault();
$('.frm-Submit')[0].reset();
$('#user-account').removeClass('in');
$('#staff-account').removeClass('in');
}
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="searchaccount_container" class="collapse in">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" name="account_new" id="account_new" data-target="#saveaccount_container,#searchaccount_container">
<span class="glyphicon glyphicon-plus-sign"></span> New Account
</button>
</div>
</div>
</div>
<div id="saveaccount_container" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#saveaccount_container,#searchaccount_container">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
</button>
</div>
</div>
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
<input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
<input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
</div>
<div class="form-group required">
<label class="control-label" for="email"><span class="label label-primary">Email address:</span></label>
<input type="email" class="form-control check-existence" name="frm_email" id="frm_email" placeholder="Enter email" maxlength="80" required>
</div>
<div class="form-group required">
<label class="control-label" for="type"><span class="label label-primary">Account Type:</span></label>
<div class="checkbox">
<label for="user">
<input type="checkbox" name="frm_isuser" id="frm_isuser" class="account-type" data-toggle="collapse" data-target="#user-account" required>
<span class="label label-default">User</span>
</label>
<label for="staff">
<input type="checkbox" name="frm_isstaff" id="frm_isstaff" class="account-type" data-toggle="collapse" data-target="#staff-account" required>
<span class="label label-info">Staff</span>
</label>
</div>
</div>
<div id="user-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="active"><span class="label label-default">Active User:<span></label>
<select class="form-control" name="frm_activeuser" id="frm_activeuser" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group required">
<label class="control-label" for="admin"><span class="label label-default">System Admin:</span></label>
<select class="form-control" name="frm_systemadmin" id="frm_systemadmin" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div id="staff-account" class="collapse">
<div class="form-group required">
<label class="control-label" for="activestaff"><span class="label label-info">Active Staff:<span></label>
<select class="form-control" name="frm_activestaff" id="frm_activestaff" required disabled>
<option value="">-- Select the option --</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>

Clone a form according to select value

I'm trying to clone a form according to the numeric value from the select option. Here is the fiddle:
Html code:
<div class="travel_tour-info">
<h3>How many people are you booking for?
<select name="travellers" id="travellers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</h3>
</div>
<div class="col-md-7 well" id="passanger">
<span id="person-1"><h5>Passenger 1 Lead traveller</h5></span>
<div class="form-group">
<label for="title" class="control-label col-sm-3 required">Title</label>
<div class="col-sm-8">
<select name="title" id="title" class="form-control">
<option value="Mr.">Mr</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
</select>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">First name</label>
<div class="col-sm-8">
<input type="text" name="f_name" class="form-control" id="fname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label for="address" class="control-label col-sm-3">Middle name</label>
<div class="col-sm-8">
<input type="text" name="m_name" class="form-control" id="mname-1" placeholder="Enter address">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">Last name</label>
<div class="col-sm-8">
<input type="text" name="l_name" class="form-control" id="lname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3 col-md-4 col-sm-4 col-xs-12 required"> Date of Birth:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="row">
<div class="col-xs-4">
<select id="dob_month" class="form-control" name="dob_month-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_day" class="form-control" name="dob_day-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_year" class="form-control" name="dob_year-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-3 required">
Gender
</label>
<label class="control-label col-sm-3">
<input name="gender-1" type="radio" value="M" /> Male
</label>
<label class="control-label col-sm-3 ">
<input name="gender-1" type="radio" value="F" /> Female
</label>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-3 required">Email</label>
<div class="col-sm-8">
<input type="email" name="email-1" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label for="contact" class="control-label col-sm-3 required">Contact no.
</label>
<div class="col-sm-8">
<input type="tel" class="form-control" id="contact" name="contact-1" placeholder="Contact no.">
</div>
</div>
<div class="form-group">
<label for="address1" class="control-label col-sm-3 required">Address 1</label>
<div class="col-sm-8">
<input type="text" name="address1-1" class="form-control" id="address1">
</div>
</div>
<div class="form-group">
<label for="address2" class="control-label col-sm-3">Address 2</label>
<div class="col-sm-8">
<input type="text" name="address2-1" class="form-control" id="address2">
</div>
</div>
<div class="form-group">
<label for="town" class="control-label col-sm-3 required">Suburb / Town</label>
<div class="col-sm-8">
<input type="text" name="town-1" class="form-control" id="town">
</div>
</div>
<div class="form-group">
<label for="state" class="control-label col-sm-3 required">State / Province</label>
<div class="col-sm-8">
<input type="text" name="state-1" class="form-control" id="state">
</div>
</div>
<div class="form-group">
<label for="postcpde" class="control-label col-sm-3 required">Postcode / Zip</label>
<div class="col-sm-8">
<input type="text" name="post-1" class="form-control" id="postcpde">
</div>
</div>
</div>
javascript code:
$(document).ready(function () {
$('#travellers').change(function() {
var travellerSelected = $('#travellers option:selected').val();
var travellerDisplayed = $('[id^="person1-"]:visible').length;
var travellerRendered = $('[id^="person-"]').length;
if (travellerSelected > travellerDisplayed) {
for (var i=1;i<=travellerSelected;i++){
var r=$('#travellers-'+i);
if (r.length == 0) {
var clone=$('#travellers-1').clone(); //clone
clone.children('#person1 h5').text("Traveller "+i);
//change ids appropriately
setNewID(clone,i);
clone.children('div').each(function() {
setNewID($(this),i);
});
$(clone).insertAfter($('#travellers-'+travellerRendered));
}else {
$(r).show();
}
}
}
else {
for (var i=++travellerSelected;i<=travellerRendered;i++){
$('#travellers-'+i).hide();
}
}
});
function setNewID(elem, i) {
oldID=elem.attr('id');
newId=oldID.substring(0,oldID.indexOf('-'))+"-"+i;
elem.attr('id',newId);
}
});
But I'm getting error Uncaught TypeError: Cannot read property 'substring' of undefined in my console. I've been trying to fix this error since few days. What wrong am I doing here ?

I've edited your code, but it is hard to explain. You can see and improve your code. I hope it will help you.
In script
<script type="text/javascript">
$(function () {
$('#travellers').change(function () {
var travellerSelected = $('#travellers option:selected').val();
var travellerDisplayed = $('[id^="person-"]:visible').length;
var travellerRendered = $('[id^="person-"]').length;
if (travellerSelected > travellerDisplayed) {
for (var i = 1; i <= travellerSelected; i++) {
var r = $('#passanger-' + i);
if (r.length == 0) {
var clone = $('#passanger-1').clone(); //clone
clone.children('#person-1')[0].innerHTML = "<h5>Traveller " + i + "<h5>";
//change ids appropriately
setNewID(clone, i);
//clone.children('div').each(function () {
//setNewID($(this), i);
//});
clone.find('div').each(function () {
setNewID($(this), i);
});
clone.insertAfter($('#passanger-' + travellerRendered));
} else {
$(r).show();
}
}
} else {
for (var i = ++travellerSelected; i <= travellerRendered; i++) {
$('#passanger-' + i).hide();
}
}
});
});
function setNewID(elem, i) {
if (typeof elem.attr('id') === "undefined") {
return;
}
oldID = elem.attr('id');
newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
elem.attr('id', newId);
}
</script>
In Html
<div class="travel_tour-info">
<h3>How many people are you booking for?
<select name="travellers" id="travellers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</h3>
</div>
<div class="col-md-7 well" id="passanger">
<div id="passanger-1">
<span id="person-1"><h5>Passenger 1 Lead traveller</h5></span>
<div class="form-group">
<label for="title" class="control-label col-sm-3 required">Title</label>
<div class="col-sm-8">
<select name="title" id="title" class="form-control">
<option value="Mr.">Mr</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Miss">Miss</option>
</select>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">First name</label>
<div class="col-sm-8">
<input type="text" name="f_name" class="form-control" id="fname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label for="address" class="control-label col-sm-3">Middle name</label>
<div class="col-sm-8">
<input type="text" name="m_name" class="form-control" id="mname-1" placeholder="Enter address">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-sm-3 required">Last name</label>
<div class="col-sm-8">
<input type="text" name="l_name" class="form-control" id="lname-1" placeholder="Enter name">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3 col-md-4 col-sm-4 col-xs-12 required"> Date of Birth:</label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="row">
<!-- added div.row -->
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_month" class="form-control" name="dob_month-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_day" class="form-control" name="dob_day-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
<div class="col-xs-4">
<!-- added div.col-xs-4 -->
<select id="dob_year" class="form-control" name="dob_year-1">
<option value="">1</option>
<option value="">2</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-3 required">
Gender
</label>
<label class="control-label col-sm-3">
<input name="gender-1" type="radio" value="M" /> Male
</label>
<label class="control-label col-sm-3 ">
<input name="gender-1" type="radio" value="F" /> Female
</label>
</div>
<div class="form-group">
<label for="email" class="control-label col-sm-3 required">Email</label>
<div class="col-sm-8">
<input type="email" name="email-1" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label for="contact" class="control-label col-sm-3 required">Contact no.</label>
<div class="col-sm-8">
<input type="tel" class="form-control" id="contact" name="contact-1" placeholder="Contact no.">
</div>
</div>
<div class="form-group">
<label for="address1" class="control-label col-sm-3 required">Address 1</label>
<div class="col-sm-8">
<input type="text" name="address1-1" class="form-control" id="address1">
</div>
</div>
<div class="form-group">
<label for="address2" class="control-label col-sm-3">Address 2</label>
<div class="col-sm-8">
<input type="text" name="address2-1" class="form-control" id="address2">
</div>
</div>
<div class="form-group">
<label for="town" class="control-label col-sm-3 required">Suburb / Town</label>
<div class="col-sm-8">
<input type="text" name="town-1" class="form-control" id="town">
</div>
</div>
<div class="form-group">
<label for="state" class="control-label col-sm-3 required">State / Province</label>
<div class="col-sm-8">
<input type="text" name="state-1" class="form-control" id="state">
</div>
</div>
<div class="form-group">
<label for="postcpde" class="control-label col-sm-3 required">Postcode / Zip</label>
<div class="col-sm-8">
<input type="text" name="post-1" class="form-control" id="postcpde">
</div>
</div>
</div>
</div>

How to add disabled attribute to button if input and select fields are empty in jquery

I am trying to add a disabled attribute to the button if all input fields and all select dropdown fields are empty but I'm having no luck.
Here's the form:
<form id="ridefinancing">
<fieldset id="details">
<h3 class="fs-title">Your Details</h3>
<div id="div_id_firstname" class="form-group required">
<label for="id_firstname" class="control-label col-md-3 requiredField"> Firstname<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<input class="form-control gradient" id="id_firstname" maxlength="30" name="firstname" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_lastname" class="form-group required">
<label for="id_lastname" class="control-label col-md-3 requiredField"> Lastname<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 ">
<input class="form-control gradient" id="id_lastname" maxlength="30" name="lastname" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_email" class="form-group required">
<label for="id_email" class="control-label col-md-3 requiredField"> Email<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<input class="form-control gradient" id="id_email" maxlength="30" name="email" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_phone" class="form-group required">
<label for="id_phone" class="control-label col-md-3 requiredField"> Phone<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 ">
<input class="form-control gradient" id="id_phone" maxlength="30" name="phone" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_birthday" class="form-group required">
<label for="id_birthday" class="control-label col-md-3 requiredField"> Birthday<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<div class="row">
<div class="col-xs-4">
<select class="form-control gradient" id="id_day">
</select>
</div>
<div class="col-xs-4">
<select class="form-control gradient" id="id_month">
</select>
</div>
<div class="col-xs-4">
<select class="form-control gradient" id="id_year">
</select>
</div>
</div>
</div>
</div>
<div id="div_id_status" class="form-group required">
<label for="id_status" class="control-label col-md-3 requiredField"> Marital Status<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<select class="form-control gradient" id="id_status">
<option>Please Select</option>
<option>Single</option>
<option>Married</option>
<option>Divorced</option>
</select>
</div>
</div>
<div id="div_id_dlicense" class="form-group required">
<label for="id_dlicense" class="control-label col-md-3 requiredField"> Driving License<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<select class="form-control gradient" id="id_dlicense">
<option>Please Select</option>
<option>032654897</option>
</select>
</div>
</div>
<button disabled="disabled" type="submit" class="vhb next action-button" id="btn1">Continue</button>
</fieldset>
I have tried this code for the input fields but still not working
I suspect it's because of the wrong selector, and I havent added the code yet for the select field.
<script type="text/javascript">
$(document).ready(function() {
var $fields = $('#details :input');
$fields.keyup(function() {
var $emptyFields = $fields.filter(function() {
return $.trim(this.value) === '';
});
if (!$emptyFields.length) {
$('#btn1').prop('disabled', true);
} else {
$('#bt1').prop('disabled', false);
}
});
});

First step : make it disabled by default
Second step: make a function that follows this pseudo code
on input change : function
if(input 1.val()=="" || input 2.val()=="" /* etc... */) then
set disabled to true
else
remove disabled attribute
end if
end function
BTW, in JQuery disabled mustn't a prop but must be an attr.
In JQuery you can use $(/*selector*/).removeAttr(/*attribute*/) to achieve it.

$('#a').on('keyup paste propertychange input', function() {
if (this.value === "") $('#b').prop('disabled', true);
else $('#b').removeAttr('disabled');
});
$('#b').on('keyup paste propertychange input', function() {
if (this.value === "") $('#c').prop('disabled', true);
else $('#c').removeAttr('disabled');
});
$('#c').on('keyup paste propertychange input', function() {
if (this.value === "") $('#d').prop('disabled', true);
else $('#d').removeAttr('disabled');
});
$('#d').on('keyup paste propertychange input', function() {
if (this.value === "") $('#e').prop('disabled', true);
else $('#e').removeAttr('disabled');
});
$('#e').on('keyup paste propertychange input', function() {
if (this.value === "") $('#f').prop('disabled', true);
else $('#f').removeAttr('disabled');
});
$('#f').on('keyup paste propertychange input', function() {
if (this.value === "") $('#g').prop('disabled', true);
else $('#g').removeAttr('disabled');
});
$('#g').on('keyup paste propertychange input', function() {
if (this.value === "") $('#h').prop('disabled', true);
else $('#h').removeAttr('disabled');
});
$('#h').on('keyup paste propertychange input', function() {
if (this.value === "") $('#i').prop('disabled', true);
else $('#i').removeAttr('disabled');
});
$('#i').on('keyup paste propertychange input', function() {
if (this.value === "") $('#j').prop('disabled', true);
else $('#j').removeAttr('disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="ridefinancing">
<fieldset id="details">
<h3 class="fs-title">Your Details</h3>
<div id="div_id_firstname" class="form-group required">
<label for="id_firstname" class="control-label col-md-3 requiredField"> Firstname<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<input id="a" class="form-control gradient" id="id_firstname" maxlength="30" name="firstname" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_lastname" class="form-group required">
<label for="id_lastname" class="control-label col-md-3 requiredField"> Lastname<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 ">
<input id="b" disabled="disabled" class="form-control gradient" id="id_lastname" maxlength="30" name="lastname" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_email" class="form-group required">
<label for="id_email" class="control-label col-md-3 requiredField"> Email<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<input id="c" disabled="disabled" class="form-control gradient" id="id_email" maxlength="30" name="email" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_phone" class="form-group required">
<label for="id_phone" class="control-label col-md-3 requiredField"> Phone<span class="asteriskField">*</span> </label>
<div class="controls col-md-9 ">
<input id="d" disabled="disabled" class="form-control gradient" id="id_phone" maxlength="30" name="phone" style="margin-bottom: 10px" type="text" />
</div>
</div>
<div id="div_id_birthday" class="form-group required">
<label for="id_birthday" class="control-label col-md-3 requiredField"> Birthday<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<div class="row">
<div class="col-xs-4">
<select id="e" disabled="disabled" class="form-control gradient" id="id_day">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-xs-4">
<select id="f" disabled="disabled" class="form-control gradient" id="id_month">
<option>Please Select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-xs-4">
<select id="g" disabled="disabled" class="form-control gradient" id="id_year">
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
</div>
</div>
</div>
</div>
<div id="div_id_status" class="form-group required">
<label for="id_status" class="control-label col-md-3 requiredField"> Marital Status<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<select id="h" disabled="disabled" class="form-control gradient" id="id_status">
<option>Please Select</option>
<option>Single</option>
<option>Married</option>
<option>Divorced</option>
</select>
</div>
</div>
<div id="div_id_dlicense" class="form-group required">
<label for="id_dlicense" class="control-label col-md-3 requiredField"> Driving License<span class="asteriskField">*</span> </label>
<div class="controls col-md-9">
<select id="i" disabled="disabled" class="form-control gradient" id="id_dlicense">
<option>Please Select</option>
<option>032654897</option>
</select>
</div>
</div>
<button id="j" disabled="disabled" type="submit" class="vhb next action-button" id="btn1">Continue</button>
</fieldset>
check the form and script if i have done correct way . Hope it will work for you .

How to disabled textfield when i click the checkbox?

I wanted to disable the div when i click the the checkbox. if the current address and permanent address are the same, the user just click the check box to disabled the field of the permanent address. Thanks!
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>

Add the following JS to your code.
$(document).ready(function(){
$('input[type="checkbox"]').change(function(){
$('.permanentAdd').attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group ">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control permanentAdd" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>

You can try something like this
<input type="checkbox" id="check_box" onchange="set_status();">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <div id="txt_field" name="txt_field"> </div>
<script type="text/javascript">
function set_status() {
var appendData = '';
var checkbox = document.getElementById("check_box");
if (checkbox.checked == true) {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" readonly="readonly" data-validate="required" placeholder="Zip Code" />';
}
else {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" data-validate="required" placeholder="Zip Code" />';
}
window.jQuery('#txt_field').html(appendData);
}
</script>
</div>
</div>
</div>
</div>

Here is the example how you do this thing easy. make sure you have only one checkbox in this window. else this not working, then you need to change something.
jQuery
$( "input[type=checkbox]" ).on( "click", function(){
var n = $("input[type=checkbox]:checked").length;
if(n){
$(".permanent-address").attr("disabled", 'disabled');
}else{
$(".permanent-address").removeAttr("disabled");
}
});
HTML
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
<input class="form-control permanent-address" rv-value="address:address" name="model.cid" data-validate="required" />

Pure javascript anwser
function checkAddress(checkbox) {
var inputs = document.querySelectorAll('input:not([type=checkbox])');
var selects = document.querySelectorAll('select');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = checkbox.checked;
}
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = checkbox.checked;
}
}
HTML code
<input type="checkbox" onclick="checkAddress(this)">
https://jsfiddle.net/0ba4f7jd/

Simply create a function that gets called when the checkbox is checked, which disables the div and all child elements:
$('#checkbox').change(function(){
var div = $('#everything');
if (div.attr('class')!="disabled") {
div.addClass("disabled");
$("#everything *").attr("disabled", true);
}
else {
div.removeClass("disabled");
$('#everything *').attr('disabled',false);
}
});
DEMO