Question

我有一个带有一些数据验证的HTML数据输入代码。输入客户号后，选择“查找”。为了查找客户详细信息，它仍然要求提供客户头衔＆＃39;。

如何解决此问题？

＆＃13;

<HTML>
<BODY bgcolor="AliceBlue">
<link rel='stylesheet' href='input-style.css' type='text/css' />
<form method="post" action="customers.php">
<table width="550px" align = "center">
<colgroup>
    <col span="4"  style="background-color:cyan">
  </colgroup>

<thead>
  <tr>
     <th>Customer Details</th>
  </tr>
 </thead>

</tr>
<tr>
 <td valign="top">
 </td>
 <td valign="top">
 </td>
</tr>

</tr>
<tr>
 <td valign="top">
  <label for="cust_no">Customer No.: </label>
 </td>
 <td valign="top">
  <input  type="text" name="cust_no" maxlength="10" size="10" required>
<input type="submit"  formaction="/find_customers.php" value="Find">   
 </td>
</tr>

</tr>
<tr>
 <td valign="top">
  <label for="cust_title">Customer Title</label>
 </td>
 <td valign="top">
  <input  type="text" name="cust_title" maxlength="10" size="10" required>
 </td>
</tr>

</tr>
<tr>
 <td valign="top">
  <label for="surname">Surname </label>
 </td>
 <td valign="top">
  <input  type="text" name="surname" maxlength="20" size="20" required>
 </td>
</tr>

</tr>
<tr>
 <td valign="top">
  <label for="fstname">First Name</label>
 </td>
 <td valign="top">
  <input  type="text" name="fstname" maxlength="50" size="30" required>
 </td>
</tr>

</tr>
<tr>
 <td valign="top">
  <label for="midname">Middle Name</label>
 </td>
 <td valign="top">
  <input  type="text" name="midname" maxlength="50" size="30">
 </td>
</tr>

</tr>
<tr>
 <td valign="top">
  <label for="sex">Sex</label>
 </td>
 <td valign="top">
  <select name="sex">
    <option value="Female">Female</option>
    <option value="Male">Male</option>
  </select>

 <label for="dob">Date of Birth</label>
<input  type="date" name="dob" maxlength="10" size="10" required>
</tr>

</tr>
<tr>
<td valign="top">
  <label for="profession">Profession</label>
 </td>
 <td valign="top">
  <input  type="text" name="profession" maxlength="30" size="30">
 </td>
</tr>

</tr>
<tr>
<td valign="top">
  <label for="cust_type">Customer Type</label>
 </td>
 <td valign="top">
 <select name="cust_type">
    <option value="Individual">Individual</option>
    <option value="Group">Group</option>
   <option value="Company">Company</option>
  </select>
 </td>
</tr>

</tr>
<tr>
<td valign="top">
  <label for="p_addr1">Postal Address</label>
 </td>
 <td valign="top">
  <input  type="text" name="p_addr1" maxlength="20" size="20">
  <input  type="text" name="p_addr2" maxlength="20" size="20">
</tr>

</tr>
<tr>
<td valign="top">
  <label for="l_addr1">Location Address</label>
 </td>
 <td valign="top">
  <input  type="text" name="l_addr1" maxlength="20" size="20">
 <input  type="text" name="l_addr2" maxlength="20" size="20">
</tr>

</tr>
<tr>
<td valign="top">
  <label for="phone_no">Phone No.</label>
 </td>
 <td valign="top">
  <input  type="text" name="phone_no" maxlength="20" size="20" required>
 </td>
</tr>

</tr>
<tr>
<td valign="top">
  <label for="id_type ">ID Type</label>
 </td>
 <td valign="top">
 <select name="id_type ">
    <option value="Driver's License">Driver's License</option>
    <option value="Passport">Passport</option>
    <option value="National ID">National ID</option>
  </select>

  <label for="id_no ">ID No.</label>
  <input  type="text" name="id_no " maxlength="20" size="20" required>
</tr>
 
