如果我点击提交按钮，当输入字段的值为空时，不发送

Question

1. 如何可能不发送时输入字段的值是空的，如果我点击提交按钮?

2. 我有选择-1和选择-2 javascript我怎么能把它的值命名为给定的名称，例如对于select-1，如果我选择AS400(值设置为option-1，但我想将其命名为AS400)，那么当选择select-2的选项时，AS400 New Account((值设置为option-1a，类为option-1，但我想将其命名为AS400 New Account)

3. 当我发送表单时我只得到我选择的和未选择的输入我没有得到我输入的任何文本

$(function() {
// on page load wrap all select-2 options in span so they cannot be selected without specifying select-1
$('#select-2 option:not([default])').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();
$('#select-2 option:not(.' + $('#select-1').val() + ', [default])').wrap('<span/>');
//console.log($('#select-2').val());
});
$('#select-2').trigger('change');
$("#otherFieldGroupMod").hide();
$("#otherFieldGroupRes").hide();
$("#otherFieldGroupOutacc").hide();
$("#outlookAccountDistri").hide();
$("#otherFieldGroupWinacc").hide();
$("#otherFieldGroupKdrive").hide();
$("#otherFieldGroupDcnet").hide();
$("#otherFieldGroupResPass").hide();
$("#otherFieldGroupValpo").hide();
//AS400 NEW ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-1a") {
$("#otherFieldGroupNewacc").show();
} else {
$("#otherFieldGroupNewacc").hide();
}
});
});
//AS400 MODFIY ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-1b") {
$("#otherFieldGroupMod").show();
} else {
$("#otherFieldGroupMod").hide();
}
});
});
//AS400 RESET ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-1c") {
$("#otherFieldGroupRes").show();
} else {
$("#otherFieldGroupRes").hide();
}
});
});
/////////////////////////////////////////////////////////////////
//OUTLOOK NEW ACCOUNT /
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-2a") {
$("#otherFieldGroupOutacc").show();
} else {
$("#otherFieldGroupOutacc").hide();
}
});
});
//Add TO DISTRIBUTION LIST
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-2b") {
$("#outlookAccountDistri").show();
} else {
$("#outlookAccountDistri").hide();
}
});
});
////////////////////////////////////////////////////////////////
//WINDOWS NEW ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-3a") {
$("#otherFieldGroupWinacc").show();
} else {
$("#otherFieldGroupWinacc").hide();
}
});
});
//K DRIVE AND GROUP ACCESS
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-3b") {
$("#otherFieldGroupKdrive").show();
} else {
$("#otherFieldGroupKdrive").hide();
}
});
});
//DC NET ACCESS
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-3c") {
$("#otherFieldGroupDcnet").show();
} else {
$("#otherFieldGroupDcnet").hide();
}
});
});
//RESET PASSWORD ACCESS
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-3d") {
$("#otherFieldGroupResPass").show();
} else {
$("#otherFieldGroupResPass").hide();
}
});
});
////////////////////////////////////////////////////////////////
//VAPLO NEW ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-4a") {
$("#otherFieldGroupValpo").show();
} else {
$("#otherFieldGroupValpo").hide();
}
});
});
///DC NET JOB FUNCTION SCRIPT///
$(function() {
// on page load wrap all select-2 options in span so they cannot be selected without specifying select-1
$('#select-4 option:not([default])').wrap('<span/>');
});
// when select-1 is changed, hide all options that do not have the class corresponding to the value of select-1
$('#select-3').change(function() {
$('#select-4 span > option').unwrap();
$('#select-4 option:not(.' + $('#select-3').val() + ', [default])').wrap('<span/>');
//console.log($('#select-2').val());
});
$('#select-4').trigger('change');
///////////////////// END OF SCRIPTS /////////////////////////////

