👀 Views: 0 💬 Answers: 1 📅 Created: 2025-06-14

react bootstrap form-validation JavaScript

I'm reviewing some code and After trying multiple solutions online, I still can't figure this out. I'm using React 18 with Bootstrap 5 for styling and form validation. I have a form where I dynamically add fields based on user input. However, I'm facing issues getting the validation to trigger on these dynamically created fields. Specifically, when I add new fields, the validation feedback (like 'This field is required') does not appear, and I'm not sure how to bind the validation effectively. Here's a simplified version of my code: ```javascript import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; const DynamicForm = () => { const [fields, setFields] = useState([{ value: '' }]); const handleAddField = () => { setFields([...fields, { value: '' }]); }; const handleChange = (index, event) => { const newFields = [...fields]; newFields[index].value = event.target.value; setFields(newFields); }; const handleSubmit = (event) => { event.preventDefault(); const form = event.currentTarget; if (form.checkValidity() === false) { event.stopPropagation(); } form.classList.add('was-validated'); }; return ( <form noValidate onSubmit={handleSubmit}> {fields.map((field, index) => ( <div className="mb-3" key={index}> <input type="text" className="form-control" value={field.value} onChange={(e) => handleChange(index, e)} required /> <div className="invalid-feedback">This field is required</div> </div> ))} <button type="button" onClick={handleAddField} className="btn btn-secondary">Add Field</button> <button type="submit" className="btn btn-primary">Submit</button> </form> ); }; export default DynamicForm; ``` I've tried ensuring that each input has a unique `key`, and that I'm calling `form.classList.add('was-validated')` after the check validity. However, the validation message does not display for the newly added fields. I've also verified that the `required` attribute is correctly added to the inputs. Is there something I might be missing in the way Bootstrap handles validation for dynamically added fields? Any insights or best practices would be greatly appreciated! This is part of a larger service I'm building. Any help would be greatly appreciated! This is part of a larger CLI tool I'm building. This issue appeared after updating to Javascript 3.9.