<tr>
 <td valign="top">
  <label for="mon_basic">Monthly Basic Salary</label>
 </td>
 <td valign="top">
  <input  type="number" name="mon_basic" maxlength="5" size="5"  min="0"  step = "any" value="0.00" required>
 </td>
</tr>

</tr>
<tr>
 <td valign="top">
  <label for="year_basic">Annual Basic Salary</label>
 </td>
 <td valign="top">
  <input  type="number" name="year_basic" maxlength="5" size="5" min="0"  step = "any" value="0.00" required>
  <label for="cust_status ">Customer Status</label>
   <select name="cust_status">
    <option value="Active">Active</option>
    <option value="Dormant">Dormant</option>
    <option value="Closed">Closed</option>
  </select>
</tr>


</tr>
<tr>
<td valign="top">
  <label for="employer">Employer</label>
 </td>
 <td valign="top">
  <input  type="text" name="employer" maxlength="30" size="30">
 </td>
</tr>

</tr>
<tr>
<td valign="top">
  <label for="emp_addr1">Employer Address</label>
 </td>
 <td valign="top">
  <input  type="text" name="emp_addr1" maxlength="20" size="20">
 <input  type="text" name="emp_addr1" maxlength="20" size="20">
</tr>

</tr>
<tr>
<td valign="top">
  <label for="emp_phone">Employer Phone</label>
 </td>
 <td valign="top">
  <input  type="text" name="emp_phone" maxlength="20" size="20">
 </td>
</tr>

</tr>
<tr>
 <td colspan="2" style="text-align:center">
     <input type="submit"  formaction="/update_customers.php" value="Update">   
<input type="submit" value="Save">  
</tr>

<tr>
 <td colspan="2" style="text-align:center">
  <a href= "loanmgr.html">Main Menu</a>
 </td>
</tr>
</table>
</form>
</HTML>

＆＃13;

Answer 1

这是使用vanilla javascript的可能解决方案。

＆＃13;

var findSubmit = document.querySelector('input[value="Find"]');

findSubmit.addEventListener('click', function() {
  document.querySelector('input[name="cust_title"]').removeAttribute('required');
  document.querySelector('input[name="surname"]').removeAttribute('required');
  document.querySelector('input[name="fstname"]').removeAttribute('required');
  document.querySelector('input[name="dob"]').removeAttribute('required');
  document.querySelector('input[name="phone_no"]').removeAttribute('required');
  document.querySelector('input[name="id_no"]').removeAttribute('required');
  
  // This two are not necessary, because have a default value
  document.querySelector('input[name="mon_basic"]').removeAttribute('required');
  document.querySelector('input[name="year_basic"]').removeAttribute('required');
});

＆＃13;