html,
body {
min-height: 100%;
}
body,
div,
form,
input,
label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
color: #666;
line-height: 22px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h1 {
position: absolute;
margin: 0;
font-size: 36px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 75%;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 20px 0 #095484;
}
.banner {
position: relative;
height: 300px;
background-image: url("/Krishneel/Walgreens Logo's/Walgreens New Logo/banner.png");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
input {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 15px;
font-weight: bold;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 3px 0;
background: transparent;
font-size: 15px;
font-weight: bold;
}
input[type="date"] {
padding: 4px 5px;
}
.item:hover p,
.item:hover i,
.question:hover p,
.question label:hover,
input:hover::placeholder {
color: #095484;
}
.item input:hover {
border: 1px solid transparent;
box-shadow: 0 0 6px 0 #095484;
color: #095484;
}
.item {
margin: 10px 0;
}
input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.item i,
input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
font-size: 20px;
color: #095484;
}
.item i {
right: 2%;
top: 30px;
z-index: 1;
}
[type="date"]::-webkit-calendar-picker-indicator {
right: 1%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.question span {
margin-left: 30px;
}
.btn-block {
margin-top: 10px;
text-align: center;
}
button {
width: 150px;
padding: 10px;
border: none;
border-radius: 5px;
background: #095484;
font-size: 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background: #4286f4;
}
@media (min-width: 568px) {
.name-item,
.city-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.name-item input,
.city-item input,
.name-item div {
width: calc(50% - 20px);
}
.name-item div input {
width: 97%;
}
.name-item div label {
display: block;
padding-bottom: 5px;
}
}
.status label:hover input {
box-shadow: 0 0 5px 0 #095484;
}
.status-item input,
.status-item span {
width: auto;
vertical-align: middle;
}
.status-item input {
margin: 0;
}
.status-item span {
margin: 0 20px 0 5px;
}
textarea {
width: calc(100% - 12px);
padding: 5px;
font-family: Roboto, Arial, sans-serif;
}
</style>

<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">
<div class="banner">
<h1>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;ID Request Form</h1>
</div>
<br>
<p>Please fill out with the information that is requested below and submit the id request form. Thank you!</p>
<div class="form-group">
<label>Request Type</label>
<select id="select-1" name="select-1">
<option default>Choose a Category</option>
<option value="option-1">AS400</option>
<option value="option-2">Outlook</option>
<option value="option-3">Windows</option>
<option value="option-4">Valpo</option>
</select>
<br/>
<label>Choose a Sub-Category</label>
<select id="select-2" name="select-2">
<option default>Choose a Sub-Category</option>
<option value="option-1a" class="option-1">AS400 New Account</option>
<option value="option-1b" class="option-1">Modify Account</option>
<option value="option-1c" class="option-1">Reset Password</option>
<option value="option-2a" class="option-2">Outlook New Account</option>
<option value="option-2b" class="option-2">Add to Distribution List</option>
<option value="option-3a" class="option-3">Windows New Account</option>
<option value="option-3b" class="option-3">K Drive and Group Access</option>
<option value="option-3c" class="option-3">DC Net</option>
<option value="option-3d" class="option-3">Password Reset</option>
<option value="option-4a" class="option-4">Valpo New Account
<!--  -->
</option>
</select>
</div>
<hr>
<!----------------------------------------------------- AS400 Account------------------------------------------->
<!--AS400 New Account-->
<div id="otherFieldGroupNewacc">
<h2>AS400 New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userName">Requester (Full Name)</label>
<input type="text" id="userName" name="userName" 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="userName" 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" placeholder="*Click in box for Job Category List*">
<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>
<option value="FM OUT = Outbound Funtion Manager">FM OUT = Outbound Funtion Manager</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="userName">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userName" name="userName" 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><br>
<br><br>
<div class="col-6">
<label for="userAS400">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400" name="userAS400" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="selectJobs">New Job Category></label>
<select id="selectJobs" name="selectJobs" placeholder="*Click in box for Job Category List*">
<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="userNewAS400">New AS400 ID</label>
<input type="text" class="form-control w-100" id="userNewAS400" name="userNewAS400" 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="userName">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userName" name="userName" 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><br>
<br><br>
<div class="col-6">
<label for="userAS400">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400" name="userAS400" placeholder="Type Here...">
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------->
<!----------------------------------------------------Outlook Account------------------------------------------------------------------>
<!--New Account-->
<div class="form-group" id="otherFieldGroupOutacc">
<h2>Outlook New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userName">Full Name</label>
<input type="text" class="form-control w-100" id="userName" name="userName" 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><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
</div>
</div>
<!--Add to Distribution List-->
<div class="form-group" id="outlookAccountDistri">
<h2>Add to Distribution List</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userName">Full Name</label>
<input type="text" class="form-control w-100" id="userName" name="userName" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="selectdistri">Select a Distribution List</label>
<select id="selectdistri" name="selectdistri" placeholder="*Click in box for Distribution List*">
<option default>Choose a Distribution List</option>
<option value="Woodland Location Control">Woodland Location Control</option>
<option value="Woodland Management">Woodland Management</option>
<option value="Woodland SR Managers">Woodland SR Managers</option>
<option value="Woodland HR">Woodland HR</option>
<option value="Woodland IT Support">Woodland IT Support</option>
<option value="Woodland SAIL Coordinators">Woodland SAIL Coordinators</option>
<option value="Woodland Fleet Managers">Woodland Fleet Managers</option>
<option value="Woodland ComputerRoomOperators">Woodland ComputerRoomOperators</option>
<option value="WoodlandMTVMSN">WoodlandMTVMSN</option>
<option value="Woodland Inventory">Woodland Inventory</option>
<option value="WDL_A">WDL_A</option>
<option value="WDL_B">WDL_B</option>
<option value="Woodland DC Zero Waste">Woodland DC Zero Waste</option>
<option value="Woodland CoE Assessment Team">Woodland CoE Assessment Team</option>
<option value="Woodland DC Inbound">Woodland DC Inbound</option>
<option value="Woodland Inbound Managers">Woodland Inbound Managers</option>
<option value="Woodland Supply Chain and Logistics Member Group">Woodland Supply Chain and Logistics Member Group</option>
<option value="Woodland All Company">Woodland All Company</option>
</select>
</div>
</div>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------->
<!----------------------------------------------------Windows Account------------------------------------------------------------------>
<!--Windows New Account-->
<div class="form-group" id="otherFieldGroupWinacc">
<h2>Windows New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userName">Full Name</label>
<input type="text" class="form-control w-100" id="userName" name="userName" 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><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userMirror"> Mirror Account ONE ID</label>
<input type="text" class="form-control w-100" id="userMirror" name="userMirror" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userComment">Comments</label>
<input type="text" class="form-control w-100" id="userComment" name="userComment" placeholder="Type Here...">
</div>
</div>
</div>
<!--K Drive and Group Access-->
<div class="form-group" id="otherFieldGroupKdrive">
<h2>K Drive and Group Access</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userName">Full Name</label>
<input type="text" class="form-control w-100" id="userName" name="userName" 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><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userMirror"> Mirror Account ONE ID</label>
<input type="text" class="form-control w-100" id="userMirror" name="userMirror" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userComment">Comments</label>
<input type="text" class="form-control w-100" id="userComment" name="userComment" placeholder="Type Here...">
</div>
</div>
</div>
<!--DC Net Access-->
<div class="form-group" id="otherFieldGroupDcnet">
<h2>DC Net Access</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userName">Full Name</label>
<input type="text" class="form-control w-100" id="userName" name="userName" 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><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label> Select your Job Title</label>
<select id="select-3">
<option default>Select an option</option>
<option value="option-1">TM</option>
<option value="option-2">DCS</option>
<option value="option-3">AP Officer</option>
<option value="option-4">IO</option>
<option value="option-5">AGM</option>
<option value="option-6">GM</option>
<option value="option-7">IT Support</option>
</select>
<br><br>
<label>Select your Department & Shift</label>
<select id="select-4">
<option default>Select your option</option>
<option value="option-1a" class="option-1">Cost Recovery</option>
<option value="option-1b" class="option-1">Lean Captain</option>
<option value="option-2a" class="option-2">SC-AM</option>
<option value="option-2b" class="option-2">SC-PM</option>
<option value="option-2c" class="option-2">FC-AM</option>
<option value="option-2d" class="option-2">FC-PM</option>
<option value="option-2e" class="option-2">INB-AM</option>
<option value="option-2f" class="option-2">INB-PM</option>
<option value="option-2g" class="option-2">Shipping-AM</option>
<option value="option-2h" class="option-2">Shipping-PM</option>
</select>
</div>
</div>
</div>
<!--Password Access-->
<div class="form-group" id="otherFieldGroupResPass">
<h2>Reset Windows Password</h2>
<hr>
<div class="col-6">
<label for="otherField11">Click the link for Reset Password Help</label>
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
</div>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------->
<!----------------------------------------------------VALPO Account------------------------------------------------------------------>
<!--New Account-->
<div class="form-group" id="otherFieldGroupValpo">
<h2>Valpo New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userName">Full Name</label>
<input type="text" class="form-control w-100" id="userName" name="userName" 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><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userBadge">Badge Number</label>
<input type="text" class="form-control w-100" id="userBadge" name="userBadge" placeholder="Type Here...">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-6">
<label for="userEmail">Enter your Email</label>
<input type="text" class="form-control w-100" id="userEmail" name="userEmail" placeholder="Type Here...">
</div>
</div>
</div>
<input type="submit" name="send" class="btn-submit" value="Send" />
<div id="statusMessage">
<?php
if (! empty($message)) {
?>
<p class='<?php echo $type; ?>Message'>
<?php echo $message; ?>
</p>
<?php
}
?>
</div>
</form>
</div>

Answer 1

你可以使用"required"属性。

如果需要输入-当你点击"提交"时;在后台，必填字段是否有值将被检查。如果没有-您将看到浏览器的默认消息，该字段是必需的。

查看这里的默认消息

请看这里- https://www.w3schools.com/tags/att_input_required.asp

Answer 2

可以为input使用required属性。这将防止在浏览器中提交表单，直到所有必需的字段都完成。

<input type="text" id="email" name="email" placeholder="Type your email here..." required>

对于select下拉列表，您需要将required属性添加到select元素。如果您不希望默认选项对已完成的字段进行计数，则具有default属性的option应该定义value=""。

<select id="preference" name="preference" required>
<option value="" default>Select</option>
<option value="r" default>Red</option>
<option value="g" default>Green</option>
<option value="b" default>Blue</option>
</select>