联系表单验证异常及页面刷新问题修复求助

Let's break down what's going wrong and fix it step by step — there are a mix of syntax errors, logical mistakes, and HTML structure issues causing your validation to fail and the page to refresh:

1. JavaScript Fixes #

First, let's fix the validation function:

• Syntax error in name validation: The isNaN.document.signup.NAME.value line uses a dot instead of parentheses to call the isNaN() function. This breaks the entire validation flow, causing the function to throw an error, skip all subsequent checks, and let the form submit (which refreshes the page).
• Incorrect checkbox validation: Checking document.signup.INS.value == "" doesn't work for checkboxes — we need to verify at least one checkbox is selected instead.

Here's the corrected checkData() function:

function checkData() { 
    // Validate Title (radio buttons)
    const titleOptions = document.signup.TITLE;
    let titleSelected = false;
    for (let i = 0; i < titleOptions.length; i++) {
        if (titleOptions[i].checked) {
            titleSelected = true;
            break;
        }
    }
    if (!titleSelected) {
        alert("Please select your Title.");
        titleOptions[0].focus();
        return false;
    }

    // Validate Name
    const nameVal = document.signup.NAME.value.trim();
    if (nameVal === "" || nameVal.length < 2 || !isNaN(nameVal)) { 
        alert("Please fill in a valid Name (at least 2 characters, no numbers).");
        document.signup.NAME.focus();
        return false;
    }

    // Validate Email
    const emailVal = document.signup.EMAIL.value.trim();
    if (emailVal === "") {
        alert("Please fill in your E-Mail address.");
        document.signup.EMAIL.focus();
        return false;
    }

    // Validate Enquiry Type
    if (document.signup.ENQ.value === "S") { 
        alert("Please select your Enquiry type.");
        document.signup.ENQ.focus();
        return false;
    }

    // Validate Insurance Checkboxes
    const insCheckboxes = document.signup.INS;
    let insSelected = false;
    for (let i = 0; i < insCheckboxes.length; i++) {
        if (insCheckboxes[i].checked) {
            insSelected = true;
            break;
        }
    }
    if (!insSelected) {
        alert("Please select at least one Insurance option.");
        insCheckboxes[0].focus();
        return false;
    }

    // Validate Message
    const msgVal = document.signup.MSG.value.trim();
    if (msgVal === "") {
        alert("Please type in your Message.");
        document.signup.MSG.focus();
        return false;
    } 

    return true;
}

2. HTML Fixes #

Now let's correct the form markup to ensure JS can properly access elements:

• Radio button value uniqueness: Give each title radio button a unique value (so you can capture the selected option if needed later).
• Move name="ENQ" to the <select> tag: Previously, it was on <option> elements, which meant JS couldn't find the dropdown.
• Fix duplicate id attributes on checkboxes: Each checkbox needs a unique id, and label tags should reference the correct id.
• Fix textarea id syntax: Correct id "MSG" to id="MSG".
• Clean up invalid HTML: Remove unclosed <tr> tags and extra </div> elements.

Here's the corrected HTML form:

<form name="signup" onsubmit="return checkData()">
    <tr>
        <td>Title:*</td>
        <td>
            <input type="radio" name="TITLE" value="Mr">Mr
            <input type="radio" name="TITLE" value="Mrs">Mrs
            <input type="radio" name="TITLE" value="Miss">Miss
            <input type="radio" name="TITLE" value="Ms">Ms
        </td>
    </tr>
    <tr>
        <td>Your Name:*</td>
        <td>
            <input name="NAME" type="text" id="NAME" />
        </td>
    </tr>
    <tr>
        <td>E-Mail:*</td>
        <td>
            <input name="EMAIL" type="text" id="EMAIL" />
        </td>
    </tr>
    <tr>
        <td>Enquiry:*</td>
        <td>
            <select name="ENQ">
                <option value="S">Select Option</option>
                <option value="suggestion">Suggestion</option>
                <option value="complaint">Complaint</option>
                <option value="cancellation">Cancellation</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Select Insurance*</td>
        <td>
            <div id="checkboxes">
                <input type="checkbox" name="INS" id="ins-insurance" value="insurance" />Insurance
                <label for="ins-fees"><input type="checkbox" name="INS" id="ins-fees" value="fees"/>Fees</label>
                <label for="ins-blackbox"><input type="checkbox" name="INS" id="ins-blackbox" value="blackbox"/>Black Box</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>Message:*</td>
        <td>
            <textarea name="MSG" rows="5" cols="80" id="MSG"></textarea>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="submit" value="Email This Form">
        </td>
    </tr>
</form>

Key Changes Explained #

• Radio button validation: We now loop through all title options to check if any are selected, instead of relying on value (which can return a value even if nothing is checked).
• Checkbox validation: Similarly, we loop through insurance checkboxes to ensure at least one is selected.
• Trimmed input values: Using .trim() ensures we don't count whitespace as valid input.
• Fixed element references: Corrected name and id attributes so JS can properly access each form field.
• Unique dropdown values: Each enquiry option now has a unique value, making it easier to handle the selected choice later.

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