not to send when a value of the input field is empty if I click the submit button-CodePudding

How is it possible not to send when a value of the input field is empty if I click the submit button?
I have the select-1 and select-2 javascript how can I name its value to the name given for example for select-1 if I select AS400 (the value is set to option-1 but I want to name it AS400) then when selecting the options for select-2 AS400 New Account((the value is set to option-1a class is option-1 but I want to name it AS400 New Account)
When I send the form I only get the inputs I selected and not selected and i don't get any of the text inputs I entered

$(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>

CodePudding user response：

You can use "required" property on the input fields you want to be required.

if an input is required- when you click on "submit" behind the scene the required field are being checked if they have a value. if not- you will see a default message from the browser that this field is required.

see here the default message please take a look here- https://www.w3schools.com/tags/att_input_required.asp

CodePudding user response：

You can use the required attribute for input. This will prevent form submission in browsers until all required fields are complete.

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

For select dropdown, you will want to add the required attribute to the select element. Your option with the default attribute should have value="" defined if you don't want the default option to count for a completed field.

<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>