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>

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

1 个答案: