Проверка формы на размытие - PullRequest
Новая
       99

Проверка формы на размытие

0 голосов
/ 15 апреля 2020

У меня есть 5 полей ввода, и я хочу, чтобы они проверялись на размытие и отображали либо сообщение об ошибке, либо сообщение об успехе, но с помощью сценариев DOM, а не с помощью окна предупреждения. Я пробовал несколько разных кодов, даже небольшие кусочки, чтобы увидеть, правильно ли он взаимодействует с моим html, но, похоже, он не работает. Пока у меня есть небольшой код, чтобы проверить, работает ли он, и он должен показывать окно предупреждения, но это не так. Я бы предпочел не использовать какой-либо внутренний HTML и использовать все функции только в javascript. Мой html: 

<div id=fNID>
                <label for="firstNameID">First Name: </label>
                <input id="firstNameID" type="text" name="firstNameA" value="" />
                <span> </span>
            </div>

            <div id=lNID>
                <label for="lastNameID">Last Name: </label>
                <input id="lastNameID" type="text" name="lastNameA" value="" />
                <span> </span>
            </div>

Мой javascript: 


    firstNameID = document.surveyForm.getElementById("firstNameID");
    document.surveyForm.getElementById(fN).addEventListener("blur", validateName);
    function validateName() {
        var nameRegEx = /[a-zA-Z]+/;
        var firstNameID = document.getElementById("firstNameID");

        if (fN.matches(nameRegEx)) {
            alert("Success!")
        } else {
            alert("error")
        }
    }


    window.addEventListener("load", setupForm, false);
}

1 Ответ

1 голос
/ 15 апреля 2020

Bootstrap имеет хороший шаблон для проверки ввода . Они используют div после ввода: один для правильного ввода, один для неверного ввода, делая соответствующий видимым: 

<div class="form-group">
    <label for="uname">Username:</label>
    <input class="form-control" id="uname">
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>

Bootstrap * CSS классы изменяют отображение на основе псевдо- входа ввода классы :valid и :invalid.

Вы можете установить эти псевдоклассы в JavaScript с помощью метода setCustomValidity (). 

input.setCustomValidity("input is invalid")

назначит :invalid псевдо- класс для ввода. 

input.setCustomValidity("")

назначит псевдокласс :valid.

Рабочий пример: 

const input = document.getElementById('uname');

function makeValid() {
  input.setCustomValidity('');
}

function makeInvalid() {
  input.setCustomValidity('a problem');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<h3 class="m-2">Bootstrap input with validation</h3>
<form class="was-validated mx-2">
  <div class="form-group">
    <label for="uname">Username (required):</label>
    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname">
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">This field is invalid.</div>
  </div>
</form>
<div class="m-2">
  <p>Use setCustomValidity() to change input state:</p>
  <button onclick="makeValid();">:valid</button>
  <button onclick="makeInvalid();">:invalid</button>
</div>

Стоит также отметить, что большинство браузеров имеют встроенную поддержку отображения сообщений проверки на входах. Вот пример, который не использует Bootstrap функции: 

const input = document.getElementById('uname');

function makeValid() {
  input.setCustomValidity('');
}

function makeInvalid() {
  input.setCustomValidity('this is invalid');
}
body {
  background-color: #aaa;
}

.m-2 {
  margin: .5rem;
}

.mt-5 {
  margin-top: 1rem;
}
<body>
  <h3 class="m-2">Generic input with validation</h3>
  <form class="mt-5">
    <label for="uname">Username:</label>
    <input type="text" id="uname" placeholder="Enter username" name="uname">
    <p>Use setCustomValidity() to change input state:</p>

    <button onclick="makeInvalid();">input:invalid</button>
  </form>
  <div class="m-2">
    <button onclick="makeValid();">input:valid</button>
  </div>
</body>
...