html 如何在输入无效时添加工具提示

31moq8wy 于 2022-12-16 发布在其他

关注(0)|答案(3)|浏览(160)

我希望在文本输入无效时显示有关它的工具提示

function check() {
  var ok = true;
  regLast = /^[a-zA-Z]{2,20}$/;

  if (!regLast.test(document.getElementById("lastName").value)) {
    ok = false;
  }

  return ok;
}

<div class="form-group">
  <label for="lastName">Last name:</label>
  <input type="text" class="form-control" id="lastName" placeholder="Put your last name" name="lastName" />
</div>

我知道如何把一个文本放在一个div下，一个document.getElementById("wronglastnamediv").innerHTML = "Put valid last name"的输入
但我不知道如何把一个工具提示在这些文本区域时，它是无效的。

Html

来源：https://stackoverflow.com/questions/50784925/how-to-put-a-tooltip-on-input-when-its-not-valid

3条答案

按热度按时间

4urapxun1#

您应该相应地编辑下面的代码，并链接jquery 1.7或更高版本-

<script>
 $('#lastName').on('keyup', function () {

$('.text-error').remove();
var ok=true;
regLast = /^[a-zA-Z]{2,20}$/;
if (!regLast.test(document.getElementById("lastName").value))
{
    ok=false;
    $(this).parent('.form-group').append("<span class='text-error'>Please enter a valida string.</span>");
}
return ok;

});
</script>

//CSS add your own CSS for tooltip style etc
<style type="text/css">
.form-group{
position:relative;
}
.text-error{
position:absolute;
right:0;
top:0px;
background:red;
color:white;
border-radius:5px;
padding:5px 3px;
}
</style>

希望代码对您有用。
纯Javascript

<!DOCTYPE html>
            <html>
            <head>
                <title></title>

            <style type="text/css">
            .form-control{
                position:relative;
                width: 100%;
                float: left;
            }
            .text-error{
                position:absolute;
                right:0;
                top:0px;
                background:red;
                color:white;
                border-radius:5px;
                padding:5px 3px;
                display: none;
            }
            .display_block{
                display: block;
            }
            </style>

            </head>
            <body>



            <div class="form-group">
              <label for ="lastName">Last name:</label>
              <input type = "text" class = "form-control" id = "lastName" onkeyup="check()" placeholder = "Put your last name" name = "lastName" />
              <span class="text-error" id="error_lastname"></span>
            </div>

            <script type="text/javascript">
            function check () {
                var div = document.getElementById("error_lastname");
                div.setAttribute('class', 'text-error'); 

                var ok=true;
                regLast = /^[a-zA-Z]{2,20}$/;
                if (!regLast.test(document.getElementById("lastName").value))
                {
                    ok=false;

                    div.setAttribute('class', 'text-error display_block'); 
                    div.innerHTML = "Please enter a valid string.";

                    console.log("XXXX");

                }
                return ok;

            }

            </script>

            </body>
            </html>

赞(0）回复(0）举报 2022-12-16

nlejzf6q2#

你可以像这样为输入域添加工具提示。使用setAttribute('title', 'some tooltip')设置工具提示，使用removeAttribute('title')从输入域删除工具提示。
我在输入字段中添加了输入事件侦听器，它在每次键入字符时执行输入值验证，并根据验证结果添加或删除工具提示。
如果你只输入一个字符并将鼠标悬停在输入字段上，你应该会看到工具提示。如果你输入第二个字符，它就会消失（注意，你需要将鼠标光标移出输入字段，然后再移回来才能真正看到工具提示）。

function check() {
  var ok = true;
  const regLast = /^[a-zA-Z]{2,20}$/;

  if (!regLast.test(document.getElementById("lastName").value)) {
    ok = false;
  }

  return ok;
}

const inp = document.querySelector('input');
inp.addEventListener('input', event => {
  if (!check(inp.value)) {
    inp.setAttribute('title', 'incorrect value');
  } else {
    inp.removeAttribute('title');
  }
});

<div class="form-group">
  <label for ="lastName">Last name:</label>
  <input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
</div>

如果你需要一些更复杂和更“可视”的东西，你可以使用css和数据属性相结合，逻辑和前面的代码一样，根据验证的结果，你可以在输入域中添加一个数据属性或者删除它。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
要在表单提交时添加工具提示而不是悬停，您可以使用submit-event listener并执行与前面相同的代码，但是您还需要添加event.preventDefault();，以防止表单在验证失败时提交（并且您需要稍微更改css）。
当你现在点击提交按钮时，如果输入值不正确，你应该会看到工具提示。

function check() {
  var ok = true;
  const regLast = /^[a-zA-Z]{2,20}$/;

  if (!regLast.test(document.getElementById("lastName").value)) {
    ok = false;
  }

  return ok;
}

const inp = document.querySelector('input');
const form = document.querySelector('form');

form.addEventListener('submit', event => {
  if (!check(inp.value)) {
    event.preventDefault();
    inp.parentElement.dataset.tip = 'incorrect input value';
  } else {
    delete inp.parentElement.dataset.tip;
  }
});

[data-tip] {
	position:relative;

}
[data-tip]:before {
	content:'';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #1a1a1a;
	position:absolute;
	top:30px;
	left:35px;
	z-index:8;
	font-size:0;
	line-height:0;
	width:0;
	height:0;
}
[data-tip]:after {
	content:attr(data-tip);
	position:absolute;
	top:35px;
	left:0px;
	padding:5px 8px;
	background:#1a1a1a;
	color:#fff;
	z-index:9;
	font-size: 0.75em;
	height:18px;
	line-height:18px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	white-space:nowrap;
	word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
	display:block;
}

<form>
  <div class="form-group" >
    <label for ="lastName">Last name:</label>
    <input type = "text" class = "form-control" id = "lastName" placeholder = "Put your last name" name = "lastName" />
  </div>
  <input type="submit" value="submit" />
</form>

赞(0）回复(0）举报 2022-12-16

yxyvkwin3#

您可以简单地使用HTML5 Form Validation（如果您不需要自定义工具提示）。
请参见下面的代码片段：

<form>
    <p>
        <label for="firstName">First name: </label>
        <input type="text" id="firstName" placeholder="Put your first name" pattern="[a-zA-Z]{2,20}" required />
    </p>
    <p>
        <label for="lastName">Last name: </label>
        <input type="text" id="lastName" placeholder="Put your last name" pattern="[a-zA-Z]{2,20}" required />
    </p>
    <input type="submit" Value="Submit" />
</form>

当oninvalid事件发生时，您也可以使用setCustomValidity函数来更改必填字段的默认消息。

示例：

<form>
    <p>
        <label for="firstName">First name: </label>
        <input type="text" id="firstName" placeholder="Put your first name" pattern="[a-zA-Z]{2,20}" oninvalid="this.setCustomValidity('Please enter a valid Name')" required />
    </p>
    <p>
        <label for="lastName">Last name: </label>
        <input type="text" id="lastName" placeholder="Put your last name" pattern="[a-zA-Z]{2,20}" required />
    </p>
    <input type="submit" Value="Submit" />
</form>

赞(0）回复(0）举报 2022-12-16

我来回答

html 如何在输入无效时添加工具提示

3条答案

相关问题

热门标签

最新问答