HTML and Javascript: Prevent submitting a non-filled inputs in a form

Question

So basically now I'm building a registration page, I'm really green on HTML and JS, I tried to prevent users from submitting a non-filled input, but I only added a 'required' tag on HTML. So now if users remove the 'required' tag in the developer console (f12) they can submit an empty form, how can I prevent that from doing? I tried this on javascript but it doesn't seem working:

function Validate() {
    var msg = "",
        fields = document.getElementById("username").getElementsByTagName("input");

    for (var i = 0; i < fields.length; i++) {
        if (fields[i].value == "")
            msg += fields[i].title + ' is required. \n';
    }

    if (msg) {
        alert(msg);
        return false;
    } else
        return true;
}
document.getElementById("username").onkeypress = function(e) {
    var chr = String.fromCharCode(e.which);
    if (" `~!@#$%^&*()-=+_/*-+?.,?><}{[]':;';.,|\"".indexOf(chr) >= 0)
        return false;
};
document.getElementById("password").onkeypress = function(e) {
    var chr = String.fromCharCode(e.which);
    if ("`~!@#$%^&*()-=+_/*-+?.,?><}{[]':;';.,|\"".indexOf(chr) >= 0)
        return false;
};

<form method="POST" onsubmit="return validateform()">
    <h2 class="title"><span style="color:#38d39f;font-family:passion one;">WIN</span><span style="font-family:passion one;">TEKA IoT</span></h2>
    <div class="input-div one">
        <div class="i">
            <i class="fas fa-user"></i>
        </div>
        <div class="div">
            <h5>Username</h5>
            <input type="text" class="input" name="username" autocomplete="off" minlength="3" maxlength="20" id="username" required>
        </div>
    </div>
    <div class="input-div pass">
        <div class="i">
            <i class="fas fa-lock"></i>
        </div>
        <div class="div">
            <h5>Password</h5>
            <input type="password" class="input" name="password" autocomplete="off" minlength="6" maxlength="80" id="password" required>
        </div>
    </div>
    <div class="input-div pass">
        <div class="i">
            <i class="fas fa-lock"></i>
        </div>
        <div class="div">
            <h5>Email</h5>
            <input type="email" class="input" name="email" autocomplete="off" required>
        </div>
    </div>
    <a href="{{ url_for('testai') }}">Already have an account?</a>
    <input type="submit" class="btn" value="Register">
</form>
<script type="text/javascript" src="{{ url_for('static',filename='main.js') }}"></script>

score 0 · Answer 1 · answered Feb 27 '20 at 13:06

0

Users are always able to modify the front-end. You should check for empty request on your backend. What you are trying to achieve is an extra layer of security from accidental requests, but who wants to submit empty requests will find the way to do it.
What should you do?
Check for each field in your backend to see whether it's an empty request, by checking eg. the length, and if it is less than the required, you can just ignore the request.

answered Feb 27 '20 at 13:06

KDani-99

145
8

1

I already did that, but is there any other way in JS or HTML to prevent this? – DzITC Feb 27 '20 at 13:07
Sadly, no. Anything that happens on client side can be modifid by the user. You always have to create your validation on server side to prevent attacks. Your code is fine , however, it only stops accidental click or users who don't really know what a developer tools is. They can even make requests from applications like [postman](https://www.postman.com). – KDani-99 Feb 27 '20 at 13:12
Thanks man I'll work with back-end then:) – DzITC Feb 27 '20 at 13:14

HTML and Javascript: Prevent submitting a non-filled inputs in a form

1 Answers1