We Keep Coding

Convert Form to JSON [duplicate]

This question already has answers here:
Convert form data to JavaScript object with jQuery
(58 answers)
Closed last year.
I need to take the values of the form and convert it into JSON. Although the fields ‘tickets’, ‘DriverAge’, and ‘PurchaseDateYear’, needs to be converted to a int and the rest would remain a string. My goal is to be able to take data from user input, change the data type on some inputs and put it all into a JSON. What is the best way to go about this.
HTML
<form class="form" id="form" name="form" action="https://api.leadprosper.io/ingest" method="post" enctype="multipart/form-data" >
<div id="wizard">
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="FirstName">First Name</label>
<input type="hidden" type="number" id="lp_campaign_id" name="lp_campaign_id" value="5848" required>
<input type="hidden" type="number" id="lp_supplier_id" name="lp_supplier_id" value="5848" required>
<input type="hidden" id="lp_campaign_id" name="lp_key" value="131bvmpb2" required>
<input type="text" id="FirstName" name="FirstName" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LastName">Last Name</label>
<input type="text" id="LastName" name="LastName" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Email">Email</label>
<input pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" type="email" id="Email" name="Email" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Phone">phone</label>
<input type="phone" type="text" pattern="^[789]\d{9,9}$" min="1" max="10" id="Phone" Name="Phone" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="VehicleYear">Vehicle Year</label>
<input pattern="[0-9]{1,15}" type="number" id="VehicleYear" name="VehicleYear" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateMonth">Purchase Date Month</label>
<input pattern="[a-zA-z]{1,15}" type="text" id="PurchaseDateMonth" name="PurchaseDateMonth" required placeholder="September">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateYear">Purchaes Date Year</label>
<input pattern="[0-9]{1,15}" type="number" id="PurchaseDateYear" name="PurchaseDateYear" placeholder="2022" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="FinancedLeased">Finance Leased</label>
<select type="text" id="FinancedLeased" name="FinancedLeased" placeholder="">
<option value="finance">finance</option>
<option value="leased">leased</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Goal">Goal</label>
<input pattern="[a-zA-Z]{1,15}" type="text" id="Goal" name="Goal" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="DailyDistance">Daily Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="DailyDistance" name="DailyDistance" placeholder="">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="YearlyDistance">Yearly Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="YearlyDistance" name="YearlyDistance" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="CompCoverage">Company Coverage</label>
<select type="text" id="CompCoverage" name="CompCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="CollisionCoverage">Collision Converage</label>
<select type="text" id="CollisionCoverage" name="CollisionCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="MaritalStatus">Marital Status</label>
<select type="text" id="MaritalStatus" name="MaritalStatus" placeholder="">
<option value="single">single</option>
<option value="married/common law">married/common law</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label id="dob"for="DOB">Date of Birth</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="DOB" name="DOB" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Occupation">Occupation</label>
<input patter="[a-zA-Z]{1,15}" type="text" id="Occupation" name="Occupation" placeholder="">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="genGenderder">gender</label>
<select type="text" id="Gender" name="genGenderder" placeholder="">
<option value="male">male</option>
<option value="female">female</option>
<option value='other'>other</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LicenseClass">Licence Class</label>
<select type="text" id="LicenseClass" name="LicenseClass" placeholder="">
<option value="class 5">class 5</option>
<option value="class 5-1">class 5-1</option>
<option value="class 5-2">class 5-2</option>
<option value="other">other</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="DriverAge">Driver Age</label>
<input pattern="[0-9]{1,15}" type="text" id="DriverAge" name="DriverAge" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="InsuranceCancellation">Insurance Cancellation</label>
<select type="text" id="InsuranceCancellation" name="InsuranceCancellation" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Suspensions">Suspensions</label>
<select type="text" id="Suspensions" name="Suspensions" placeholder="">
<option value="no">no</option>
<option value="yes-once">yes once</option>
<option value="yes-more">yes more than once
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Claims">claim</label>
<select type="text" id="Claims" name="Claims" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Tickets">Tickets</label>
<input pattern="[0-9]{1,10}" type="text" id="Tickets" name="Tickets" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="StartDate">Start Date</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="StartDate" name="StartDate" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-4">
<div class="form-row">
<label for="licenceSince">Licence Since</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="text" id="licenceSince" name="licenceSince" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="City">City</label>
<input type="text" id="City" name="City" required>
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="state">State</label>
<input pattern="[a-zA-z]{2}" type="text" id="State" name="State" required>
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Postal">Postal</label>
<input type="text" pattern="[A-za-z0-9]{5}" id="Postal" name="Postal" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="sumbit">
<button type="submit" >Submit</button>
</div>
</div>
</div>
</form>
Thank you for any advice.

