Блог

У меня есть некоторая проверка, настроенная в моей форме ввода руля, и если пользователь забудет заполнить поле ввода и отправит форму, я хочу, чтобы данные, которые они уже ввели, сохранялись после ошибки проверки после отправки. В настоящее время он работает для полей ввода текста, но я не могу заставить его работать для <select> ввода. Когда форма отправлена, выбранное входное значение просто сбрасывается. Я попытался установить значение в качестве атрибута в теге select и в тегах опций, но ни один из них не работает. Это то, что я должен настроить с помощью jQuery? Любые советы о том, как этого достичь, будут высоко оценены!

Это мой html-код. Поле, с которым у меня возникли проблемы, помечено *

 <div class="row">
    {{#with costHours}}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="/find">Find</a></li>
            <li class="breadcrumb-item active" aria-current="page">Add {{project_id}}</li>
        </ol>
    </nav>
    <div class="card border-secondary w-100 text-light" style="background-color: #333f48">
        <h5 style="background-color: #bf5700;" class="card-header">Costs amp;amp; Hours</h5>
        <div class="card-body w-100">
            {{/with}}
            {{#each errors}}
            <div class="my-2 text-start" style="border: 1px solid black;">
                <p>{{text}}</p>
            </div>
            {{/each}}
            {{#with costHours}}
            <form action='/add/costs_hours/{{project_id}}' id="formData" method="POST">
            {{/with}}
                <table id="tableData" class="table text-light text-center mt-3">
                    <thead>
                        <tr>
                            <th scope="col">Project ID</th>
                            <th scope="col">Implementation or Annual</th>
                            <th scope="col">Category</th>
                            <th scope="col">Costs</th>
                            <th scope="col">Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="input-group mb-3">
                                    {{#with costHours}}
                                    <input id="validationCustom03" value="{{project_id}}" name="project_id" type="text"
                                    {{/with}}
                                        class="form-control">
                                </div>
                            </td>
                            <td>
                                ******<div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select value='{{imp_or_ann}}' name="imp_or_ann" class="form-select imp_or_ann"
                                            id="inputGroupSelect01">
                                            <option selected disabled>Choose...</option>
                                            <option value='{{imp_or_ann}}'>Implementation</option>
                                            <option value='{{imp_or_ann}}'>Annual</option>
                                        </select>
                                    </div>
                                </div>******
                            </td>
                            <td>
                                ******<div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select value='{{category}}' name="category" class="form-select category" id="inputGroupSelect01">
                                            <option disabled selected>Choose...</option>
                                            <option>EMO</option>
                                            <option>Analysts</option>
                                            <option>Maintenance</option>
                                            <option>ETS</option>
                                            <option>BOT</option>
                                            <option>OtherUT</option>
                                            <option>Materials</option>
                                            <option>Non-UT Contract</option>
                                            <option>Contingency</option>
                                        </select>
                                    </div>
                                </div>******
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input value='{{cost}}' name="cost" type="text" class="cost form-control">
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input value='{{hours}}' name="hours" type="text" class="hours form-control">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="card-footer text-end">
                    <button type="submit" class="btn btn-success text-light">Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
 

Я не знаю, будет ли это актуально, но это мой контроллер, который настраивает проверку.

 createCostsHours: async (req, res) => {


        let { project_id, imp_or_ann, category, cost, hours } = req.body;

        let errors = []

        try {

            const costHours = await Prjt_costs_hours.findOne({
                where: {
                    project_id
                }
            });
            
            if (!imp_or_ann){
                errors.push({text: "please select an option for implementation or annual"})
            };

            if (!category){
                errors.push({text: "please select an option for category"})
            };

            if (!cost){
                errors.push({text: "please enter a value for cost"})
            };

            if (!hours){
                errors.push({text: "please enter a value for hours"})
            };

            if (errors.length > 0){
                 res.render('add/addCostsHours', {
                    errors, imp_or_ann, category, cost, hours, costHours
                })
            
            } else {

            const costHours = await Prjt_costs_hours.create({
                project_id, imp_or_ann, category, cost, hours,
            });

            return res.redirect('/find')

        }

        } catch (error) {

            console.error(error.message);
            return res.status(500).json(error);

        }
    },