表单提交时validateAndConfirm函数未触发，请求技术协助

你的表单提交时无法触发validateAndConfirm函数，主要是几个拼写和语法错误导致的，下面是具体问题和修复方案：

核心错误点 #

• 表单事件属性拼写错误：form标签里的onsumbmit是笔误，正确应该是onsubmit
• 函数调用未执行：onsubmit属性里需要写validateAndConfirm()（带括号），否则只是引用函数而非执行它
• 换行符语法错误：JS的alert里换行应该用\n，不是/n，否则无法正确换行显示内容
• 正则表达式格式错误：电话输入框的pattern里{2-3}写法错误，范围应该用逗号分隔，即{2,3}

修复后的代码 #

HTML表单 #

<div id='form' class='center text'>
    <form method='post' onsubmit='return validateAndConfirm()'>
        <label for="firstname">First Name:</label>
        <input type="text" name="firstname" id="firstname" placeholder='Your first name...' autocomplete='given-name' required>
        <br>
        <label for="lastname">Last Name:</label>
        <input type="text" id="lastname" name="lastname" placeholder='Your last name...' autocomplete='family-name' required>
        <br>
        <label for="email">Email Address:</label>
        <input type="email" id="email" name="email" placeholder="youremail@mail.co.nz..." autocomplete='off' required>
        <br>
        <label for="confemail">Confirm Email Address:</label>
        <input type="email" id="confemail" name="confemail" placeholder="youremail@mail.co.nz..." autocomplete='off' required>
        <br>
        <label for="phone">Contact Number:</label>
        <input type="tel" id="phone" name="phone" pattern='[0-9]{2,3}[0-9]{2,3}[0-9]{3,4}' placeholder='000 000 0000' autocomplete='tel-national' required>
        <br>
        <label for="address"> Address:</label>
        <input type="text" id="address" name="address" placeholder='Your address...' autocomplete='address' required>
        <br>
        <label for="gender"> Gender:</label>
        <select name="gender" id="gender" autocomplete='gender' required>
            <option value=''>Select...</option>
            <option value="gen">Gender Diverse</option>
            <option value="f">Female</option>
            <option value="m">Male</option>
            <option value="pnts">Prefer not to say</option>
        </select>
        <button class='center' type="submit" value='Signup'>Signup
        </button>
    </form>
</div>

JS函数 #

function validateAndConfirm() {
    let firstname = document.getElementById('firstname').value;
    let lastname = document.getElementById('lastname').value;
    let email = document.getElementById('email').value;
    let confemail = document.getElementById('confemail').value;
    let phone = document.getElementById('phone').value;
    let address = document.getElementById('address').value;
    let gender = document.getElementById('gender').value;
    
    if (email === confemail) { // 用===做更严谨的全等判断
        alert(`Your details have been submitted as below and your card will be sent out within the next 5 business days.\nFirst name: ${firstname}\nLast name: ${lastname}\nEmail: ${email}\nPhone: ${phone}\nAddress: ${address}\nGender: ${gender}`);
        return true;
    } else {
        alert('Emails do not match, please amend and try again.');
        return false;
    }
}

额外优化说明 #

• 把字符串拼接改成模板字符串（反引号`），让代码更易读
• 邮箱判断用===做全等比较，比==更严谨
• onsubmit里加上return，确保函数返回false时能阻止表单提交

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