How to put constraints on HTML form inputs?

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 <a href="/welcome">here</a> 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>