时间戳

首页 > 解决方案 > 当我提交表单以防信息错误时，我只想在输入下显示一条错误消息，如何在此处执行？

javascript - 当我提交表单以防信息错误时，我只想在输入下显示一条错误消息，如何在此处执行？

问题描述

每次我提交带有空字段的表单时，它都会在每个输入下添加一个新跨度，我想在输入为假时添加一个，并在正常时将其删除（但如果字段为空则保留其他字段）

handleAddEventForm: function(event) {
        const addEventForm = event.currentTarget;
        let eventTitle = addEventForm.querySelector('#eventTitle]');
        let eventDate = addEventForm.querySelector('#eventDate]');
        let eventTime = addEventForm.querySelector('#eventTime]')
        let eventDescription = addEventForm.querySelector('#eventDescription]');
        let arrayToTest = {}
        arrayToTest.title = eventTitle;
        arrayToTest.date = eventDate;
        arrayToTest.time = eventTime;
        arrayToTest.description = eventDescription;
        arrayToTest.error = '';
        for (const key in arrayToTest) {
          if (arrayToTest[key].value !== '') {
            arrayToTest[key].style.border = "";        
          } else {
            event.preventDefault();
            let errorSpan = document.createElement('span');
            let message = 'Ce champs est obligatoire'
            errorSpan.innerText = message ;
            errorSpan.className = "errorSpan";
            errorSpan.style.color = "red";
            arrayToTest[key].style.border = "3px solid red"; 
            arrayToTest[key].after(errorSpan); 
          }
        }
      },
    };

标签： javascript

解决方案

在循环之前删除所有errorSpan：

handleAddEventForm: function(event) {
    const addEventForm = event.currentTarget;
    let eventTitle = addEventForm.querySelector('#eventTitle]');
    let eventDate = addEventForm.querySelector('#eventDate]');
    let eventTime = addEventForm.querySelector('#eventTime]')
    let eventDescription = addEventForm.querySelector('#eventDescription]');
    let arrayToTest = {}
    arrayToTest.title = eventTitle;
    arrayToTest.date = eventDate;
    arrayToTest.time = eventTime;
    arrayToTest.description = eventDescription;
    arrayToTest.error = '';
    var errorSpans = document.getElementsByClassName('errorSpan');
        while(errorSpans[0]) {
        errorSpans[0].parentNode.removeChild(errorSpans[0]);
    }
    for (const key in arrayToTest) {
      if (arrayToTest[key].value !== '') {
        arrayToTest[key].style.border = "";        
      } else {
        event.preventDefault();
        let errorSpan = document.createElement('span');
        let message = 'Ce champs est obligatoire'
        errorSpan.innerText = message ;
        errorSpan.className = "errorSpan";
        errorSpan.style.color = "red";
        arrayToTest[key].style.border = "3px solid red"; 
        arrayToTest[key].after(errorSpan); 
      }
    }
  },
};

推荐阅读