Run the code, write in the form, and submit it to see the JSON formatted form data.
const submitBtn = document.querySelector('button[type="submit"]');
const form = document.querySelector('form');
submitBtn.addEventListener('click', (e) => {
e.preventDefault();
const data = new FormData(form);
const json = Object.fromEntries(data.entries());
console.log(json);
});
<form class="form" id="form" name="form" action="https://api.leadprosper.io/ingest" method="post" enctype="multipart/form-data">
<div id="wizard">
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="FirstName">First Name</label>
<input type="hidden" type="number" id="lp_campaign_id" name="lp_campaign_id" value="5848" required />
<input type="hidden" type="number" id="lp_supplier_id" name="lp_supplier_id" value="5848" required />
<input type="hidden" id="lp_campaign_id" name="lp_key" value="131bvmpb2" required />
<input type="text" id="FirstName" name="FirstName" required />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LastName">Last Name</label>
<input type="text" id="LastName" name="LastName" required />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Email">Email</label>
<input pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" type="email" id="Email" name="Email" required />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Phone">phone</label>
<input type="phone" type="text" pattern="^[789]\d{9,9}$" min="1" max="10" id="Phone" name="Phone" required />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="VehicleYear">Vehicle Year</label>
<input pattern="[0-9]{1,15}" type="number" id="VehicleYear" name="VehicleYear" required />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateMonth">Purchase Date Month</label>
<input pattern="[a-zA-z]{1,15}" type="text" id="PurchaseDateMonth" name="PurchaseDateMonth" required placeholder="September" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateYear">Purchaes Date Year</label>
<input pattern="[0-9]{1,15}" type="number" id="PurchaseDateYear" name="PurchaseDateYear" placeholder="2022" required />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="FinancedLeased">Finance Leased</label>
<select type="text" id="FinancedLeased" name="FinancedLeased" placeholder="">
<option value="finance">finance</option>
<option value="leased">leased</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Goal">Goal</label>
<input pattern="[a-zA-Z]{1,15}" type="text" id="Goal" name="Goal" placeholder="" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="DailyDistance">Daily Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="DailyDistance" name="DailyDistance" placeholder="" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="YearlyDistance">Yearly Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="YearlyDistance" name="YearlyDistance" placeholder="" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="CompCoverage">Company Coverage</label>
<select type="text" id="CompCoverage" name="CompCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="CollisionCoverage">Collision Converage</label>
<select type="text" id="CollisionCoverage" name="CollisionCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="MaritalStatus">Marital Status</label>
<select type="text" id="MaritalStatus" name="MaritalStatus" placeholder="">
<option value="single">single</option>
<option value="married/common law">married/common law</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label id="dob" for="DOB">Date of Birth</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="DOB" name="DOB" placeholder="yyyy-mm-dd" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Occupation">Occupation</label>
<input patter="[a-zA-Z]{1,15}" type="text" id="Occupation" name="Occupation" placeholder="" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="genGenderder">gender</label>
<select type="text" id="Gender" name="genGenderder" placeholder="">
<option value="male">male</option>
<option value="female">female</option>
<option value="other">other</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LicenseClass">Licence Class</label>
<select type="text" id="LicenseClass" name="LicenseClass" placeholder="">
<option value="class 5">class 5</option>
<option value="class 5-1">class 5-1</option>
<option value="class 5-2">class 5-2</option>
<option value="other">other</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="DriverAge">Driver Age</label>
<input pattern="[0-9]{1,15}" type="text" id="DriverAge" name="DriverAge" placeholder="" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="InsuranceCancellation">Insurance Cancellation</label>
<select type="text" id="InsuranceCancellation" name="InsuranceCancellation" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Suspensions">Suspensions</label>
<select type="text" id="Suspensions" name="Suspensions" placeholder="">
<option value="no">no</option>
<option value="yes-once">yes once</option>
<option value="yes-more">yes more than once</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Claims">claim</label>
<select type="text" id="Claims" name="Claims" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Tickets">Tickets</label>
<input pattern="[0-9]{1,10}" type="text" id="Tickets" name="Tickets" placeholder="" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="StartDate">Start Date</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="StartDate" name="StartDate" placeholder="yyyy-mm-dd" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-4">
<div class="form-row">
<label for="licenceSince">Licence Since</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="text" id="licenceSince" name="licenceSince" placeholder="yyyy-mm-dd" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="City">City</label>
<input type="text" id="City" name="City" required />
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="state">State</label>
<input pattern="[a-zA-z]{2}" type="text" id="State" name="State" required />
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Postal">Postal</label>
<input type="text" pattern="[A-za-z0-9]{5}" id="Postal" name="Postal" required />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="sumbit">
<button type="submit">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

