Блог

Главная - Вопросы по программированию - Проверьте, пусто ли поле ввода текста или содержит число

Проверьте, пусто ли поле ввода текста или содержит число

#javascript #forms #validation #input #checkvalidity

Вопрос:

У меня есть поле ввода текста, в котором я хочу отобразить 2 сообщения об ошибках в списке событий «ввод» (по мере ввода пользователем).

  1. Отобразите «Пожалуйста, введите имя», если поле не было заполнено.
  2. Отображается только «Пожалуйста, введите действительное имя», если поле было заполнено/когда пользователь вводит, но содержит цифры (когда это не должно быть).

У меня вроде как эта половина работает.

И проблема, с которой я столкнулся, заключается в том, что моя проверка не работает должным образом.

Если я введу правильный текст, появится второе сообщение об ошибке. Если я удалю допустимый текст, появятся оба сообщения об ошибке.

Я думаю, что первое сообщение об ошибке работает нормально.

Я просто хочу, чтобы второе сообщение об ошибке отображалось только при вводе пользователем (не тогда, когда они удалили текст).

Каков наилучший способ достичь этого?

Спасибо!

Каков наилучший способ форматирования логики подобным образом (только с использованием JavaScript, а не jQuery).

 function checkFirstNameValidity(value) {
    return /^[^0-9 ;:""`|!?<>().,/\@#$£%^amp;*]{1,30}$/.test(value);
};

const firstNameField = document.getElementById("n-form-first-name");
const nameError1 = document.getElementById("n-form-first-name-error-1");
const nameError2 = document.getElementById("n-form-first-name-error-2");

let isFirstNameFieldValid = "";
let isSecondNameFieldValid = "";

function validateFirstName(e) {
    e.preventDefault();
    isFirstNameFieldValid = true;

    if (!firstNameField.value) {
        // nameError.outerText = "Please enter a first name";
        nameError1.classList.add("visible");
        firstNameField.classList.add("invalid");
        nameError1.setAttribute("aria-hidden", false);
        nameError1.setAttribute("aria-invalid", true);
        return isFirstNameFieldValid = false;
    }

    else if (firstNameField.value amp;amp; !checkFirstNameValidity.value) {
        // nameError2.outerText = "Please enter a valid first name";
        nameError2.classList.add("visible");
        firstNameField.classList.add("invalid");
        nameError2.setAttribute("aria-hidden", false);
        nameError2.setAttribute("aria-invalid", true);
        return isSecondNameFieldValid = false;
    }
    // return isFirstNameFieldValid;
};

function myFunction() {
    if (isFirstNameFieldValid === true) {
        console.log("isFirstNameFieldValid", isFirstNameFieldValid);
        nameError1.classList.remove("visible");
        firstNameField.classList.remove("invalid");
    } else {
        console.log("isFirstNameFieldValid", isFirstNameFieldValid);
    }

    if (isSecondNameFieldValid === true) {
        console.log("isSecondNameFieldValid", isSecondNameFieldValid);
        nameError2.classList.remove("visible");
        firstNameField.classList.remove("invalid");
    } else {
        console.log("isSecondNameFieldValid", isSecondNameFieldValid);
    }
};

firstNameField.addEventListener("input", validateFirstName); 
 /* First name */
#n-form-first-name-error-1, #n-form-first-name-error-2 {
    display: none;
    font-size: 0.8em;
  }

#n-form-first-name-error-1.visible  {
    display: block;
}

#n-form-first-name-error-2.visible  {
    display: block;
}

input[type=text].invalid {
    border-color: red;
}

input[type=text].valid {
    border-color: #f60;
} 
     <form>
      <div class="n-form-booker-contact-details">
        <!-- Contact Fields -->
        <div class="n-form-details">
          <!-- First Name -->
          <input type="text" id="n-form-first-name" name="n-form-first-name" placeholder="First name" onfocusout="myFunction()" required>
          <label for="n-form-first-name">First name</label>
          <span class="error" id="n-form-first-name-error-1" aria-live="polite">Please enter a first name</span>
          <span class="error" id="n-form-first-name-error-2" aria-live="polite">Please enter a valid first name</span>
        </div>
    </form>

Комментарии:

1. Удалите всю проверку javascript и используйте api проверки ограничений , у вас уже есть required атрибут, поэтому используйте его? вы можете добавить шаблон, чтобы ограничить количество символов

2. @Endless — я не хочу использовать проверку HTML5, так как вы не можете стилизовать сообщения об ошибках. Поэтому мне нужна проверка javascript на стороне клиента пользователя.

3. Я думаю, что это лучше, чем любая проверка JS. Конечно, вы не можете его стилизовать, но это не так уж уродливо… он локализован, выдает динамическое сообщение об ошибке в зависимости от того, что это за ошибка. он автоматически сфокусируется на неправильном поле. Вам не нужен никакой javascript — так что меньше ошибок. и эй, вы все еще можете использовать проверку ограничений codesource.io/… вместе с js и выполняйте пользовательский стиль и css

4. Спасибо @Endless — я ценю объяснение и ссылку, и я посмотрю на это. К сожалению, наша кодовая база немного ограничена, поэтому мне пришлось пойти по этому конкретному маршруту. Но все это полезно и полезно знать.

Ответ №1:

Возможно, это не то, что вам нужно, но я немного упростил эту функцию. Нет необходимости, чтобы ваши ошибки уже находились там в ожидании включения/выключения в качестве отдельных элементов. Вы можете просто иметь один элемент ошибки и заполнить его сообщением об ошибке.

 function validateFirstName(e) {
  e.preventDefault();
  nameError = document.querySelector('#n-form-first-name-error');
  nameError.style.display = "none";
  let error = '';
  if (firstNameField.value.trim() == "") {
    error = "Please enter a first name";

  } else if (!checkFirstNameValidity(firstNameField.value.trim())) {
    error = "Please enter a valid first name";
  }
  if (error) {
    nameError.style.display = "block";
    nameError.innerHTML = error
  }

}
 
 function checkFirstNameValidity(value) {
  return /^[^0-9 ;:""`|!?<>().,/\@#$£%^amp;*]{1,30}$/.test(value);
};

const firstNameField = document.getElementById("n-form-first-name");
const nameError1 = document.getElementById("n-form-first-name-error-1");
const nameError2 = document.getElementById("n-form-first-name-error-2");

let isFirstNameFieldValid = "";
let isSecondNameFieldValid = "";

function validateFirstName(e) {
  e.preventDefault();
  nameError = document.querySelector('#n-form-first-name-error');
  nameError.style.display = "none";
  let error = '';
  if (firstNameField.value.trim() == "") {
    error = "Please enter a first name";

  } else if (!checkFirstNameValidity(firstNameField.value.trim())) {
    error = "Please enter a valid first name";
  }
  if (error) {
    nameError.style.display = "block";
    nameError.innerHTML = error
  }
   

   
};

function myFunction() {
  if (isFirstNameFieldValid === true) {
    console.log("isFirstNameFieldValid", isFirstNameFieldValid);
    nameError1.classList.remove("visible");
    firstNameField.classList.remove("invalid");
  } else {
    console.log("isFirstNameFieldValid", isFirstNameFieldValid);
  }

  if (isSecondNameFieldValid === true) {
    console.log("isSecondNameFieldValid", isSecondNameFieldValid);
    nameError2.classList.remove("visible");
    firstNameField.classList.remove("invalid");
  } else {
    console.log("isSecondNameFieldValid", isSecondNameFieldValid);
  }
};

firstNameField.addEventListener("input", validateFirstName); 
 /* First name */

#n-form-first-name-error-1,
#n-form-first-name-error-2 {
  display: none;
  font-size: 0.8em;
}

#n-form-first-name-error-1.visible {
  display: block;
}

#n-form-first-name-error-2.visible {
  display: block;
}

input[type=text].invalid {
  border-color: red;
}

input[type=text].valid {
  border-color: #f60;
} 
 <form>
  <div class="n-form-booker-contact-details">
    <!-- Contact Fields -->
    <div class="n-form-details">
      <!-- First Name -->
      <input type="text" id="n-form-first-name" name="n-form-first-name" placeholder="First name" onfocusout="myFunction()" required>
      <label for="n-form-first-name">First name</label>
      <div class="error" id="n-form-first-name-error" aria-live="polite">Please enter a first name</div>

    </div>
</form>

Комментарии:

1. Боже, это идеально и именно то, что я искал, большое вам спасибо!!!! Таким образом, вы отображаете стиль сообщения об ошибке, на основе которого запускается сообщение об ошибке? Большое вам спасибо!! Я знал, что есть более чистый способ сделать это!! 🙂 Я задавался вопросом, почему вы использовали .trim()?

2. .trim() удаляет пробелы в начале и конце строки, поэтому, если бы я ввел несколько пробелов, я все равно получил бы ошибку, хотя технически там были символы

Метки: ,