Как я могу требовать, чтобы поля ввода имели более трех символов?

Question

function validate(){
    let name = document.getElementById('first_name');
    if(name.value.length > 3){
        return true;
    }else
    {
        document.getElementById('name').innerText = 'First name should be more the Three Characters';
        name.focus();
        return false;
    }
}

Выше функции, что здесь может быть не так?

здесь html

<form method="POST" onSubmit = "return Validate();">
    <div class="form-row">
        <div class="form-group col-md-12">
            <label>First name</label>
            <span id="name" class="info"></span>
            <input type="text" class="form-control" id="first_name" name="first_name" required>
        </div>

        <div class="form-group col-md-12">
            <label>Last name</label>
            <input type="text" class="form-control" name="last_name" required>
        </div>

        <div class="form-group col-md-8">
            <label>Town name</label>
            <input type="text" class="form-control" name="town_name" required>
        </div>
        <button type="submit" class="btn btn-primary btn-sm" name="add">Submit</button>
    </div>
</form>

Я хочу сделать проверку только для поля имени, где пользователь должен ввести имя длиной не менее трех символов, используя javascript!

Answer 1

Почему бы не использовать проверку HTML5?

<input type="text" class="form-control" id="first_name" name="first_name" required pattern="[A-Za-z]{3,}">

Важной частью является pattern="[A-Za-z]{3,}" - это регулярное выражение, которое заставляет содержимое поля быть алфавитными символами с минимум 3 ( и не максимум)