Forum Post To Url

I have this project where I have to post data to the url given following specific parameters. I am getting errors and my code is just messy in general. One thing that got me stumped is how I can convert specific values in the JSON object to int. For example the parameter "tickets" requests a integer. Any help would be great.
<form class="form" id="form" name="form" action="https://api.leadprosper.io/ingest" method="post" enctype="multipart/form-data" >
<div id="wizard">
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="FirstName">First Name</label>
<input type="hidden" type="number" id="lp_campaign_id" name="lp_campaign_id" value="5848" required>
<input type="hidden" type="number" id="lp_supplier_id" name="lp_supplier_id" value="5848" required>
<input type="hidden" id="lp_campaign_id" name="lp_key" value="131bvmpb2" required>
<input type="text" id="FirstName" name="FirstName" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LastName">Last Name</label>
<input type="text" id="LastName" name="LastName" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Email">Email</label>
<input pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" type="email" id="Email" name="Email" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Phone">phone</label>
<input type="phone" type="text" pattern="^[789]\d{9,9}$" min="1" max="10" id="Phone" Name="Phone" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="VehicleYear">Vehicle Year</label>
<input pattern="[0-9]{1,15}" type="number" id="VehicleYear" name="VehicleYear" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateMonth">Purchase Date Month</label>
<input pattern="[a-zA-z]{1,15}" type="text" id="PurchaseDateMonth" name="PurchaseDateMonth" required placeholder="September">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateYear">Purchaes Date Year</label>
<input pattern="[0-9]{1,15}" type="number" id="PurchaseDateYear" name="PurchaseDateYear" placeholder="2022" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="FinancedLeased">Finance Leased</label>
<select type="text" id="FinancedLeased" name="FinancedLeased" placeholder="">
<option value="finance">finance</option>
<option value="leased">leased</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Goal">Goal</label>
<input pattern="[a-zA-Z]{1,15}" type="text" id="Goal" name="Goal" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="DailyDistance">Daily Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="DailyDistance" name="DailyDistance" placeholder="">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="YearlyDistance">Yearly Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="YearlyDistance" name="YearlyDistance" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="CompCoverage">Company Coverage</label>
<select type="text" id="CompCoverage" name="CompCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="CollisionCoverage">Collision Converage</label>
<select type="text" id="CollisionCoverage" name="CollisionCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="MaritalStatus">Marital Status</label>
<select type="text" id="MaritalStatus" name="MaritalStatus" placeholder="">
<option value="single">single</option>
<option value="married/common law">married/common law</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label id="dob"for="DOB">Date of Birth</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="DOB" name="DOB" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Occupation">Occupation</label>
<input patter="[a-zA-Z]{1,15}" type="text" id="Occupation" name="Occupation" placeholder="">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="genGenderder">gender</label>
<select type="text" id="Gender" name="genGenderder" placeholder="">
<option value="male">male</option>
<option value="female">female</option>
<option value='other'>other</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LicenseClass">Licence Class</label>
<select type="text" id="LicenseClass" name="LicenseClass" placeholder="">
<option value="class 5">class 5</option>
<option value="class 5-1">class 5-1</option>
<option value="class 5-2">class 5-2</option>
<option value="other">other</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="DriverAge">Driver Age</label>
<input pattern="[0-9]{1,15}" type="text" id="DriverAge" name="DriverAge" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="InsuranceCancellation">Insurance Cancellation</label>
<select type="text" id="InsuranceCancellation" name="InsuranceCancellation" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Suspensions">Suspensions</label>
<select type="text" id="Suspensions" name="Suspensions" placeholder="">
<option value="no">no</option>
<option value="yes-once">yes once</option>
<option value="yes-more">yes more than once
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Claims">claim</label>
<select type="text" id="Claims" name="Claims" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Tickets">Tickets</label>
<input pattern="[0-9]{1,10}" type="text" id="Tickets" name="Tickets" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="StartDate">Start Date</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="StartDate" name="StartDate" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-4">
<div class="form-row">
<label for="licenceSince">Licence Since</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="text" id="licenceSince" name="licenceSince" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="City">City</label>
<input type="text" id="City" name="City" required>
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="state">State</label>
<input pattern="[a-zA-z]{2}" type="text" id="State" name="State" required>
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Postal">Postal</label>
<input type="text" pattern="[A-za-z0-9]{5}" id="Postal" name="Postal" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="sumbit">
<button type="submit" >Submit</button>
</div>
</div>
</div>
</form>
Javascript
<script>
const Form = document.querySelectorAll('form');
Form.addEventListener('submit',function(e){
e.preventDefault();
const formData = new FormData(this);
const searchParams = new URLSearchParams();
for(const pair of formData){
searchParams.append(pair[0],pair[1]);
console.log(pair[0],pair[1]);
}
console.log(formData);
const response = fetch('https://api.leadprosper.io/ingest', {
method: 'POST',
body: searchParams,
headers:{
'Content-Type': 'application/json;'
}
}).then(function (reponse){
return reponse.json();
}).then(function(text){
console.log(text);
}).catch(function (error){
console.error(error);
})
})
</script>
Payload with the paramaters I need to follow.
{
"lp_campaign_id": "5848",
"lp_supplier_id": "5848",
"lp_key": "131bvmpb2",
"FirstName": "Amelia",
"LastName": "Nakia",
"Email": "jbaumbach#example.com",
"Phone": "3866311306",
"VehicleYear": 4,
"PurchaseDateMonth": "Groves",
"PurchaseDateYear": 1,
"FinancedLeased": "gray",
"Goal": "Thursday",
"DailyDistance": 7,
"YearlyDistance": 5,
"CompCoverage": "no",
"CollisionCoverage": "yes",
"MaritalStatus": "fuchsia",
"DOB": "2022-02-03",
"Occupation": "South",
"Gender": "male",
"LicenseClass": "lime",
"DriverAge": 6,
"LicensedSince": 2,
"LicenseLength": "Springs",
"InsuranceCancellation": "no",
"Suspensions": "no",
"Claims": "West",
"Tickets": 7,
"StartDate": "2022-02-07",
"City": "Lake Bailee",
"State": "AL",
"Postal": "68820"
}

