多语言表单校验逻辑调整需求技术咨询

Hi there! Let's work through this updated validation requirement for your multi-language form. I'll break down the logic and provide concrete code examples to make this work smoothly.

First, Let's Recap the Requirements #

• Case 1: User clicks submit without filling any fields at all → highlight all empty fields across every language.
• Case 2: User has filled at least one field in a language group → only highlight the empty fields within that same language group.

Step 1: Structure Your Form with Language Groups #

First, wrap each language's fields in a dedicated container (like a <div>) with a data-lang attribute. This makes it way easier to target all fields belonging to a specific language later on.

<form id="multiLangForm">
  <!-- English Fields -->
  <div class="language-group" data-lang="en">
    <h3>English</h3>
    <select name="en-select" class="form-field">
      <option value="">Select an option</option>
      <option value="opt1">Option 1</option>
      <option value="opt2">Option 2</option>
    </select>
    <input type="text" name="en-heading" class="form-field" placeholder="Heading">
    <textarea name="en-textarea" class="form-field" placeholder="Content"></textarea>
  </div>

  <!-- German Fields -->
  <div class="language-group" data-lang="de">
    <h3>Deutsch</h3>
    <select name="de-select" class="form-field">
      <option value="">Wählen Sie eine Option</option>
      <option value="opt1">Option 1</option>
      <option value="opt2">Option 2</option>
    </select>
    <input type="text" name="de-heading" class="form-field" placeholder="Überschrift">
    <textarea name="de-textarea" class="form-field" placeholder="Inhalt"></textarea>
  </div>

  <!-- Chinese Fields -->
  <div class="language-group" data-lang="zh">
    <h3>中文</h3>
    <select name="zh-select" class="form-field">
      <option value="">请选择选项</option>
      <option value="opt1">选项1</option>
      <option value="opt2">选项2</option>
    </select>
    <input type="text" name="zh-heading" class="form-field" placeholder="标题">
    <textarea name="zh-textarea" class="form-field" placeholder="内容"></textarea>
  </div>

  <button type="submit">Submit Form</button>
</form>

<style>
  /* Highlight style for empty fields */
  .field-error {
    border: 2px solid #dc3545;
    background-color: #f8d7da;
  }
</style>

Step 2: Implement the Validation Logic with JavaScript #

We'll listen for the form's submit event, then handle the two cases outlined above. Here's the breakdown:

1. First, clear any existing error highlights to avoid stale styles.
2. Check if all fields are empty—if yes, highlight every empty field.
3. If some fields are filled, iterate over each language group. For groups where at least one field is filled, highlight only the empty fields in that group.

const form = document.getElementById('multiLangForm');
const fieldErrorClass = 'field-error';

form.addEventListener('submit', function(e) {
  e.preventDefault(); // Prevent default form submission
  const allFields = document.querySelectorAll('.form-field');
  let allFieldsEmpty = true;

  // Clear existing error highlights first
  allFields.forEach(field => field.classList.remove(fieldErrorClass));

  // Check if every single field is empty
  allFields.forEach(field => {
    if (field.value.trim() !== '') {
      allFieldsEmpty = false;
    }
  });

  if (allFieldsEmpty) {
    // Case 1: No fields filled → highlight all empty fields
    allFields.forEach(field => {
      if (field.value.trim() === '') {
        field.classList.add(fieldErrorClass);
      }
    });
    return;
  }

  // Case 2: Some fields are filled → validate per language group
  const languageGroups = document.querySelectorAll('.language-group');
  languageGroups.forEach(group => {
    const groupFields = group.querySelectorAll('.form-field');
    let hasFilledField = false;

    // Check if any field in this group has content
    groupFields.forEach(field => {
      if (field.value.trim() !== '') {
        hasFilledField = true;
      }
    });

    // If the group has filled fields, highlight its empty fields
    if (hasFilledField) {
      groupFields.forEach(field => {
        if (field.value.trim() === '') {
          field.classList.add(fieldErrorClass);
        }
      });
    }
  });
});

Key Explanations #

• Language Grouping: Using data-lang and wrapping fields in a container lets us isolate fields per language, which is critical for targeting only the relevant empty fields in Case 2.
• Error State Cleanup: We always clear existing errors first to ensure the UI reflects the latest validation state.
• Flexible Logic: This setup works if you add more language groups later—no need to rewrite core validation code, just add another .language-group container.

内容的提问来源于stack exchange，提问作者user3066595