javascript - 将验证警报设置为自定义文本框

Question

我正在尝试使用 HTML 和 Javascript 验证一个简单的文本字段。我让一切都按照我想要的方式工作，但我想让验证警报以不同的方式出现。目前，它们是标准的弹出窗口，但我希望它们显示为字段下方的文本。我已经设置了一个错误跨度元素作为我如何尝试处理它的示例。

到目前为止，这是我的代码:

 <form name="register_form" action="#" method="post">
  <input type="text" name="full_name" pattern="B B" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" required>
  <input type="submit" value="Register"><br>
  <span class="error">Example error text based on validation</span>
</form>
</div>
  <script>
  function InvalidMsg(textbox) {
    if (textbox.value === '') {
        textbox.setCustomValidity('Name must be filled out');
    } else if (textbox.validity.patternMismatch){
        textbox.setCustomValidity('Entered name is not correct');
    } else {
       textbox.setCustomValidity('');
    }

    return true;
}
</script>

能否指出如何接管默认警报并使用我自己的 span 元素显示警报文本的方向？

Answer 1

您可以使用 JavaScript 附加带有类错误的 span 标签

更新:

var node = document.getElementsByClassName("error")[0];
if (node == undefined){
   node = document.createElement("span");
}

如果要更新错误内容

function InvalidMsg(textbox) {
    if (textbox.value === '') {
        //textbox.setCustomValidity('Name must be filled out');
        var node = document.createElement("span");
        node.className = "error";
        node.innerHTML = 'Name must be filled out';
        //textbox.append(node);
        insertAfter(node, textbox);

    } else if (textbox.validity.patternMismatch){
        //textbox.setCustomValidity('Entered name is not correct');
        var node = document.createElement("span");
        node.className = "error";
        node.innerHTML = 'Entered name is not correct';
        //textbox.append(node);
        insertAfter(node, textbox);
    } else {
       textbox.setCustomValidity('');
    }

    return true;
}

function InvalidMsg(textbox) {
    if (textbox.value === '') {
        //textbox.setCustomValidity('Name must be filled out');
        var node = document.getElementsByClassName("error")[0];
        //console.log(node)
        if (node == undefined){
            node = document.createElement("span");
        }
        node.className = "error";
        node.innerHTML = 'Name must be filled out';
        //textbox.append(node);
        var submit = document.getElementById('register');
		    insertAfter(node, textbox);
        insertAfter(node, submit);
       
    } else if (textbox.validity.patternMismatch){
        //textbox.setCustomValidity('Entered name is not correct');
        var node = document.getElementsByClassName("error")[0];
         if (node == undefined){
            node = document.createElement("span");
        }
        node.className = "error";
        node.innerHTML = 'Entered name is not correct';
        //textbox.append(node);
		insertAfter(node, textbox);
    } else {
       textbox.setCustomValidity('');
    }

    return true;
}

function insertAfter(newElement,targetElement) {
    // target is what you want it to go after. Look for this elements parent.
    var parent = targetElement.parentNode;

    // if the parents lastchild is the targetElement...
    if (parent.lastChild == targetElement) {
        // add the newElement after the target element.
        parent.appendChild(newElement);
    } else {
        // else the target has siblings, insert the new element between the target and it's next sibling.
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

.error{
color:red;
display:block;
}

<form name="register_form" action="#" method="post">
  <input type="text" name="full_name" pattern="B B" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" required><br>
  <input type="submit" id="register" value="Register"><br>
  <!--<span class="error">Example error text based on validation</span>-->
</form>