First of all, if you want to get only numbers from input, convert your html code to this:
<div class="form-row">
<label for="Tickets">Tickets</label>
<input pattern="[0-9]{1,10}" type="text" id="Tickets" name="Tickets" placeholder="">
<div class="error"></div>
</div>
then when you want to get value as an integer type, you should put it in parseInt();
Like this:
var data = parseInt(document.getElementById('tickets')) // data is an integer
if you want to change value from a JSON object you can simply change the value by reading it like this:
data = {
tickets : 5
}
// to change the number in tickets
data.tickets = 12

How can I convert form data with multiple sections to json

I am trying to save data in html form as json. But only my last row is saved. The reason for this is probably because the names of the inputs in the two sections are the same.
But I want the json file like this:
{"name":"Name1","surname":"Surname1","gender":"f","birthDay":"15","birthMonth":"1","birthYear":"1995"},
{"name":"Name2","surname":"Surname2","gender":"m","birthDay":"20","birthMonth":"2","birthYear":"2020"}
But now output is:
{"name":"Name2","surname":"Surname2","gender":"m","birthDay":"20","birthMonth":"2","birthYear":"2020"}
function handleFormSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
const formJSON = Object.fromEntries(data.entries());
console.log(JSON.stringify(formJSON))
}
const form = document.querySelector('#example-form');
form.addEventListener('submit', handleFormSubmit);
<div class="container py-4">
<form id="example-form">
<div class="row">
<div class="col-md-12 p-0">
<div class="col-md-12 form_field_outer p-0" id="app">
<div class="row form_field_outer_row">
<div class="form-group col-md-2">
<input class="form-control w_90" id="name" name="name" placeholder="Name" type="text" value="" /></div>
<div class="form-group col-md-2">
<input class="form-control w_90" id="surname" name="surname" placeholder="Surname" type="text" value="" /></div>
<div class="form-group col-md-2">
<select class="form-control" id="gender" name="gender"><option disabled="disabled" selected="selected">Gender</option>
<option value="f">Female</option>
<option value="m">Male</option>
<option value="n">None.</option></select></div>
<div class="form-group col">
<input class="form-control w_90" id="birthDay" maxlength="2" name="birthDay" placeholder="Day" type="text" value="" /></div>
<div class="form-group col">
<select class="form-control" id="birthMonth" name="birthMonth">
<option disabled="disabled" selected="selected">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
</div>
<div class="form-group col">
<input class="form-control w_90" id="birthYear" maxlength="4" name="birthYear" placeholder="Year" type="text" value="" /></div>
</div>
<br>
<div class="row form_field_outer_row">
<div class="form-group col-md-2">
<input class="form-control w_90" id="name" name="name" placeholder="Name" type="text" value="" /></div>
<div class="form-group col-md-2">
<input class="form-control w_90" id="surname" name="surname" placeholder="Surname" type="text" value="" /></div>
<div class="form-group col-md-2">
<select class="form-control" id="gender" name="gender"><option disabled="disabled" selected="selected">Gender</option>
<option value="f">Female</option>
<option value="m">Male</option>
<option value="n">None.</option></select></div>
<div class="form-group col">
<input class="form-control w_90" id="birthDay" maxlength="2" name="birthDay" placeholder="Day" type="text" value="" /></div>
<div class="form-group col">
<select class="form-control" id="birthMonth" name="birthMonth">
<option disabled="disabled" selected="selected">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
</div>
<div class="form-group col">
<input class="form-control w_90" id="birthYear" maxlength="4" name="birthYear" placeholder="Year" type="text" value="" /></div>
</div>
</div>
</div>
</div>
<br>
<div class="col-md ml-0 mt-3 py-3">
<div class="col-md-12">
<button type="submit" id="submitId" class="btn btn-success float-right "><i class="fa fa-check-circle"></i> Submit</button>
</div>
</div>
</form>
</div>
How can I solve this?
Thanks for answers.

