表单部分输入框输入时边框颜色不生效问题求助

核心原因 #

你的按钮上绑定了onclick="predajKorisnika();"事件，这个事件会在表单submit事件之前触发。如果predajKorisnika()函数里包含直接提交表单的逻辑，会直接绕过你写的验证代码，导致ime和prezime字段的验证失效。而email和lozinka能正常工作，是因为浏览器自带的HTML5验证（比如邮箱格式检查）提前拦截了提交，掩盖了这个问题。

解决方案 #

1. 移除按钮的onclick绑定

修改HTML中的按钮代码，去掉onclick属性：

<button class="button2b" name="button2b" type="submit">Registruj se</button>

2. 整合提交逻辑到表单验证流程

把predajKorisnika()的逻辑移到表单submit事件处理函数中，确保只有验证通过后才执行提交：

const form = document.getElementById('formareg');
const fields = [
  document.getElementById('ime'),
  document.getElementById('prezime'),
  document.getElementById('email'),
  document.getElementById('lozinka')
];

// 表单提交验证
form.addEventListener('submit', (event) => {
  let isValid = true;
  
  fields.forEach(field => {
    const isFieldValid = field.validity.valid;
    field.classList.toggle('error', !isFieldValid);
    if (!isFieldValid) isValid = false;
  });

  if (!isValid) {
    event.preventDefault();
  } else {
    // 在这里执行predajKorisnika()的逻辑
    predajKorisnika();
  }
});

// 输入时移除错误样式
fields.forEach(field => {
  field.addEventListener('input', () => {
    field.classList.toggle('uredu', field.validity.valid);
    // 同时移除error类，避免样式冲突
    field.classList.remove('error');
  });
});

3. 优化CSS优先级（可选）

如果默认的.input类边框样式优先级高于你的错误样式，可以调整CSS选择器，提高优先级：

.input.error {
  border: 2px solid #eb7178;
}

.input.uredu {
  border: none;
}

这样不需要为每个字段单独写ID选择器，代码更简洁。

额外说明 #

之前其他表单的文本字段能正常工作，是因为那些表单的按钮没有额外的onclick提交逻辑，验证代码能正常触发。

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