Как поместить всплывающую подсказку на ввод, когда она недействительна

Question

Я хочу показать всплывающую подсказку о вводе текста ма, когда она недействительна

Это моя функция в js:

function check()
{
var ok=true;

regLast = /^[a-zA-Z]{2,20}$/;

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

return ok;
}

здесь html:

<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"

Но я не знаю, как поместить всплывающую подсказку в эту текстовую область, когда она недействительна ..

Answer 1

Вы можете добавить всплывающую подсказку для поля ввода следующим образом.Используйте 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 в сочетании с атрибутами данных.Логика та же, что и в предыдущем коде.На основании результата проверки вы либо добавляете атрибут данных в поле ввода, либо удаляете его.

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.parentElement.dataset.tip = 'incorrect input value';
  } else {
    delete inp.parentElement.dataset.tip;
  }
});

[data-tip] {
	position:relative;

}
[data-tip]:before {
	content:'';
	display:none;
	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 {
	display:none;
	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;
}

<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>

---

Чтобы добавить всплывающую подсказку при отправке формы вместо наведения, вы можете использовать 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>

Answer 2

Вы можете просто использовать Проверка формы HTML5 (если вам не нужна настраиваемая подсказка).

См. Фрагмент кода ниже:

<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>

Также вы можете использовать функцию setCustomValidity, когда происходит событие oninvalid, чтобы изменить сообщение по умолчанию для обязательного поля.

Пример:

<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>

Answer 3

Вы должны соответствующим образом отредактировать приведенный ниже код, а также связать 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>

Надеюсь, код будет работать для вас.

Pure 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>