You have to have unique id and name values to your form elements.
So change the two occurences of:
<input id="surname" name="surname">
to something like this:
<input id="surname_0" name="person[0][surname]">
And the second occurence:
<input id="surname_1" name="person[1][surname]">
(I removed all other attributes to improve readability for my answer)

How to focus on required or invalid field?

I have form that is long and in some situations users might miss some of the required fields. If they scroll all the way to the Save button and click to send the form data they won't see error message. I'm wondering if there is a way to trigger on focus method that will take user to the first field in the form that is required or invalid. Here is example of my form:
var COMMON_FUNC = {};
$("#save").on("click", function() {
var frmObject = $(this).closest("form"),
frmDisabledFlds = frmObject.find(":input:disabled").prop("disabled", false),
frmData = frmObject.serialize();
frmDisabledFlds.prop("disabled", true);
if (COMMON_FUNC.verifyFields("new-record")) {
console.log('Send Form Data!');
}
});
COMMON_FUNC.verifyFields = function(containerID, includeInvisible) {
includeInvisible = includeInvisible || false;
let isValid = true;
const hdlMap = {
'valueMissing': "This field is required",
'patternMismatch': "This field is invalid",
'tooLong': "This field is too long",
'rangeOverflow': "This field is greater than allowed maximum",
'rangeUnderflow': "This field is less than allowed minimum",
'typeMismatch': "This field is mistyped"
};
const arrV = Object.keys(hdlMap);
$("#" + containerID).find("input,textarea,select").each(function() {
var curItem$ = $(this);
var errMsg = [];
var dispfld = curItem$.data("dispfld");
if (includeInvisible || curItem$.is(":visible")) {
if (curItem$[0].validity.valid) {
curItem$.removeClass("is-invalid");
return;
}
arrV.forEach(function(prop) {
if (curItem$[0].validity[prop]) {
if (prop === "patternMismatch" && dispfld) {
errMsg.push(dispfld);
} else {
errMsg.push(hdlMap[prop]);
}
}
});
if (errMsg.length) {
if (!curItem$.next().is(".invalid-feedback")) {
curItem$.after('<div class="invalid-feedback"></div>');
}
curItem$.addClass("is-invalid").next().text(errMsg.join(' and '));
isValid = false;
} else {
curItem$.removeClass("is-invalid");
}
}
});
return isValid;
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="card">
<div class="card-header">
<h4>New Record</h4>
</div>
<div class="card-body">
<form name="new-record" id="new-record" autocomplete="off">
<div class="form-group">
<label for="bldg_name">Building Name:</label>
<input class="form-control" type="text" name="bldg_name" id="bldg_name" value="" maxlength="500" placeholder="Enter the building name" required>
</div>
<div class="row">
<div class="col-12"><strong><u>Manager</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6">
<label for="salutation">Salutation:</label>
<select class="custom-select browser-default" name="salutation" id="salutation">
<option value="">--Select Salutation--</option>
<option value="1">Mrs</option>
<option value="2">Ms</option>
<option value="3">Miss</option>
<option value="4">Mr</option>
</select>
</div>
<div class="form-group col-6">
<label for="title">Business Title:</label>
<select class="custom-select browser-default" name="title" id="title">
<option value="">--Select Title--</option>
<option value="1">Region Manager</option>
<option value="2">State Manager</option>
<option value="3">Building Manager</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<label for="fname">First Name:</label>
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
</div>
<div class="form-group col-6 required">
<label for="lname">Last Name:</label>
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
</div>
</div>
<div class="form-group required">
<label for="email">Email:</label>
<input class="form-control email" type="email" name="email" id="email" maxlength="50" placeholder="Enter Email address" required>
</div>
<div class="form-group row">
<div class="col-5 offset-2"><strong><u>Physical Address</u></strong></div>
<div class="col-5"><strong><u>Mailing Address</u></strong></div>
</div>
<div class="form-group row required">
<label for="address1" class="col-2 col-form-label">Address 1:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_address1" id="p_address1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_address1" id="m_address1" value="" placeholder="Enter Mailing Address 1" maxlength="40" required>
</div>
</div>
<div class="form-group row">
<label for="address2" class="col-2 col-form-label">Address 2:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_address2" id="p_address2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_address2" id="m_address2" value="" placeholder="Enter Mailing Address 2" maxlength="40">
</div>
</div>
<div class="form-group row">
<label for="address3" class="col-2 col-form-label">Address 3:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_address3" id="p_address3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_address3" id="m_address3" value="" placeholder="Enter Mailing Address 3" maxlength="40">
</div>
</div>
<div class="form-group row">
<label for="address4" class="col-2 col-form-label">Address 4:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_address4" id="p_address4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_address4" id="m_address4" value="" placeholder="Enter Mailing Address 4" maxlength="40">
</div>
</div>
<div class="form-group row required">
<label for="city" class="col-2 col-form-label">City:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_city" id="p_city" value="" placeholder="Enter City" maxlength="25" required>
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_city" id="m_city" value="" placeholder="Enter City" maxlength="25" required>
</div>
</div>
<div class="form-group row required">
<label for="state" class="col-2 col-form-label">State:</label>
<div class="col-5">
<select class="custom-select browser-default physical" name="p_state" id="p_state" required>
<option value="">--Select State--</option>
<option value="az">Arizona</option>
<option value="ia">Iowa</option>
<option value="mo">Missouri</option>
<option value="ny">New York</option>
<option value="va">Virginia</option>
</select>
</div>
<div class="col-5">
<select class="custom-select browser-default mailing" name="m_state" id="m_state" required>
<option value="">--Select State--</option>
<option value="az">Arizona</option>
<option value="ia">Iowa</option>
<option value="mo">Missouri</option>
<option value="ny">New York</option>
<option value="va">Virginia</option>
</select>
</div>
</div>
<div class="form-group row required">
<label for="zip" class="col-2 col-form-label">Zip:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_zip" id="p_zip" value="" pattern="(\d{5}([\-]\d{4})?)" data-dispfld="The required format is: xxxxx or xxxxx-xxxx" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_zip" id="m_zip" value="" pattern="(\d{5}([\-]\d{4})?)" data-dispfld="The required format is: xxxxx or xxxxx-xxxx" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<button class="btn btn-outline-secondary" type="button" name="save" id="save">Save</button>
<button class="btn btn-outline-secondary" type="button" name="cancel" id="cancel">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
You can run this example and enter all information in the form but Building Name. Then you can click Save button, and you won;t be able to see the error message on the top. If anyone have suggestions how to handle this problem please let me know. I open to hear different solutions for this situations.

The DOM API has a "focus" function on elements that can do what you're looking for.
Push all your valid elements to an invalidInputs array, then you can choose the first element that is invalid and call .focus() on that element.
var COMMON_FUNC = {};
$("#save").on("click", function() {
var frmObject = $(this).closest("form"),
frmDisabledFlds = frmObject.find(":input:disabled").prop("disabled", false),
frmData = frmObject.serialize();
frmDisabledFlds.prop("disabled", true);
if (COMMON_FUNC.verifyFields("new-record")) {
console.log('Send Form Data!');
}
});
COMMON_FUNC.verifyFields = function(containerID, includeInvisible) {
includeInvisible = includeInvisible || false;
let isValid = true;
const hdlMap = {
'valueMissing': "This field is required",
'patternMismatch': "This field is invalid",
'tooLong': "This field is too long",
'rangeOverflow': "This field is greater than allowed maximum",
'rangeUnderflow': "This field is less than allowed minimum",
'typeMismatch': "This field is mistyped"
};
const arrV = Object.keys(hdlMap);
// Create an array for the invalid fields.
const invalidInputs = [];
$("#" + containerID).find("input,textarea,select").each(function() {
var curItem$ = $(this);
var errMsg = [];
var dispfld = curItem$.data("dispfld");
if (includeInvisible || curItem$.is(":visible")) {
if (curItem$[0].validity.valid) {
curItem$.removeClass("is-invalid");
return;
}
arrV.forEach(function(prop) {
if (curItem$[0].validity[prop]) {
if (prop === "patternMismatch" && dispfld) {
errMsg.push(dispfld);
} else {
errMsg.push(hdlMap[prop]);
}
}
});
if (errMsg.length) {
if (!curItem$.next().is(".invalid-feedback")) {
curItem$.after('<div class="invalid-feedback"></div>');
}
curItem$.addClass("is-invalid").next().text(errMsg.join(' and '));
isValid = false;
//Push the invalid inputs onto the invalidInputs array.
invalidInputs.push(curItem$);
} else {
curItem$.removeClass("is-invalid");
}
}
});
// Focus on the first element that is invalid.
invalidInputs[0].focus();
return isValid;
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="card">
<div class="card-header">
<h4>New Record</h4>
</div>
<div class="card-body">
<form name="new-record" id="new-record" autocomplete="off">
<div class="form-group">
<label for="bldg_name">Building Name:</label>
<input class="form-control" type="text" name="bldg_name" id="bldg_name" value="" maxlength="500" placeholder="Enter the building name" required>
</div>
<div class="row">
<div class="col-12"><strong><u>Manager</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6">
<label for="salutation">Salutation:</label>
<select class="custom-select browser-default" name="salutation" id="salutation">
<option value="">--Select Salutation--</option>
<option value="1">Mrs</option>
<option value="2">Ms</option>
<option value="3">Miss</option>
<option value="4">Mr</option>
</select>
</div>
<div class="form-group col-6">
<label for="title">Business Title:</label>
<select class="custom-select browser-default" name="title" id="title">
<option value="">--Select Title--</option>
<option value="1">Region Manager</option>
<option value="2">State Manager</option>
<option value="3">Building Manager</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<label for="fname">First Name:</label>
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
</div>
<div class="form-group col-6 required">
<label for="lname">Last Name:</label>
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
</div>
</div>
<div class="form-group required">
<label for="email">Email:</label>
<input class="form-control email" type="email" name="email" id="email" maxlength="50" placeholder="Enter Email address" required>
</div>
<div class="form-group row">
<div class="col-5 offset-2"><strong><u>Physical Address</u></strong></div>
<div class="col-5"><strong><u>Mailing Address</u></strong></div>
</div>
<div class="form-group row required">
<label for="address1" class="col-2 col-form-label">Address 1:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_address1" id="p_address1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_address1" id="m_address1" value="" placeholder="Enter Mailing Address 1" maxlength="40" required>
</div>
</div>
<div class="form-group row">
<label for="address2" class="col-2 col-form-label">Address 2:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_address2" id="p_address2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_address2" id="m_address2" value="" placeholder="Enter Mailing Address 2" maxlength="40">
</div>
</div>
<div class="form-group row">
<label for="address3" class="col-2 col-form-label">Address 3:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_address3" id="p_address3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_address3" id="m_address3" value="" placeholder="Enter Mailing Address 3" maxlength="40">
</div>
</div>
<div class="form-group row">
<label for="address4" class="col-2 col-form-label">Address 4:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_address4" id="p_address4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_address4" id="m_address4" value="" placeholder="Enter Mailing Address 4" maxlength="40">
</div>
</div>
<div class="form-group row required">
<label for="city" class="col-2 col-form-label">City:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_city" id="p_city" value="" placeholder="Enter City" maxlength="25" required>
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_city" id="m_city" value="" placeholder="Enter City" maxlength="25" required>
</div>
</div>
<div class="form-group row required">
<label for="state" class="col-2 col-form-label">State:</label>
<div class="col-5">
<select class="custom-select browser-default physical" name="p_state" id="p_state" required>
<option value="">--Select State--</option>
<option value="az">Arizona</option>
<option value="ia">Iowa</option>
<option value="mo">Missouri</option>
<option value="ny">New York</option>
<option value="va">Virginia</option>
</select>
</div>
<div class="col-5">
<select class="custom-select browser-default mailing" name="m_state" id="m_state" required>
<option value="">--Select State--</option>
<option value="az">Arizona</option>
<option value="ia">Iowa</option>
<option value="mo">Missouri</option>
<option value="ny">New York</option>
<option value="va">Virginia</option>
</select>
</div>
</div>
<div class="form-group row required">
<label for="zip" class="col-2 col-form-label">Zip:</label>
<div class="col-5">
<input class="form-control physical" type="text" name="p_zip" id="p_zip" value="" pattern="(\d{5}([\-]\d{4})?)" data-dispfld="The required format is: xxxxx or xxxxx-xxxx" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
</div>
<div class="col-5">
<input class="form-control mailing" type="text" name="m_zip" id="m_zip" value="" pattern="(\d{5}([\-]\d{4})?)" data-dispfld="The required format is: xxxxx or xxxxx-xxxx" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<button class="btn btn-outline-secondary" type="button" name="save" id="save">Save</button>
<button class="btn btn-outline-secondary" type="button" name="cancel" id="cancel">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>

You can try something simple like this (untested but should work):
document.getElementsByClassName('is-invalid')[0].scrollIntoView({ behavior: 'smooth' });
This looks for error class is-invalid then does a smooth scroll to the first one found
Add this code after the validation, if there are errors found.

On the button you need to bind the event using a function like the below one:
function submitForm(event) {
for (var i = 0; i < event.elements.length; i++) {
if (event.elements[i].required) {
if (event.elements[i].value == "") {
event.elements[i].focus();
break;
}
}
}
}
I hope this could help ~Rdaksh

How to Show/Hide the Div using Button

First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>

Since you're using Bootstrap, just use the collapse component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
Demo: http://www.codeply.com/go/0jvcrckYOL

A tiny error in your code, you had == where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';

function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.visibility == 'hidden')
divelement.style.visibility = 'visible';
else
divelement.style.visibility = 'hidden';
}
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->

here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});