文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >发送表单时不要发送或不显示空/空输入

问发送表单时不要发送或不显示空/空输入
EN

Stack Overflow用户
提问于 2021-09-17 01:53:17
回答 1查看 139关注 0票数 2

我的代码有两个问题或问题

如果单击submit按钮，当输入字段的值为空时，如何实现

  1. ？

  1. ，我有select-1和select-2 javascript，如果我选择AS400 (该值设置为选项-1，但我希望将其命名为AS400)，如何将其值命名为给定的名称-1a类是选项-1，那么当选择选择-2 AS400新帐户的选项时(值设置为选项1a类是选项-1，但我希望将其命名为AS400新帐户)

。

​

代码语言：javascript
复制
$(function() {
  
  $('#select-2 option:not([default])').wrap('<span/>');
});

$('#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();
$("#otherFieldGroupRem").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();
    }
  });
});

//AS400 REMOVE ACCOUNT SCRIPT//
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-1d") {
      $("#otherFieldGroupRem").show();
    } else {
      $("#otherFieldGroupRem").hide();
    }
  });
});
//Disabling a text input field with regular JavaScript.
document.getElementById("hideInput").disabled = true;


//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();
    }
  });
});

$('#select-3').change(function() {
  $('#select-4 span > option').unwrap();
  $('#select-4 option:not(.' + $('#select-3').val() + ', [default])').wrap('<span/>');
  //console.log($('#select-2').val());
  //if ($(this).val() == "option-1") {
  // $("#select-1a").show();
  // $("#select-1b").show();
  //  }
});

$('#select-4').trigger('change');



//DO NOT SEND EMPTY INPUT FIELDS //
$(document).ready(function() {
  $("form").submit(function() {
    $("input").each(function(index, obj) {
      if ($(obj).val() == "") {
        $(obj).remove();
      }
    });
  });
});
代码语言：javascript
复制
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>
代码语言：javascript
复制
<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-1d" class="option-1">Remove 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 New Account-->
    <div class="form-group" id="otherFieldGroupNewacc">
      <h2>AS400 New Account</h2>
      <hr>
      <div class="row">
        <div class="col-6">
          <label for="userRequestor">Requestor 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" 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="userRequestor">Requester (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><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>
            <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>
    <!--Reinstate AS400 Account-->
    <div class="form-group" id="otherFieldGroupRes">
      <h2>AS400 Reinstate Password</h2>
      <hr>
      <div class="row">
        <div class="col-6">
          <label for="userRequestor">Requester (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><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>
    <!--Remove AS400 Account-->
    <div class="form-group" id="otherFieldGroupRem">
      <h2>Remove AS400 Account</h2>
      <hr>
      <div class="row">
        <div class="col-6">
          <label for="userRequestor">Requester (Full Name)</label>
          <input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
        </div>
        <br>
        <div class="col-6">
          <label for="userTM">Terminated TM (Full Name)</label>
          <input type="text" class="form-control w-100" id="userTM" NAME="userTM" placeholder="Type Here...">
        </div>
        <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="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="hideInput">Reason</label>
          <input type="text" id="hideInput" value="No Longer With The Company!">
        </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="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="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="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="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="select-5">Select a Distribution List</label>
          <select id="select-5" name="select-5" placeholder="*Click in box for Distribution List*">
            <option default>Choose a Distribution List</option>
            <option value="WoodlandDInsuffAitems">WoodlandDInsuffAitems</option>
            <option value="WoodlandOutboundManagers">WoodlandOutboundManagers</option>
            <option value="WoodlandSrManagers">WoodlandSrManagers</option>
            <option value="WoodlandExpiredItems">WoodlandExpiredItems</option>
            <option value="WoodlandFleetManagers">WoodlandFleetManagers</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="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="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="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="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="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="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>
        <div class="col-6">
          <label> Select your Job Title</label>
          <select id="select-3" name="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>
          <select id="select-4" name="select-4">
            <option default>Select your Department & Shift</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>
          </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="http://wddc.walgreens.com/Forms/Password Resets & Account Unlocks for Direct Reports.pdf">Password Resets & Account Unlocks for Direct Reports</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="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="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>

​

javascript
html
jquery
css
EN

回答 1

Stack Overflow用户

发布于 2021-09-17 03:23:22

您不需要添加额外的JS function来检查字段中的数据是否在提交时存在。您只需将required添加到输入字段就可以做到这一点。

如果您想将这些字段中的任何一个作为optional，那么不要添加require

代码语言：javascript
复制
<div>
      <form>

        <label>Full Name
          <input type="text" placeholder="Type your name..." required />
        </label>
        <br/><br/>

        <label>Employee ID
          <input type="text" placeholder="Type Id Here..." required />
        </label>
        <br/><br/>

        <label>ONE ID (Formally Authenticator ID)
          <input type="text" placeholder="Type Id Here..." required />
        </label>
        <br/><br/>

        <label>Badge Number
          <input type="text" placeholder="Type Badge Here..." required />
        </label>
        <br/><br/>

        <label>Enter your Email:<input type="text" placeholder="Type Here..." required/></label>
        <br/><br/>

        <input type="submit" value="Send" />

      </form>
    </div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69216916

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档