How to put constraints on HTML form inputs? - html

Question

I have a form that looks like this.
What I want to do is, I want to make sure that Minimum Age < Maximum Age
and Minimum Skill Level < Maximum Skill Level
What is a way to put constraints on the inputs?
HTML
{% extends "template.html" %}
{% set active_page = "events" %}
{% block content %}
<div class="jumbo">
<h2>EVENTS PAGE</h2>
<br/>
<p>Click here to go to the welcome page</p>
</div>
<form action = "/events_success" method=post>
Event Name:<br>
<input type="text" name="eventname" required="">
<br>
Sports:<br>
<select name="sports">
{% for item in sports_data %}
<option value="{{ item[0] }}">{{ item[0] }}</option>
{% endfor %}
</select>
<br>
Location:<br>
<select name="location">
{% for item in loc_data %}
<option value="{{ item[0] }}">{{ item[0] }}</option>
{% endfor %}
</select>
<br>
Time:<br>
<input type="datetime-local" name="time" required>
<br>
Number of Players:<br>
<input type="text" name="numplayers" required>
<br>
Minimum Age:<br>
<input type="text" name="minage" required>
<br>
Maximum Age:<br>
<input type="text" name="maxage" required>
<br>
Minimum Skill Level:<br>
<input type = "radio" name = "minskill" value = "1" required> 1
<input type = "radio" name = "minskill" value = "2"> 2
<input type = "radio" name = "minskill" value = "3"> 3
<input type = "radio" name = "minskill" value = "4"> 4
<input type = "radio" name = "minskill" value = "5"> 5
<br>
Maximum Skill Level:<br>
<input type = "radio" name = "maxskill" value = "1" required> 1
<input type = "radio" name = "maxskill" value = "2"> 2
<input type = "radio" name = "maxskill" value = "3"> 3
<input type = "radio" name = "maxskill" value = "4"> 4
<input type = "radio" name = "maxskill" value = "5"> 5
<br>
<br>
Creator: {{ session['username'] }}<br>
<input type="submit" value="Send">
</form>
{% endblock %}

Answer 1

You can just try some javaScript to prevent the form submission if those fields fails to fulfill that condition. Please check my demo.
**Note: It's just a demo. That's why didn't put any authentication.
window.onload = function() {
let submit = document.querySelector("#submit");
function validateAge(minAge, maxAge) {
let min = parseInt(minAge, 10);
let max = parseInt(maxAge, 10);
return min >= max ? false : true;
}
function validateSkill(minSkill, maxSkill) {
let min = parseInt(minSkill, 10);
let max = parseInt(maxSkill, 10);
return min >= max ? false : true;
}
submit.onclick = function() {
let minAge = document.querySelector("#minage").value;
let maxAge = document.querySelector("#maxage").value;
let radios = document.querySelectorAll('input[type="radio"]:checked');
let minSkill = radios[0].value;
let maxSkill = radios[1].value;
if(validateAge(minAge, maxAge) && validateSkill(minSkill, maxSkill))
return true;
else {
alert("Invalid data");
return false;
}
}
}
<form id="myForm" action = "/events_success" method=post >
Minimum Age:<br>
<input type="text" name="minage" id="minage" required>
<br>
Maximum Age:<br>
<input type="text" name="maxage" id="maxage" required>
<br>
Minimum Skill Level:<br>
<input type = "radio" name = "minskill" value = "1" required> 1
<input type = "radio" name = "minskill" value = "2"> 2
<input type = "radio" name = "minskill" value = "3"> 3
<input type = "radio" name = "minskill" value = "4"> 4
<input type = "radio" name = "minskill" value = "5"> 5
<br>
Maximum Skill Level:<br>
<input type = "radio" name = "maxskill" value = "1" required> 1
<input type = "radio" name = "maxskill" value = "2"> 2
<input type = "radio" name = "maxskill" value = "3"> 3
<input type = "radio" name = "maxskill" value = "4"> 4
<input type = "radio" name = "maxskill" value = "5"> 5
<br>
<br>
<input type="submit" value="Send" id="submit">
</form>

Answer 2

You can use some common PHP validation techniques. These are more beneficial as less risky to injection and other exploits.
PHP:
if (empty($_POST["code"])) {
$errcode = "Verify that you're human";
} else {
$code = test_input($_POST["code"]);
if (!$_POST['code'] < $string) {
$errcode = "Make code greater than string";
}
}
HTML:
<p><label for="code">Scrambled code: </label><input type="text" name="code" id="code" /><span class="error"> * <?php echo $errcode;?></span></p>