We Keep Coding

Hidden Textarea Options Showing with Other Options When Submitted

I have made a request PHP form with many select options. One of the select options is name employee to which one of its text area i pre-typed text and selected type="hidden" as shown in form. The problem is when I submit the form request from another select option for example if I select option IT Request from the form and fill its input and submit it & when I get results in HTML email I also get the hidden text area texts that were pre type for Employee select option and it also shows with the tv request details
Also, how can I submit the HTML table in form? Right now I’m doing double work. First, create the hide/show table for users to see and same time I a have hidden text area containing the same data so when the user selects an option from hide/show HTML table it’s submitted it sends the same text pre typed to email
See the image attached i sent a example request from the working form. It is mixing two options. I sent a IT Request and it is mixing the Employee Hidden Textarea
function EmployeeGroup() {
var groups = document.getElementById("groups"); {
var ITRequest = document.getElementById("ITRequest");
ITRequest.style.display = groups.value == "IT" ? "block" : "none";
} {
var Employee = document.getElementById("Employee");
Employee.style.display = groups.value == "EmpGM" ? "block" : "none";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testbox">
<form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3">
<div class="form-group">
<label>Select a Category</label>
<select id="groups" name="groups" class="form-control w-100" required onchange="EmployeeGroup()">
<option value="">--Select an option--</option>
<option value="ITRequest">IT Request</option>
<option value="Employee">New Hire</option>
</select>
</div>
<div class="form-group" id="EmpGM">
<h2>Requestor's Information</h2>
<div class="row">
<div class="col-6">
<label for="userReqEmp">Requestor Name</label>
<input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userNameEmp">Full Name</label>
<input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userComEmp">Comments (Optional)</label>
<textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12" for="userEIDEmp">Employee ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userOIDEmp">One ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userDateEmp">Start Date</label>
</div>
<div class="row">
<div class="col-12">
<input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
</div>
</div>
</div>
<div class="col-6">
<!--GM Group -->
<textarea style="visibility:hidden;" class="textarea" id="acc_GMGroup" name="acc_GMGroup" rows="5">
<u>Domain Group Access:</u>
All Access Folders
<u>Distribution List:</u>
All Manager Emails
<u>Additional Access</u>
VPN Non-Standard
</textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12">Select Department</label>
</div>
<div class="row">
<div class="col-12">
<select id="groups" name="groups" class="form-control w-100">
<option selected value="">Select an option</option>
<option value="GM">GM</option>
<option value="AGM">AGM</option>
</select>
</div>
</div>
<br>
<!-- GM -->
<div class="row">
<div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
<h2>DC GM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
</tr>
<tr>
<td>All Access Folders</td>
</tr>
<tr>
<th>Distribution List</th>
</tr>
<tr>
<td>All Manager Emails</td>
</tr>
<tr>
<th>Additional Access</th>
</tr>
<tr>
<td>VPN Non-Standard</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- General IT Request -->
<div class="form-group" id="IT">
<h2>IT Service Request</h2>
<div class="row">
<div class="col-6">
<label for="userITRequest">Requestor Name</label>
<input type="text" class="form-control w-100" id="userITRequest" name="userITRequest" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label>Select your Department</label>
<select id="groups" name="groups" class="form-control w-100">
<option selected value="">Select an option</option>
<option value="HR">HR</option>
<option value="MPB">MPB</option>
<option value="Management">Management</option>
</select>
</div>
<br><br>
<div class="col-12">
<label for="userITSubject">Subject</label>
<input type="text" class="form-control w-100" id="userITSubject" name="userITSubject" placeholder="Type Here...">
</div>
<br><br>
<div class="col-12">
<label for="userITMessage">Messages</label>
<textarea type="text" class="form-control w-100" id="userITMessage" name="userITMessage" rows="7" placeholder="Type Here..."></textarea>
</div>
<br><br>
<div class="col-12">
<label for="myfile"><strong>Choose a file to upload</strong></label>
<input type="file" id="myfile" name="myfile">
</div>
</div>
</div>
</form>
</div>
$userEmpReq = clean($_POST["userReqEmp"]);
$userEmpName = clean($_POST["userNameEmp"]);
$userEmpDate = clean($_POST["userDateEmp"]);
$userEmpEID = clean($_POST["userEIDEmp"]);
$userEmpOID = clean($_POST["userOIDEmp"]);
isset($_POST["groups"]) ? $groupNew = clean($_POST["groups"]) : $groupNew = "";
$usersGMGroup = nl2br($_POST["acc_GMGroup"]); // DC GM Group -- $usersGMGroup = nl2br($_POST["acc_GMGroup"]);
$usersAGMGroup = nl2br($_POST["acc_AGMGroup"]);
isset($_POST["select-9"]) ? $select9 = clean($_POST["select-9"]) : $select9 = "";
$userEmpManger = clean($_POST["userManagerEmp"]);
$userEmpCom = clean($_POST["userComEmp"]);

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)

Set text field min and max value based on the option selected in previous dropdown

I have a drop down and a text box next to it.
When some value is selected in the dropdown, the textbox should allow min and max characters based on the selected option.
Suppose I select option 1, then the textbox next to it should allow minimum 10 characters and max 16 characters.
How to achieve it?
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="number" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="20" />
</div>
</div>
</div>

you have to change a little your code
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="10/16">name1</option>
<option value="20/32">name2</option>
<option value="30/48">name3</option>
<option value="40/64">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="id" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
and jQuery
$('#prooftype').change(function(){
var tmp = $(this).val().split('/');
$('input#id').attr('minlength',tmp[0]).attr('maxlength',tmp[1]);
})

If you pass the the option value of 12/16 to the backend, obviously the data will reflect. I think you need something like this:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="required">Select Type</label>
<select class="form-control" id="prooftype">
<option value="0/0" disabled> </option>
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group md-form">
<label class="required" for="id" data-error="wrong" data-success="right">
<i class="fa fa-info pr-2"></i>
Enter Identity Card Number
</label>
<input id="inputid" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
</div>
</div>
</div>
And your JQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var selectedopt;
$('#prooftype').change(function(){
selectedopt= $(this).val();
//Add your condition here, and check the selected option value:
if(selectedopt== "name1")
{
//Set input min and max value based on the selected option value.
$('#inputid').attr('minlength','10').attr('maxlength','16');
}
elseif(selectedopt== "name2")
{
$('#inputid').attr('minlength','20').attr('maxlength','25');
}
// And so on........
})
</script>

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

grey out a field until a certain drop down option is selected

I am doing a school task and I'm stuck.
I want to gray out the input field based on what is selected in the drop-down menu.
https://jsfiddle.net/xdvan6vf/
function ccGrey() {
if (document.getElementById("creditcard").onchane){
alert("this doesnt work very well")
}
}
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-16 control-label" for="payment-method">Payment Method</label>
<div class="col-md-16">
<select id="payment-method" name="payment-method" class="form-control order-form">
<option value="1">Online</option>
<option value="2">In Store</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
<div class="col-md-16">
<input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form" onclick="ccGrey">
</div>
</div>

I didn't understand what was your purpose but for handling select selected index changing,you must work on onChange on SELECT element not INPUT event like this:
function selectChanged() {
var x = document.getElementById("payment-method").value;
document.getElementById("creditcard").disabled = (x == 1);
}
//Checking for initial run
selectChanged();
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-16 control-label" for="payment-method">Payment Method</label>
<div class="col-md-16">
<select id="payment-method" name="payment-method" class="form-control order-form" onChange="selectChanged()">
<option value="1">Online</option>
<option value="2">In Store</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-16 control-label" for="creditcard">Credit Card Number</label>
<div class="col-md-16">
<input id="creditcard" name="creditcard" type="text" placeholder="CC Number" class="form-control input-md order-form">
</div>
</div>