如何为表单验证设置 CSS答案

【问题标题】：how can I set CSS for form validation如何为表单验证设置 CSS
【发布时间】：2021-07-23 11:50:22
【问题描述】：

我不明白是什么问题。问题是当我按下提交时，javascript 验证不运行。有我的代码：

const form = document.getElementById('form');
const username = document.getElementById('username');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  validate()
 })
const validate = () => {
 const usernameVal = username.value.trim();
//validate username
if(usernameVal=== "" ){
    setErrorMsg(username,"username can not be blank");
}else if (usernameVal.length >= 2 ) {
    setErrorMsg(username,"username min 3 char"); 
} else {
    setSuccessMsg(username);
}
function setErrorMsg(input,errorMsgs){
   const formControl= input.parentElement;
   const small = formControl.querySelector('small');
   formControl.className = "form-control error";
   small.innerText = errorMsgs;
 }
function setSuccessMsg(input){
  const formControl= input.parentElement;
  formControl.className = "form-control success";    
}

【问题讨论】：

标签： javascript forms validation

【解决方案1】：

在您的 sn-p 代码中，您的 validate() 方法中缺少 }。

现在试试你的代码：

const form = document.getElementById('form');
const username = document.getElementById('username');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  validate()
 })
 
const validate = () => {
    const usernameVal = username.value.trim();
    //validate username
    if(usernameVal=== "" ){
        setErrorMsg(username,"username can not be blank");
    }else if (usernameVal.length >= 2 ) {
        setErrorMsg(username,"username min 3 char"); 
    } else {
        setSuccessMsg(username);
    }
}

function setErrorMsg(input,errorMsgs){
   const formControl= input.parentElement;
   const small = formControl.querySelector('small');
   formControl.className = "form-control error";
   small.innerText = errorMsgs;
 }
 
function setSuccessMsg(input){
  const formControl= input.parentElement;
  formControl.className = "form-control success";    
}

【讨论】：