Запрещение пользователю оставлять поле ввода пустым с помощью метода javascript getElementsByClassName
Создал форму. Я просто хочу провести проверку формы. Используется javascript для выполнения этой работы. Внутри кода jS создана функция с именем check. В этой функции, если какой-то пользователь оставляет поле ввода пустым, функция возвращает false, и таким образом, я думаю, может ограничить пользователя, но не происходит. Мой вопрос касается как метода getElement .. (), так и проверки формы.
function check(){
//fname is the value provided into the input field
var fname = document.getElementsByClassName('fname').value;
//checks the inpur field and it is blank then return false
if (fname == '') {
return false;
}
else {
//if the input field is provided then will pass the validity
return true;
}
}<div class = "form">
<!-- created the class here and named form-->
<form class = "" action = "output.html.php" method = "post" onsubmit = "return check()">
<!-- called the check function-->
<input class = "fname" type = "text" name = "name" value = "" placeholder = "Name">
<button type = "submit" name = "button">Send</button>
</form>
</div>Вы также можете добавить регулярное выражение pattern к своим входным данным, чтобы вы могли дать пользователю визуальную индикацию того, какие поля содержат ошибки.
Возможный дубликат Как отменить отправку формы в событии onclick кнопки отправки?
<input required> намного проще и работает без js
Возможный дубликат Что возвращают querySelectorAll, getElementsByClassName и другие методы getElementsBy *?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема в том, что getElementsByClassName возвращает массив, поэтому вы должны использовать либо document.getElementsByClassName('fname')[0].value, либо document.querySelector('.fname').value (querySelector возвращает только первый найденный объект)
Спасибо, помогло.
Вот мой полный код после выполнения.
function check(){
//fname is the value provided into the input field
var fname = document.getElementsByClassName('fname')[0].value;
//var fname = document.querySelector('.fname').value;
//checks the input field and if it is blank then return false
if (fname == '') {
return false;
}
else {
//if the input field is provided then will pass the validity
return true;
}
}<div class = "form">
<!-- created the class here and named form-->
<form class = "" action = "output.html.php" method = "post" onsubmit = "return check()">
<!-- called the check function-->
<input class = "fname" type = "text" name = "name" value = "" placeholder = "Name">
<button type = "submit" name = "button">Send</button>
</form>
</div>
@jordiburgos он не возится с фокусом, просто проверяет, действительно ли значение для размытия, это нормально.