We Keep Coding

Enable form validation/required if fieldset is not disabled

I have a booking form, which requires validation. Some of the fields are enabled/disabled depending on previous options chosen. My problem is that I am restricted from submitting the form with the fields disabled as it waits for "valid" input data from the empty fields.
Is there a way which I can enable/disable required and data validation for these fields only if the fieldset is enabled?
EDIT
Here is the code I'm currently working with. The fieldset is enabled/disabled according to the selected radio button. I want the fields within the fieldset to be validated if the radio button is selected and the fields are enabled. Right now, if I try to submit the form with the fieldset disabled and validation/required existing on the fields, I am not able to submit the form due to required fields not filled/fields validation fails due to fields being empty.
<div class="col-sm-2">
<div class="form-check">
<label class="radio-inline">
<input type="radio" name="oneRetOpt" id="returntrf" onclick="enableReturn()">
Return
</label>
</div>
</div>
<fieldset id="returnfields" disabled>
<div class="row" style="padding-bottom: 5px">
<div class="col-sm-4">
<div class="form-group">
<label for="transferTypeRet">Transfer Type:</label>
<select class="form-control" placeholder="Transfer Type" id="transferTypeRet">
<option> </option>
<option>Direct Tranfser</option>
<option>Split Transfer</option>
</select>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="numadultsRet">Adults:</label>
<input type="number" min="0" class="form-control" placeholder="Number of Adults" id="numadultsRet" >
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="numchildRet">Children:</label>
<input type="number" min="0" class="form-control" placeholder="Number of Children (under 12 years old)" id="numchildRet" >
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 5px">
<div class='col-sm-6'>
<div class="form-group">
<label for="datetimeret">Date and Time:
<a href="#" data-toggle="timeTooltip"
title="Provide flight landing or departure time for airport transfers">
<i class="fa fa-info-circle"></i></a>
</label>
<div class='input-group date form_datetime' data-date-format="dd MM yyyy - HH:ii" id='datetimeret'>
<input class="form-control" type="text" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 5px">
<div class="col-sm-6">
<div class="form-group">
<label for="pickupret">Pick-up Location: </label>
<input type="text" class="form-control" placeholder="Pick-up location" id="pickupret">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="dropoffret">Drop-off Location: </label>
<input type="text" class="form-control" placeholder="Drop-off location" id="dropoffret">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
</fieldset>
<script type="text/javascript">
function enableReturn() {
document.getElementById("returnfields").disabled = false;
}
</script>

You can consider handling it in the submit logic of the form. See sample below. You an even bypass certain inputs from validation if you can conditionally evaluate them.
$("#myform").submit( function(event){
event.preventDefault();
var form = $("#myform");
console.log(form)
form.validate()
alert(form.valid())
form.children("#input1").remove()
form.validate()
alert(form.valid())
})
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<form id = "myform" novalidate>
<input id= "input1" required>
<input id= "input2" required>
<input type = "submit">
</form>

Submit form data from selected radio button option only

