HTML中的數據驗證問題

-1

我有一些數據驗證的HTML數據錄入代碼。在輸入客戶編號並選擇「查找」以查找客戶詳細信息之後，它仍然要求提供「客戶標題」。HTML中的數據驗證問題

如何解決此問題？

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

來源

2017-06-06 KofiMossi

歡迎S/O。在說出你的問題後，以備將來參考。如果你也說出你試圖解決你的問題，那麼你的問題將會得到更好的回答。看看你的HTML，你已經將大部分文本框設置爲必填字段，我想它們都是相同的形式。我會假設，當你提交你的表單來做的時候，發現你的表單不適用於這個原因。 – Wheels73

如果您想獲得自動完成所有其他字段的客戶詳細信息，我認爲您必須將表單分開。或者在提交之前使用javascript從同一表單的其他字段中刪除'required'屬性。在這種情況下，我可以使用JavaScript爲您提供可能的解決方案。 –

Yulio Aleman Jimenez - 向我提供javascript解決方案 – KofiMossi

這是使用香草JavaScript的一個可能的解決方案。

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'); 
 
});

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

來源

2017-06-06 15:39:22

HTML中的數據驗證問題

回答

相關問題