使用HTML和CSS实现简单表单验证遇阻，无法启动开发

Hey there! I totally get how frustrating it is to stare at a form, check a bunch of examples, and still not get validation working. Let's walk through this step by step—first, I'll start with a complete version of your BSL quiz form (since your code got cut off), then add both simple HTML5 native validation and more flexible JavaScript validation options.

First, A Complete Base Form #

Let's assume your quiz has a few common fields: name, email, and a multiple-choice question. Here's a full XHTML structure to work with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>A BSL Quiz</title>
    <style>
        .error { color: red; font-size: 0.9em; margin-left: 8px; }
    </style>
</head>
<body>
    <h1>BSL Quiz</h1>
    <form id="bslQuizForm" method="post" action="#">
        <div style="margin: 10px 0;">
            <label for="name">Your Name:</label>
            <input type="text" id="name" name="name">
            <span class="error" id="nameError"></span>
        </div>
        <div style="margin: 10px 0;">
            <label for="email">Your Email:</label>
            <input type="email" id="email" name="email">
            <span class="error" id="emailError"></span>
        </div>
        <div style="margin: 10px 0;">
            <p>What does the BSL sign for "hello" look like?</p>
            <input type="radio" id="hello1" name="hello" value="wave">
            <label for="hello1">Wave with open palm</label><br>
            <input type="radio" id="hello2" name="hello" value="fist">
            <label for="hello2">Fist tapped on chest</label><br>
            <span class="error" id="helloError"></span>
        </div>
        <div style="margin: 10px 0;">
            <button type="submit">Submit Quiz</button>
        </div>
    </form>
</body>
</html>

Option 1: Quick HTML5 Native Validation (XHTML-Compatible) #

This is the easiest way to add basic validation without writing much JS. Since you're using XHTML Strict, remember boolean attributes need explicit values (e.g., required="required" instead of just required):

• required="required": Makes the field mandatory
• type="email": Automatically validates email format
• pattern: For custom regex validation (if needed)

Update your form fields like this:

<!-- Name field with mandatory validation -->
<input type="text" id="name" name="name" required="required">

<!-- Email field with format + mandatory validation -->
<input type="email" id="email" name="email" required="required">

<!-- Radio buttons: add required to one (browsers check if any is selected) -->
<input type="radio" id="hello1" name="hello" value="wave" required="required">

When the user tries to submit without filling these out, the browser will show default error messages automatically—no extra JS needed!

Option 2: Custom JavaScript Validation (For Full Control) #

If you want custom error messages or more complex logic, add this script right before the closing </body> tag:

<script type="text/javascript">
    const form = document.getElementById('bslQuizForm');
    const nameInput = document.getElementById('name');
    const emailInput = document.getElementById('email');
    const helloRadios = document.querySelectorAll('input[name="hello"]');

    // Clear errors when user edits inputs
    nameInput.addEventListener('input', () => document.getElementById('nameError').textContent = '');
    emailInput.addEventListener('input', () => document.getElementById('emailError').textContent = '');
    helloRadios.forEach(radio => radio.addEventListener('change', () => document.getElementById('helloError').textContent = ''));

    form.addEventListener('submit', function(e) {
        let isValid = true;

        // Validate name (can't be empty or just spaces)
        if (!nameInput.value.trim()) {
            document.getElementById('nameError').textContent = 'Please enter your full name';
            isValid = false;
        }

        // Validate email format
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(emailInput.value)) {
            document.getElementById('emailError').textContent = 'Please enter a valid email address (e.g., name@example.com)';
            isValid = false;
        }

        // Validate radio selection
        let isHelloSelected = false;
        helloRadios.forEach(radio => {
            if (radio.checked) isHelloSelected = true;
        });
        if (!isHelloSelected) {
            document.getElementById('helloError').textContent = 'Please select an answer for the question';
            isValid = false;
        }

        // Stop form submission if any field is invalid
        if (!isValid) {
            e.preventDefault();
        }
    });
</script>

This lets you customize error messages and add extra checks (like minimum name length) easily by expanding the validation logic.

Quick XHTML-Specific Troubleshooting Tip #

Since you're using XHTML Strict, make sure all tags and attributes are properly closed (no self-closing tags without /—e.g., <input ... /> instead of <input ...>) to avoid validation errors in older parsers.

If you had a specific feature or error you were hitting, feel free to share more details and we can tweak this further!

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