I am working on a form where a user selects an option from radio buttons.
Then depending on option, a view of text fields appears. The user then inputs the required data and submits the form.
The options have different options and such data submitted should be different.
My challenge is how to submit only data from the selected radio button fields.
Anyone kindly help. Thank you
$(function () {
$('input[type="radio"]').on("click",function () {
$(".selections").hide(); // hide them all
if (this.value=="both") $(".selections").show(); // show both
else $("#"+this.value).show(); // show the one with ID=radio value
});
$('.selections input[type="checkbox"]').on("click",function() {
$(this).next().toggle(this.checked); // hide if not checked
});
$('.selections input[type="text"]').each(function() { // initialise
$(this).toggle($(this).prev().is(":checked"));
});
});
.selections { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" name="bill_type" value="percentage">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<!-- flat_rate radio button option -->
<div id="flat_rate" class="selections">
<input type="hidden" name="bill_type" value="flat_rate">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at">
</div>
<!-- variable radio button option -->
<div id="variable" class="selections">
<input type="hidden" name="bill_type" value="variable">
<div class="form-group">
<label for="limit" class="col-md-4 control-label">Limit</label>
<div class="col-md-4">
<input id="limit" placeholder="10" type="number" class="form-control" name="limit" autofocus>
</div>
</div>
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" name="send_at">
<br/>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>

You should try to use Bootstrap Tabs [imho], but if you want to go with radios...
Disabling all inputs will prevent them from being submited:
$("#div :input").attr("disabled", true);
or
$('#div').find('input, textarea, button, select').attr('disabled','disabled');
Code from this post

Firstly you don't need same field repeatedly.Try like this
$(function () {
$('input[name="billing"]').on('change',function(){
$('#bill_type').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" id="bill_type" name="bill_type" value="">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
After submission you can do whatever based on the value of bill_type.

Jquery: Loading some other URL on click of a button

I'm working on a project which includes some JQuery and AJAX. I have also implemented a feature of JQuery autofill. The code of form is shown below:
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-primary" id="addendt">Add Endorsement</button>
<button class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>
The Autofill is implemented on the textbox with ID "endtpolnumber". When I click on textbox with ID "findpolinfo" it should alert "asdf". But, on contrary it is redirecting me to to this URL
"http://localhost/dis/home/login?endtpolnumber=31-125&endtefffrom=&endtno=&endtamt=&endtdesc="
My JQuery code is as below:
$('#findpolinfo').click(function () {
alert('asdf');
});
Does anyone have any idea, where am i going wrong?
All positive suggestions are welcomed...
Thanks in advance...

Because the default behavoiur of <button> if it is inside form is submit
what's the standard behavior when < button > tag click? will it submit the form?
add
type="button"
if you don't want this button to submit form

Button has a default behaviour to submit the form. You can use return false to stop that form submission. Below is code to help you out. Just enter the policy number and click on the 'Find Policy' button:
$('#findpolinfo').click(function () {
alert($("#endtpolnumber").val());
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button class="btn btn-primary" id="addendt">Add Endorsement</button>
<button class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>

based on W3schools if you want to add button just for clicking,You can add type="button" to your button attributes.just like this:
<form class="form-horizontal">
<div class="form-group">
<label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
<div class="col-sm-4 ui-widget">
<input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
<button type="button" id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
</div>
<label for="insuredsname" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="button" class="btn btn-primary" id="addendt">Add Endorsement</button>
<button type="button" class="btn btn-warning" id="addendtclearform">Clear Form</button>
</div>
</div>
</form>

ng-disabled in Angular JS

I have a modal popup with few mandatory fields.
<form name="myReferenceDataForm" role="form" ng-submit="AddNewGroupMembershipReferenceRecord()" style="margin: 10px">
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupCode" class="col-sm-4 form-control-label">
Group Code <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupCode" class="form-control" id="GroupCode" type="text">
</div>
</div>
</div>
<div class="form-group row">
<div style="padding-bottom:5px; padding-top:5px; ">
<label for="GroupName" class="col-sm-4 form-control-label">
Group Name <span class="requiredRed">*</span>
</label>
<div class="col-sm-8">
<input ng-model="referenceAddRecord.groupName" id="GroupName" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group row">
<label for="GroupType" class="col-sm-4 form-control-label">Group Type </label>
<div class="col-sm-8">
<select name="selGroupType" id="selGroupType" class="form-control" ng-change="referenceAddRecord.populateGroupTypeDetails(selGroupType)" ng-options="groupType.value for groupType in referenceAddRecord.groupTypes track by groupType.id" ng-model="referenceAddRecord.groupType"></select>
</div>
</div>
Only above 3 fields groupName , groupCode are mandatory.
If they exist or not filled I want to have the submit button in the page disabled.
So , I did ...
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)|| addReferenceDataGroupNameExists() || addReferenceDataGroupCodeExists()" />
But it is not working . Even Only the whether the fields are filled that check is failing. Whenever I enter only one field it is getting enabled.
<input type="submit" class="btn btn-default pull-right" style="width:100px;" value="Submit" ng-disabled="!(referenceAddRecord.groupCode || referenceAddRecord.groupName)" />
What am I doing wrong here ?

Check out this plunker
<input type="submit" id="submit" ng-disabled="!(referenceAddRecord.groupName && referenceAddRecord.groupCode)" value="Submit" />

stop refresh when form is submitted if any error and refresh if no error

I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>

Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false