<form method="post" action="customers.php">
    <table width="550px" align = "center">
    <colgroup>
        <col span="4"  style="background-color:cyan">
      </colgroup>

    <thead>
      <tr>
         <th>Customer Details</th>
      </tr>
     </thead>

    <tr>
     <td valign="top">
     </td>
     <td valign="top">
     </td>
    </tr>

    <tr>
     <td valign="top">
      <label for="cust_no">Customer No.: </label>
     </td>
     <td valign="top">
      <input  type="text" name="cust_no" maxlength="10" size="10" required>
    <input type="submit"  formaction="/find_customers.php" value="Find">   
     </td>
    </tr>

    <tr>
     <td valign="top">
      <label for="cust_title">Customer Title</label>
     </td>
     <td valign="top">
      <input  type="text" name="cust_title" maxlength="10" size="10" required>
     </td>
    </tr>

    <tr>
     <td valign="top">
      <label for="surname">Surname </label>
     </td>
     <td valign="top">
      <input  type="text" name="surname" maxlength="20" size="20" required>
     </td>
    </tr>

    <tr>
     <td valign="top">
      <label for="fstname">First Name</label>
     </td>
     <td valign="top">
      <input  type="text" name="fstname" maxlength="50" size="30" required>
     </td>
    </tr>

    <tr>
     <td valign="top">
      <label for="midname">Middle Name</label>
     </td>
     <td valign="top">
      <input  type="text" name="midname" maxlength="50" size="30">
     </td>
    </tr>

    <tr>
     <td valign="top">
      <label for="sex">Sex</label>
     </td>
     <td valign="top">
      <select name="sex">
        <option value="Female">Female</option>
        <option value="Male">Male</option>
      </select>

     <label for="dob">Date of Birth</label>
    <input  type="date" name="dob" maxlength="10" size="10" required>
    </tr>

    <tr>
    <td valign="top">
      <label for="profession">Profession</label>
     </td>
     <td valign="top">
      <input  type="text" name="profession" maxlength="30" size="30">
     </td>
    </tr>

    <tr>
    <td valign="top">
      <label for="cust_type">Customer Type</label>
     </td>
     <td valign="top">
     <select name="cust_type">
        <option value="Individual">Individual</option>
        <option value="Group">Group</option>
       <option value="Company">Company</option>
      </select>
     </td>
    </tr>

    <tr>
    <td valign="top">
      <label for="p_addr1">Postal Address</label>
     </td>
     <td valign="top">
      <input  type="text" name="p_addr1" maxlength="20" size="20">
      <input  type="text" name="p_addr2" maxlength="20" size="20">
    </tr>

    <tr>
    <td valign="top">
      <label for="l_addr1">Location Address</label>
     </td>
     <td valign="top">
      <input  type="text" name="l_addr1" maxlength="20" size="20">
     <input  type="text" name="l_addr2" maxlength="20" size="20">
    </tr>

    <tr>
    <td valign="top">
      <label for="phone_no">Phone No.</label>
     </td>
     <td valign="top">
      <input  type="text" name="phone_no" maxlength="20" size="20" required>
     </td>
    </tr>

    <tr>
    <td valign="top">
      <label for="id_type ">ID Type</label>
     </td>
     <td valign="top">
     <select name="id_type ">
        <option value="Driver's License">Driver's License</option>
        <option value="Passport">Passport</option>
        <option value="National ID">National ID</option>
      </select>

      <label for="id_no ">ID No.</label>
      <input  type="text" name="id_no" maxlength="20" size="20" required>
    </tr>
     
    <tr>
     <td valign="top">
      <label for="mon_basic">Monthly Basic Salary</label>
     </td>
     <td valign="top">
      <input  type="number" name="mon_basic" maxlength="5" size="5"  min="0"  step = "any" value="0.00" required>
     </td>
    </tr>

    <tr>
     <td valign="top">
      <label for="year_basic">Annual Basic Salary</label>
     </td>
     <td valign="top">
      <input  type="number" name="year_basic" maxlength="5" size="5" min="0"  step = "any" value="0.00" required>
      <label for="cust_status ">Customer Status</label>
       <select name="cust_status">
        <option value="Active">Active</option>
        <option value="Dormant">Dormant</option>
        <option value="Closed">Closed</option>
      </select>
    </tr>


    <tr>
    <td valign="top">
      <label for="employer">Employer</label>
     </td>
     <td valign="top">
      <input  type="text" name="employer" maxlength="30" size="30">
     </td>
    </tr>

    <tr>
    <td valign="top">
      <label for="emp_addr1">Employer Address</label>
     </td>
     <td valign="top">
      <input  type="text" name="emp_addr1" maxlength="20" size="20">
     <input  type="text" name="emp_addr1" maxlength="20" size="20">
    </tr>

    <tr>
    <td valign="top">
      <label for="emp_phone">Employer Phone</label>
     </td>
     <td valign="top">
      <input  type="text" name="emp_phone" maxlength="20" size="20">
     </td>
    </tr>

    <tr>
     <td colspan="2" style="text-align:center">
         <input type="submit"  formaction="/update_customers.php" value="Update">   
    <input type="submit" value="Save">  
    </tr>

    <tr>
     <td colspan="2" style="text-align:center">
      <a href= "loanmgr.html">Main Menu</a>
     </td>
    </tr>
    </table>
    </form>

＆＃13;

HTML中的数据验证问题

1 个答案: