We Keep Coding

Add Third Select Drop Down and Auto Populate Based on Selection

I have made a request form for my group to make it easier for them to request for help desk. At the moment I have two dropdowns - I have the main request dropdown when the user selects from the first dropdown selection it goes to the second dropdown selection for the user to select. I want to add the third dropdown so when the user selects from the second dropdown it opens more selection in the third dropdown based on what category the user has selected for the Second dropdown.
How can i add third select option and then show the input for the selection
$(function() {
// on page load wrap all select-2 options in span so they cannot be selected without specifying select-1
$('#select-2 option:not([selected])').wrap('<span/>');
});
// when select-1 is changed, hide all options that do not have the class corresponding to the value of select-1
$('#select-1').change(function() {
$('#select-2 span > option').unwrap();
console.log($('#select-1'));
$('#select-2 option:not(.' + $('#select-1').val() + ', [selected])').wrap('<span/>');
//console.log($('#select-2').val());
});
$('#select-2').trigger('change');
$(document).ready(function() {
$("#otherFieldGroupNewacc").hide();
$("#otherFieldGroupMod").hide();
$("#otherFieldGroupRes").hide();
$("#otherFieldGroupRem").hide()
});
//----------------------------------Second Dropdown----------------------------------------------//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "AS400 New Account") { //AS400 New Account //
$("#otherFieldGroupNewacc").show();
$('#otherFieldGroupNewacc').attr('required', '');
} else {
$("#otherFieldGroupNewacc").hide();
$('#otherFieldGroupNewacc').removeAttr('required');
}
if ($(this).val() == "Modify Account") { //AS400 Modify Account //
$("#otherFieldGroupMod").show();
} else {
$("#otherFieldGroupMod").hide();
}
if ($(this).val() == "Reset Password") { //AS400 Reinstate Account //
$("#otherFieldGroupRes").show();
} else {
$("#otherFieldGroupRes").hide();
}
if ($(this).val() == "Remove Password") { //AS400 Remove Account //
$("#otherFieldGroupRem").show();
} else {
$("#otherFieldGroupRem").hide();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>Request Type</label>
<select id="select-1" name="select-1" class="form-control w-100" required>
<option selected value="">--Select an option--</option>
<option value="AS400">AS400</option>
<!-- "option-1" -->
<option value="EETV">EETV</option>
<!-- "option-2" -->
<option value="Outlook">Outlook</option>
<!-- "option-3" -->
<option value="Windows">Windows</option>
<!-- "option-4" -->
</select>
<br/>
<label>Choose a Sub-Category</label>
<select id="select-2" name="select-2" class="form-control w-100" required>
<option selected value="">--Select an option--</option>
<option value="AS400 New Account" class="AS400">New Account</option>
<!-- "option-1a" -->
<option value="Modify Account" class="EETV">Modify Account</option>
<!-- "option-1b" -->
<option value="Reset Password" class="Outlook">Reset Password</option>
<!-- "option-1c" -->
<option value="Remove Password" class="Windows">Remove Account</option>
<!-- "option-1d" -->
</select>
</div>
<hr>
<!--AS400 New Account-->
<div class="form-group" id="otherFieldGroupNewacc">
<h2>AS400 New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTM">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTM" name="userTM" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="selectJob">New Job Category</label>
<select id="selectJob" name="selectJob" class="form-control w-100" placeholder="*Click in box for Job Category List*">
<option disabled selected value="">Select an option</option>
<option value="NO CHANGE">NO CHANGE</option>
<option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
<option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
<option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>
</select>
</div>
<br>
<div class="col-6">
<label for="userNewAS400">New AS400 ID</label>
<input type="text" class="form-control w-100" id="userNewAS400" name="userNewAS400" placeholder="Type Here...">
</div>
</div>
</div>
<!--Modify AS400 Account-->
<div class="form-group" id="otherFieldGroupMod">
<h2>AS400 Modify Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestorMod">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestorMod" name="userRequestorMod" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTMMod">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTMMod" name="userTMMod" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployeeMod">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployeeMod" name="userEmployeeMod" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userAS400Mod">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400Mod" name="userAS400Mod" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="selectJobsMod">New Job Category</label>
<select id="selectJobsMod" name="selectJobsMod" class="form-control w-100" placeholder="*Click in box for Job Category List*">
<option disabled selected value="">Select an option</option>
<option value="NO CHANGE">NO CHANGE</option>
<option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
<option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
<option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>
<option value="DCM = DC Manager">DCM = DC Manager</option>
<option value="FM IN = Inbound Funtion Manager">FM IN = Inbound Funtion Manager</option>
</select>
</div>
<br>
<div class="col-6">
<label for="userNewAS400Mod">New AS400 ID <strong>***Leave Blank If No Change***</strong></label>
<input type="text" class="form-control w-100" id="userNewAS400Mod" name="userNewAS400Mod" placeholder="Type Here...">
</div>
</div>
</div>
<!--Reinstate AS400 Account-->
<div class="form-group" id="otherFieldGroupRes">
<h2>AS400 Reinstate Password</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestorRe">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestorRe" name="userRequestorRe" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTMRe">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTMRe" name="userTMRe" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployeeRe">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployeeRe" name="userEmployeeRe" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userAS400Re">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400Re" name="userAS400Re" placeholder="Type Here...">
</div>
</div>
</div>
<!--Remove AS400 Account-->
<div class="form-group" id="otherFieldGroupRem">
<h2>AS400 Remove Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestorRes">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestorRes" name="userRequestorRes" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userTMRes">Terminated TM (Full Name)</label>
<input type="text" class="form-control w-100" id="userTMRes" name="userTMRes" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userEmployeeRes">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployeeRes" name="userEmployeeRes" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userAS400Res">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400Res" name="userAS400Res" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="hideInputRes">Reason</label>
<input type="text" class="form-control w-100" id="hideInputRes" name="hideInputRes" title="Example: Fired, Retired, Leave of Absence, etc..." placeholder="Type Here...">
</div>
</div>
</div>

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)

User input validation Bootstrap 4 and JQuery?

I started learning Bootstrap 4 validation and there are few things that are not clear to me. Some of the situations are confusing in case where input fields that are not required are showing valid-feedback / invalid-feedback. Also, I'm wondering if there is a way to trigger validation with button on click instead of submit process? Here is example of what I have so far:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<fieldset class="fieldset-info">
<legend class="hcs-legend">Add New Profile</legend>
<form name="new-profile" id="new-profile" class="needs-validation" novalidate>
<div class="form-group required">
<label for="agency">Profile Name:</label>
<input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
<div class="invalid-feedback">Please provide Profile Name</div>
</div>
<div class="form-group required">
<label>Type:</label>
<select class="custom-select browser-default" name="type" id="type" required>
<option value="">--Select Type--</option>
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<div class="invalid-feedback">Please provide Type</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="fname">First Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
<div class="invalid-feedback">Please provide First Name</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
<div class="col-10">
<input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="lname">Last Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
<div class="invalid-feedback">Please provide Last Name</div>
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="email">Email:</label>
<div class="col-10">
<input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
<div class="invalid-feedback">Please provide Email</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Physical Address</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<div class="row">
<label class="col-3 col-form-label" for="Addr1">Address 1:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
<div class="invalid-feedback">Please provide Address 1</div>
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="city">City:</label>
<div class="col-10">
<input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
<div class="invalid-feedback">Please provide City</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<div class="col-3">
<label for="Addr2">Address 2:</label>
</div>
<div class="col-9">
<input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="state">State:</label>
<div class="col-10">
<select class="custom-select browser-default" name="state" id="state" required>
<option value="">--Select State--</option>
<option value="ny">New York</option>
<option value="fl">Florida</option>
</select>
<div class="invalid-feedback">Please provide State</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr3">Address 3:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="zip">Zip:</label>
<div class="col-10">
<input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
<div class="invalid-feedback">Please provide Zip</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr4">Address 4:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Access options</u></strong></div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
<label class="form-check-label" for="flag_1">Allow for access level 1?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
<label class="form-check-label" for="flag_2">Allow for access level 2?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
<label class="form-check-label" for="flag_3">Allow for access level 3?</label>
</div>
<div class="row">
<div class="col-12 text-center">
<input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
</div>
</div>
</form>
</fieldset>
</div>
In the example above I used the code for validation form the Bootstrap web site. There is very little explained on how this works. I have few questions:
How I can trigger validation on click since I will use ajax to send request to the server?
Why fields that are not required are turning green (color around the input)?
How I can use pattern attribute to validate input value if it's correct or not with custom message for the user?
Please let me know if anyone knows how to achieve this?
Thank you.

Validate function of jquery is not working

