Как отобразить сообщение createelement (ошибка) в форме JS? - PullRequest
Новая
       0

Как отобразить сообщение createelement (ошибка) в форме JS?

1 голос
/ 08 января 2020

Я хочу отобразить сообщение об ошибке, когда значение username неверно. но не работает 

function handleInvalidities(input) { // Takes input field as parameter
    let errMsg = "";
    if (input.validity.valueMissing) {
        errMsg = "Invalid entry. This field can not be blank. Please enter a value."; // Check for missing fields

        return errMsg;
    }

    function validateForm(errMsg) {
        let name = document.getElementById('userName');
        if (name == null || name == "") {
            let errElem = document.createElement("span");
            errElem.setAttribute("class", "error");
            let errText = document.createTextNode(errMsg);
            errElem.appendChild(errText);
        }
    }

Ответы [ 3 ]

0 голосов
/ 08 января 2020

, если значение пустое, добавить текст в span с id = "error" в альтернативе html

if (input !== "") {
        // if value isn't blank do this
    }
else{
    document.getElementById("error").innerHTML = "Invalid entry. This field can not be blank. Please enter a value."; 
}

HTML: 

<span id="error"></span>

, которая также создает диапазон в javascript: 

if (input !== "") {
        // if value isn't blank do this
    }
else{
    const span = document.createElement("span");
    span.innerHTML = "Invalid entry. This field can not be blank. Please enter a value.";
    const att = document.createAttribute("class");      
    att.value = "error";
    span.setAttributeNode(att);        
    document.body.appendChild(span);               // Append <span> to <body> 
}
0 голосов
/ 08 января 2020

Как вы попытались, можно использовать функцию «generi c», чтобы проверить достоверность любого входного значения с помощью handleInvalidities(inputValue) Затем функцию validateField(elementId), чтобы применить вышеуказанную проверку и распечатать саму ошибку. Затем функция onSubmit, где вы можете вызвать поле проверки для любого поля ввода из вашей формы

РЕДАКТИРОВАТЬ

Да, возможно, я создал div со всеми спецификациями (я пытался с span, но не удалось :() и для каждого элемента будет добавлен div ошибки, структура элементов будет 

<div>
   <input/>
   <errorDiv/>
</div>

Если вы введете текст во ввод и нажмете submit, ошибка исчезнет. xD 

function handleInvalidities(inputValue) { // Takes input field as parameter
  if (inputValue == null || inputValue == "") {
    return "Invalid entry. This field can not be blank. Please enter a value.";
  } else {
    return "";
  }
}

function createErrorDivforElement(elementId, message) {
  let div = document.createElement("div");
  div.style.width = "auto";
  div.style.height = "18px";
  div.classList.add("error");
  div.innerHTML = message;
  div.id = elementId + "_error";

  return div;
}

function validateField(elementId) {
  const element = document.getElementById(elementId);
  const elementValue = element.value;

  const error = handleInvalidities(elementValue)
  const errorDiv = createErrorDivforElement(elementId, error);

// if it's = 2, it already has the error div attached
  if (element.parentNode.childNodes.length < 2) { 
    element.parentNode.appendChild(errorDiv);
  }

  var errDiv = document.getElementById(elementId + "_error");
  if (error !== "") {
    errDiv.style.display = "block";
  } else {
    errDiv.style.display = "none";
  }
}

function onSubmit() {
  validateField("userName");
  validateField("country");
}
.error {
  color: red;
}
<div><input type="text" id="userName" aria-describedby="name-format" placeholder="Name"></div>

<div><input type="text" id="country" aria-describedby="name-format" placeholder="Country"></div>

<button type="submit" value="submit" onclick="onSubmit()">Submit</button>
0 голосов
/ 08 января 2020

Попробуйте это. 

function validateForm() {
    let errorMsg =
        " Invalid entry. This field can not be blank. Please enter a value.";
    let name = document.getElementById("userName");
    if (name.value === "") {
        let errElem = document.createElement("span");
        errElem.setAttribute("class", "error");
        errElem.textContent = errorMsg;
        name.after(errElem);
    }
}
 <input name="username" id="userName">
 <button type="button" onclick="validateForm()">Validate</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...