Input validity is not working properly, what sould I do?

Issue

Hello I am working on user signup form, each input field has some restirctions like first_name has the restriction of 20 length and only alphabates can be entered. Everything is working fine except if I enter the first_name as ammy566 it shows the error Please enter the alphabates only but when I immediately correct it as ammy it still shows the same error on frontend. Please help

Here is my html

{% extends 'base.html' %}
{% load static %}

{% block head %}
<title>
    Signup form
</title>
{% endblock %}

{% block body %}
<main>
    {% include 'messages.html' %}
    {% block content %}
    {% endblock %}
</main>
<div class="position">
    <div class="container">
        <div class="text-center"></div>
        <form class="form-style-5" method="post" style="margin-top:20px">
            <h1 class="text-center" id="siguptext"><b>Sign up</b></h1>
            {% csrf_token %}
            <table>
                <div class="form-row" style="margin-bottom: 10px">
                    <div class="col-sm-12">
                        <label for="{{user_form.first_name_tag}}">First Name</label>
                        <input type="text" name="first_name" maxlength="20" id="id_first_name" pattern="[A-Za-z]{1,20}"
                            required>

                        <label for="{{user_form.last_name_tag}}">Last Name</label>
                        <input type="text" name="last_name" maxlength="20" id="id_last_name" pattern="[A-Za-z]{1,20}"
                            required>

                        <label for="{{user_form.phone_tag}}">Phone</label>
                        <input type="text" name="phone" maxlength="12" placeholder="e.g. 923xxxxxxxxx" id="id_phone"
                            pattern="^923[0-9]{9}$" title="Please use the valid format (923xxxxxxxxx)."
                            required>

                        <label for="{{user_form.password_tag}}">Password</label>
                        <input type="password" name="password" placeholder="e.g. alpha-numeric combination"
                            maxlength="30" id="id_password" pattern=".{8,}" required>

                        <label for="{{user_form.confirm_password_tag}}">Confirm password</label>
                        <input type="password" name="confirm_password" maxlength="30" id="id_confirm_password" required>
                    </div>
                </div>
                <button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="submit"
                    id="signupbtn"><b>Sign up</b></button>
                <hr>
                <h3 class="text-center" id="alhere">Already have account?</h3>
                <div class="row">
                    <div class="col-sm-12">
                        <a href="/login" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3"
                            id="signinbtn">Sign-in here
                        </a>
                    </div>
                </div>
            </table>
        </form>
    </div>
</div>
<script src="{% static 'admin/js/user_signup.js' %}"></script>
{% endblock %}

Here is my javascript

var input = document.getElementById('id_first_name');
input.oninvalid = function(event) {
    event.target.setCustomValidity('Please enter Alphabets only.');
}

var input = document.getElementById('id_last_name');
input.oninvalid = function(event) {
    event.target.setCustomValidity('Please enter Alphabets only.');
}

var input = document.getElementById('id_phone');
input.oninvalid = function(event) {
    event.target.setCustomValidity('Your phone should be in 923xxxxxxxxx');
}

var input = document.getElementById('id_password');
input.oninvalid = function(event) {
    event.target.setCustomValidity('Your password should be atleast 8 alpha-numeric character long.');
}

Solution

Replace your js file with this What it does is: on every input change it resets the validity function. It works like you check the validity after submit button is clicked and when you change the input, it resets the validity. I hope I have explained you this better

var first_name = document.getElementById('id_first_name');
first_name.oninvalid = function(event) {
    event.target.setCustomValidity('Please enter Alphabets only.');
};
first_name.oninput = function(event){
    event.target.setCustomValidity('');
}


var last_name = document.getElementById('id_last_name');
last_name.oninvalid = function(event) {
    event.target.setCustomValidity('Please enter Alphabets only.');
};
last_name.oninput = function(event){
    event.target.setCustomValidity('');
}


var phone = document.getElementById('id_phone');
phone.oninvalid = function(event) {
    event.target.setCustomValidity('Your phone should be in 923xxxxxxxxx');
};
phone.oninput = function(event){
    event.target.setCustomValidity('');
}


var password = document.getElementById('id_password');
password.oninvalid = function(event) {
    event.target.setCustomValidity('Your password should be atleast 8 alpha-numeric character long.');
};
password.oninput = function(event){
    event.target.setCustomValidity('');
}

Answered By - Npythondev