I wrote SignupForm function to validate, but this is giving an error that function is not defined.Please check the code snippet.I am using jquery validate function.your help will be appreciated.Thank you.
$(function() {
var $signupForm = $('#SignupForm');
$signupForm.validate({
errorElement: 'em'
});
$signupForm.formToWizard({
submitButton: 'SaveAccount',
nextBtnClass: 'btn btn-primary next',
prevBtnClass: 'btn btn-default prev',
buttonTag: 'button',
validateBeforeNext: function(form, step) {
var stepIsValid = true;
var validator = form.validate();
$(':input', step).each(function(index) {
var xy = validator.element(this);
stepIsValid = stepIsValid && (typeof xy == 'undefined' || xy);
});
return stepIsValid;
},
progress: function(i, count) {
$('#progress-complete').width('' + (i / count * 100) + '%');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://raw.githubusercontent.com/artoodetoo/formToWizard/master/jquery.formtowizard.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<form id="SignupForm" action="">
<fieldset>
<legend>Account information</legend>
<div class="form-group">
<label for="Name">Name</label>
<input id="Name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label for="Email">Email</label>
<input id="Email" type="email" class="form-control" required />
</div>
<div class="form-group">
<label for="Password">Password</label>
<input id="Password" type="password" class="form-control" />
</div>
</fieldset>
<fieldset>
<legend>Company information</legend>
<div class="form-group">
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" class="form-control" required />
</div>
<div class="form-group">
<label for="Website">Website</label>
<input id="Website" type="text" class="form-control" />
</div>
<div class="form-group">
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" class="form-control" />
</div>
</fieldset>
<fieldset class="form-horizontal" role="form">
<legend>Billing information</legend>
<div class="form-group">
<label for="NameOnCard" class="col-sm-2 control-label">Name on Card</label>
<div class="col-sm-10"><input id="NameOnCard" type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label for="CardNumber" class="col-sm-2 control-label">Card Number</label>
<div class="col-sm-10"><input id="CardNumber" type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label for="CreditcardMonth" class="col-sm-2 control-label">Expiration</label>
<div class="col-sm-10">
<div class="row">
<div class="col-xs-3">
<select id="CreditcardMonth" class="form-control col-sm-2">
<option value="1">1</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-3">
<select id="CreditcardYear" class="form-control">
<option value="2009">2009</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="Address1" class="col-sm-2 control-label">Address 1</label>
<div class="col-sm-10"><input id="Address1" type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label for="Address2" class="col-sm-2 control-label">Address 2</label>
<div class="col-sm-10"><input id="Address2" type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label for="Zip" class="col-sm-2 control-label">ZIP</label>
<div class="col-sm-4"><input id="Zip" type="text" class="form-control" /></div>
<label for="Country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-4"><select id="Country" class="form-control">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="GB">United Kingdom (Great Britain)</option>
<option value="AU">Australia</option>
<option value="YE">Yemen</option>
<option value="ZR">Zaire</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
</fieldset>
<p>
<button id="SaveAccount" class="btn btn-primary submit">Submit form</button>
</p>
</form>

Seems you did not added jQuery library in your code. http://code.jquery.com/jquery-3.1.1.min.js
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script>
$( function() {
var $signupForm = $( '#SignupForm' );
$signupForm.validate({errorElement: 'em'});
});
</script>
<form id="SignupForm" action="">
<fieldset>
<legend>Account information</legend>
<div class="form-group">
<label for="Name">Name</label>
<input id="Name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label for="Email">Email</label>
<input id="Email" type="email" class="form-control" required />
</div>
<div class="form-group">
<label for="Password">Password</label>
<input id="Password" type="password" class="form-control" />
</div>
</fieldset>
<fieldset>
<legend>Company information</legend>
<div class="form-group">
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" class="form-control" required />
</div>
<div class="form-group">
<label for="Website">Website</label>
<input id="Website" type="text" class="form-control" />
</div>
<div class="form-group">
<label for="CompanyEmail">CompanyEmail</label>
<input id="CompanyEmail" type="text" class="form-control" />
</div>
</fieldset>
<fieldset class="form-horizontal" role="form">
<legend>Billing information</legend>
<div class="form-group">
<label for="NameOnCard" class="col-sm-2 control-label">Name on Card</label>
<div class="col-sm-10"><input id="NameOnCard" type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label for="CardNumber" class="col-sm-2 control-label">Card Number</label>
<div class="col-sm-10"><input id="CardNumber" type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label for="CreditcardMonth" class="col-sm-2 control-label">Expiration</label>
<div class="col-sm-10"><div class="row">
<div class="col-xs-3">
<select id="CreditcardMonth" class="form-control col-sm-2">
<option value="1">1</option>
<option value="12">12</option>
</select>
</div>
<div class="col-xs-3">
<select id="CreditcardYear" class="form-control">
<option value="2009">2009</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>
</div>
</div></div>
</div>
<div class="form-group">
<label for="Address1" class="col-sm-2 control-label">Address 1</label>
<div class="col-sm-10"><input id="Address1" type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label for="Address2" class="col-sm-2 control-label">Address 2</label>
<div class="col-sm-10"><input id="Address2" type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label for="Zip" class="col-sm-2 control-label">ZIP</label>
<div class="col-sm-4"><input id="Zip" type="text" class="form-control" /></div>
<label for="Country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-4"><select id="Country" class="form-control">
<option value="CA">Canada</option>
<option value="US">United States of America</option>
<option value="GB">United Kingdom (Great Britain)</option>
<option value="AU">Australia</option>
<option value="YE">Yemen</option>
<option value="ZR">Zaire</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
</fieldset>
<p>
<button id="SaveAccount" class="btn btn-primary submit">Submit form</button>
</p>
</form>
MG

Form validation with parsley js. Alphanumeric and password confirmation

Currently validating a multistep form using parsley.js. All other required attributes works fine and validate properly. I just need help extending the form validation to ensure that the values for both password and confirm password fields match
$(function () {
var $sections = $('.form-section');
function navigateTo(index) {
// Mark the current section with the class 'current'
$sections
.removeClass('current')
.eq(index)
.addClass('current');
// Show only the navigation buttons that make sense for the current section:
$('.form-navigation .previous').toggle(index > 0);
var atTheEnd = index >= $sections.length - 1;
$('.form-navigation .next').toggle(!atTheEnd);
$('.form-navigation [type=submit]').toggle(atTheEnd);
}
function curIndex() {
// Return the current index by looking at which section has the class 'current'
return $sections.index($sections.filter('.current'));
}
// Previous button is easy, just go back
$('.form-navigation .previous').click(function() {
navigateTo(curIndex() - 1);
});
// Next button goes forward iff current block validates
$('.form-navigation .next').click(function() {
if ($('#individualForm').parsley().validate({group: 'block-' + curIndex()}))
navigateTo(curIndex() + 1);
});
// Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
$sections.each(function(index, section) {
$(section).find(':input').attr('data-parsley-group', 'block-' + index);
});
navigateTo(0); // Start at the beginning
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.5.1/parsley.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="individualForm" action="" class="indivform" method="post">
<div id="individualForm1" class="form-section">
</div>
<div class="regForm">
<div class="form-group formGroup">
<label for="usertype"> Tell us who you are </label>
<select class="form-control allForms" name="usertype" id="usertype">
<option selected>Student</option>
<option>Intern</option>
<option>National Service</option>
<option>Entry-Level Employee</option>
<option>Mid-level Manager</option>
<option>Senior-Level Manager</option>
<option>Executive</option>
<option>Foreign Expert</option>
</select>
</div>
</div>
<div class="form-group formGroup">
<label for="email"> Email Address</label>
<input type="email" name="email" id="email" class="form-control allForms" required placeholder="Enter your email address">
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="password"> Password </label>
<input type="password" name="password" id="password" minlength="6" class="form-control allForms" required placeholder="Enter password">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="password_confirmation"> Confirm Password </label>
<input type="password" name="password_confirmation" minlength="6" id="password_confirmation" class="form-control allForms" required placeholder="Re-enter password">
</div>
</div>
</div>
</div>
<div id="individualForm2" class="form-section">
<div class="text-center stepImages">
<img src="img/step-2.png" alt="step one image">
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="firstname"> First Name</label>
<input type="text" name="firstname" id="firstname" class="form-control allForms" required placeholder="Enter first name">
</div>
<div class="form-group formGroup">
<label for="country">Your location</label>
<select class="form-control allForms" name="country" id="country" data-placeholder="Select country">
<option value="0">Getting your location...</option>
#if(isset($countries))
#foreach($countries as $country)
<option value="{{ $country->id }}" title="{{ $country->country_code }}">{{ $country->name }}</option>
#endforeach
#endif
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="form-group formGroup">
<label for="lastname">Contact Last Name</label>
<input type="text" name="lastname" id="lastname" class="form-control allForms" required placeholder="Enter last name">
</div>
<div class="genderBox2 form-group formGroup">
<br>
<div class="radio-inline">
<label>
<input type="radio" name="gender" value="Male" checked="" >
Male
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="gender" value="Female">
Female
</label>
</div>
</div>
</div>
</div>
<div class="form-group formGroup">
{{--<div class="pi-col-sm-3">--}}
<div class="form-group">
<input name="dialcode" id="dialcode" class="form-control" placeholder="Dial Code" type="text">
</div>
{{--</div>--}}
<div class="form-group">
<input name="dialcode" id="dialcode" class="form-control" placeholder="Dial Code" required type="text">
</div>
<label for="individual_phone_number"> Phone Number</label>
<input type="text" name="phone" id="individual_phone_number" class="form-control allForms" required data-parsley-type="digits" placeholder="Enter your phone number">
</div>
</div>
<div class="modal-footer modalFooter form-navigation">
<button class="previous btn btn-success pull-left" id="newUserSubmitBtn" type="button"> Prev < </button>
<button class="next btn btn-success pull-right" id="newUserSubmitBtn" type="button"> Next > </button>
<button class="btn btn-default pull-right" id="individualSubmitBtn" type="submit"> Finish </button>
<span class="clearfix"></span>
</div>
</form>
and for both to be alphanumeric.

Should be easy using data-parsley-equalto and data-parsley-type="alphanum"