Различные типы данных формы - есть ли лучший способ предварительного просмотра входных данных?

Question

Я работаю над школьным проектом, который представляет собой веб-страницу для отображения и создания новых школьных курсов. В данный момент я работаю над предварительным просмотром формы с различными типами данных (несколько наборов rad ios, флажки, textareas et c.). Я представляю предварительный просмотр в модальном .

. Пока я делал это вручную, в основном создавая переменные для всего, но я хочу сделать его более эффективным и менее неудобным. , Я не уверен, как к этому подойти, потому что я получил разные типы данных, как я упоминал, и меня интересует только представление данных, которые пользователь установил / выбрал, каждый в своем собственном абзаце. Если пользователь не установил какие-либо флажки в наборе флажков или если текстовое поле пусто, я хочу напечатать короткое и конкретное c сообщение об ошибке в этом абзаце, которое я пытался продемонстрировать в приведенном ниже коде. ,

Я изучал и думал об использовании querySelectorAll (), map и / или массивов, но до сих пор не нашел способа обойти мою проблему.

Это просто переписанный образец типа данных, которые я получил в форме, и как я «вручную» решил их до сих пор:

function previewForm(){
    const previewTerm = document.getElementById("previewTerm");
    const previewLanguage = document.getElementById("previewLanguage");
    const previewFaculty = document.getElementById("previewFaculty");
    const previewDescription = document.getElementById("previewDescription");

    let getTermChecked = $(':checkbox[name=termCheckbox]:checked');
    let getLanguageChecked = $(':radio[name=languageRadio]:checked');
    let getFacultySelected = $('#responsibleFaculty option:selected');
    let getDescriptionValue = $('#description').val();

    /** Term */
    if (getTermChecked.next('label').text() === "") {
       previewTerm.innerHTML = 'No term chosen.';
    } else {
       previewTerm.innerHTML = getTermChecked.next('label').map((i, e) => e.innerText).toArray().join(" and ");
    }

    if (getLanguageChecked.next('label').text() === "") {
       previewLanguage.innerHTML = 'No language chosen.';
    } else {
         previewLanguage.innerHTML = getLanguageChecked.next('label').text();
    }

    if (getDescriptionValue === '') {
         previewDescription.innerHTML = 'No description given.';
    } else {
       previewDescription.innerHTML = getDescriptionValue;
    }

    /** Faculty */
    if (getFacultySelected.index() === 0) {
         previewFaculty.innerHTML = 'No faculty chosen.';
    } else {
         previewFaculty.innerHTML = getFacultySelected.text();
    }
}

HTML

<!-- Semester -->
<div class="row">
  <h5>Term</h5>
    <input id="termSpring" name="termCheckbox" type="checkbox" value="0">
    <label for="termSpring">Spring</label>

    <input id="termFall" name="termCheckbox" type="checkbox" value="1">
    <label for="termFall">Fall</label>
</div>

<div class="row">
   <h5>Language</h5>
     <input id="norwegian" name="languageRadio" type="radio" value="norwegian" required>
     <label for="norwegian">Norwegian</label>

     <input id="english" name="languageRadio" type="radio" value="english">
     <label for="english">English</label>
</div>

<div class="row">
  <h5>Responsible faculty</h5>
   <div>
     <select id="responsibleFaculty" name="responsibleFaculty">
        <option disabled selected hidden>Choose responsible faculty..</option>
        <option value="0">Faculty0</option>
        <option value="1">Faculty1</option>
      </select>
   </div>
</div>

<div class="row">
  <h5>Description</h5>
     <textarea name="description" id="description" maxlength="255" type="text" required></textarea>
</div>

<div class="row">
  <h5></h5>
  <button onclick="previewForm()" type="button" id="preview">Preview final version</button>
</div>

<p id="previewTerm"></p>
<p id="previewLanguage"></p>
<p id="previewFaculty"></p>
<p id="previewDescription"></p>

Я сделал JSFiddle , чтобы лучше продемонстрировать, что у меня есть и как оно работает.

Answer 1

Если вы хотите лучше организовать это, переместите каждый фрагмент данных (например, получение языка) в различные автономные функции.

Убедитесь, что в этих функциях выполняется проверка данных.

Сделайте так, чтобы все эти функции следовали шаблону, где, если данные недействительны или отсутствуют, возвращают ноль.

Иметь конечную функцию, которая вызовет все меньшие функции get и объединит их в js возразить и вернуть эти данные (возможно, все данные, которые не были нулевыми)

На самом деле нет хорошего способа извлечения данных из входных данных и текстовых полей, если вы не строите их с помощью Javascript ... Таким образом, у вас могут быть общие логики c для входных данных, и вы сможете работать с этими объектами, а не с фактическими элементами html.