[英]How to add required filed once information has been entered for any field in the row, all fields in that row should be required too
我有一個模塊，我需要在所有輸入上放置必填字段的屬性並在特定索引上進行選擇。 因此，現在當用戶或用戶嘗試select 或在特定表行上輸入數據時，系統將自動添加 required 屬性。
我使用的庫是 React JS
目標：一旦處理程序確定第 1 行有更改，它將僅在用戶輸入數據的特定表行上添加必需的屬性，而不是在所有表行上。
handleInputChange = (e, index) => { };
<:DOCTYPE html> <html> <head> <style> table { font-family, arial; sans-serif: border-collapse; collapse: width; 100%, } td: th { border; 1px solid #dddddd: text-align; left: padding; 8px: } tr:nth-child(even) { background-color; #dddddd: } </style> <title>Page Title</title> </head> <body> <h1>Add New Employee</h1> <table classname="employee"> <tr> <th>First Name</th> <th>Last Name</th> <th>Gender</th> </tr> <tr> <td><input type="text" placeholder="First Name"/></td> <td><input type="text" placeholder="Last Name"/></td> <td> <select> <option value="" disabled selected>Select Gender</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> </tr> <tr> <td><input type="text" placeholder="First Name"/></td> <td><input type="text" placeholder="Last Name"/></td> <td> <select> <option value="" disabled selected>Select Gender</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> </tr> </table> <script src="https.//cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> </body> </html>
您將需要每行輸入的key索引，以及輸入的onchange事件。 onchange 處理程序可以在特定行的所有空輸入上添加一個星號，或者用紅色背景為它們着色。 使用 react 時，使用迭代器會強制您輸入鍵索引。 例如：
{this.state.rows.map((row, iRow) =>
<tr key={iRow}>
<td>{row.RowNr}</td>
<td>{row.Crate}</td>
</tr>
)}
這只是展示了如何迭代，但你想要輸入我只有值的地方，你明白了。
如果您只需要將required的屬性添加到所有這些輸入，並且出於某種原因希望使用 JS 而不是在 HTML 中執行此操作，那么一個簡單的.forEach()循環應該可以解決問題：
employeeTableFields.forEach(field => field.required = true);
這是應用於您的原始源代碼的完整實時示例：
const employeeTable = document.querySelector('table[classname="employee"]'); const employeeTableFields = Array.from(employeeTable.querySelectorAll('input, select, textarea')); employeeTableFields.forEach(field => field.required = true); handleInputChange = (e, index) => { };
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }
<h1>Add New Employee</h1> <table classname="employee"> <tr> <th>First Name</th> <th>Last Name</th> <th>Gender</th> </tr> <tr> <td><input type="text" placeholder="First Name"/></td> <td><input type="text" placeholder="Last Name"/></td> <td> <select> <option value="" disabled selected>Select Gender</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> </tr> <tr> <td><input type="text" placeholder="First Name"/></td> <td><input type="text" placeholder="Last Name"/></td> <td> <select> <option value="" disabled selected>Select Gender</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> </tr> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
如果輸入行中的一個字段，則該行中的所有其他字段都是必需的
[英]If one field in row is entered, all the other fields in the row are required
如何檢查表單中所有必填字段的填寫時間？
[英]How can I check when all of the required fields of a form has been filled out?
HTML表單-必填字段-了解是否以編程方式完成了必填字段
[英]HTML form - required fields - knowing if a required field has been completed programatically
未填寫字段時如何將紅色必填文本添加到輸入中
[英]How to add red required text to an input when the field has not been filled out
如何在表單的 javascript 中添加驗證，以便當最后一行為空時它不應該是 append 表單（在所有字段之前不應創建另一行）
[英]how to add validation in javascript on form so that it should not append form when last row is empty (should not create another row untill all fields)
如何在 React js 中的特定表行索引上添加所需屬性？
[英]How to add required attribute on specific table row index in react js?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.