如何设置 CSS 进行表单验证

Question

我不明白这是什么问题。问题是当我按下提交 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";    
}

Answer 1

在您的代码片段中，您的 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";    
}

如何设置 CSS 进行表单验证

how can I set CSS for form validation

javascript

forms

validation