表单验证字段无法切换红/绿状态，点击提交无响应求排查

刚接触编程两天，正在为求职项目制作一个可根据验证成功/错误切换红/绿状态的表单，跟着YouTube教程操作，但编写错误和成功类（即字段变红或绿）后，点击提交毫无反应！以下是目前编写的代码，请问哪里出错了？

HTML代码 #

<div class="container">
  <form class="form" id="form"; action="mailto:changed@email.com"
        method="POST"
        enctype="text/plain:
        name="EmailForm>
    <div class="form-control">
      <label>Name</label>
      <input type="text" name="Name" placeholder="Enter Your Name" id="name">
    </div>
      <div class="form-control">
      <label>Email</label>
      <input type="email" name="Email" placeholder="Enter Your Email" id="email">
      </div>
        <div class="form-control">
      <label>Card</label>
      <input type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}"
             autocomplete="cc-number" maxlength="19"
              placeholder="Enter A Proxy Credit Card Number" id="ccn">
        </div>
    
    <button type="submit"; style="background-color:#e70064;
        border-color:#3c3c3b; color:#3c3c3b">Submit</button>
    
  </form>
</div>

CSS代码 #

* {
  box-sizing: border-box;
}

body {
  background-color:fff;
  display:flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  
   
}

.container {
  background-color:#89c82e;
  border: 5px solid #3c3c3b;
  border-radius:20px;
  margin-top:15px;
  margin-bottom:15px;
  width:300px;
  max-width:100%;
  
}

.form{
  padding: 30px 40px;
  font-family:"calibri"
}

.form-control.success input {
  border-color: #2ecc71;
}

.form-control.error input {
  border-color:#e74c3c
}

JavaScript代码 #

const form = document.getElementById('form');
const name = document.getElementById('name');
const email = document.getElementById('email');
const ccn = document.getElementById('ccn');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  checkInputs();
});

function checkInputs() {
  // get the values from the inputs
  const nameValue = name.value.trim();
  const emailValue = email.value.trim();
  const ccnValue = ccn.value.trim();
  
  if(nameValue === "") {
    // show error
    // add error class
    setErrorFor(name)
  } else {
    // add success class
    setSuccessFor(name)
  }
}

function setErrorFor(input) {
  const formControl = input.parentElement; // .form-control
  
  // add error class
  formControl.classname = 'form-control error'
}

1. HTML语法错误（直接导致表单提交逻辑异常） #

• form标签的enctype属性值未闭合双引号：enctype="text/plain: → 改成enctype="text/plain"
• form和button标签里多余的分号：id="form";、type="submit"; → 直接删掉这些分号
• form标签的name属性未闭合引号：name="EmailForm> → 改成name="EmailForm"

2. JavaScript核心错误（导致验证逻辑失效） #

• 类名赋值错误：formControl.classname → JS里元素的类名属性是驼峰命名的className，改成formControl.className = 'form-control error'
• 缺失setSuccessFor函数：验证成功时没有对应的样式处理，需要补充这个函数
• 仅处理了name字段：email和ccn字段的验证逻辑完全缺失，需要补充对应判断

3. CSS细节问题（样式不生效或显示异常） #

• body的背景色缺少#号：background-color:fff; → 改成background-color:#fff;
• 表单输入框的边框样式不明确：给.form-control input加默认边框，否则颜色变化可能看不到，比如添加.form-control input { border: 2px solid #3c3c3b; }

修复后的完整代码 #

HTML #

<div class="container">
  <form class="form" id="form" action="mailto:changed@email.com"
        method="POST"
        enctype="text/plain"
        name="EmailForm">
    <div class="form-control">
      <label>Name</label>
      <input type="text" name="Name" placeholder="Enter Your Name" id="name">
    </div>
    <div class="form-control">
      <label>Email</label>
      <input type="email" name="Email" placeholder="Enter Your Email" id="email">
    </div>
    <div class="form-control">
      <label>Card</label>
      <input type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}"
             autocomplete="cc-number" maxlength="19"
             placeholder="Enter A Proxy Credit Card Number" id="ccn">
    </div>
    
    <button type="submit" style="background-color:#e70064;
        border-color:#3c3c3b; color:#3c3c3b">Submit</button>
    
  </form>
</div>

CSS #

* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  display:flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.container {
  background-color:#89c82e;
  border: 5px solid #3c3c3b;
  border-radius:20px;
  margin-top:15px;
  margin-bottom:15px;
  width:300px;
  max-width:100%;
}

.form{
  padding: 30px 40px;
  font-family:"calibri"
}

.form-control input {
  border: 2px solid #3c3c3b;
  width: 100%;
  padding: 8px;
  border-radius: 4px;
}

.form-control.success input {
  border-color: #2ecc71;
}

.form-control.error input {
  border-color:#e74c3c;
}

JavaScript #

const form = document.getElementById('form');
const name = document.getElementById('name');
const email = document.getElementById('email');
const ccn = document.getElementById('ccn');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  checkInputs();
});

function checkInputs() {
  const nameValue = name.value.trim();
  const emailValue = email.value.trim();
  const ccnValue = ccn.value.trim();

  // 验证姓名
  if(nameValue === "") {
    setErrorFor(name);
  } else {
    setSuccessFor(name);
  }

  // 验证邮箱
  if(emailValue === "") {
    setErrorFor(email);
  } else if (!isEmail(emailValue)) {
    setErrorFor(email);
  } else {
    setSuccessFor(email);
  }

  // 验证信用卡号
  if(ccnValue === "") {
    setErrorFor(ccn);
  } else if (!isValidCCN(ccnValue.replace(/\s/g, ''))) {
    setErrorFor(ccn);
  } else {
    setSuccessFor(ccn);
  }
}

function setErrorFor(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control error';
}

function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

// 邮箱格式验证工具函数
function isEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// 信用卡号格式验证（简单校验长度）
function isValidCCN(number) {
  return number.length >=13 && number.length <=19;
}

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