{% extends "base.html" %}
{% block title %}Fontify - Make your own font!{% endblock %}

{% block body %}
<h1 class="index">Fontify</h1>
<p class="subtitle">Make your own font!</p>
<a href="/template" target="_blank"><button class="gradient-rect">Print the template</button></a>
<p>Fill the template, scan it, and upload</p>

<div class="font-name">
    <input class="gradient-rect" id="font-name-input" placeholder="Enter a name"></input>
    <script type="text/javascript">
    $(function() {
        $("#font-name-input").on("change keyup paste click", function(e) {
            $("#font-name").val(e.target.value);
        });
    });
    </script>
    <p>Enter a name for your awesome font</p>
</div>

<div class="upload">
    <p>Upload the scanned template</p>
    <form action="/upload-file" class="dropzone gradient-rect" id="uploadDropzone">
        <input type="hidden" id="font-name" name="font-name"></input>
    </form>
    <p><button class="gradient-rect" id="submit-all">Sumbit</button></p>
</div>
{% endblock %}

{% extends "base.html" %}
{% block title %}Fontify - Make your own font!{% endblock %}

{% block body %}
<h1 class="index">Fontify</h1>
<p class="subtitle">Make your own font!</p>
<a href="/template" target="_blank"><button class="gradient-rect">Print the template</button></a>
<p>Fill the template, scan it, and upload</p>

<div class="font-name">
    <input class="gradient-rect" id="font-name-input" placeholder="Enter a name"></input>
    <script type="text/javascript">
    $(function() {
        $("#font-name-input").on("change keyup paste click", function(e) {
            if (/^[a-zA-Z0-9]+$/i.test(e.target.value) === false) {
                $("#font-name-validation").text("Invalid input, only alphnumeric");
                $("#font-name-validation").addClass("alert");
                $("#submit-all").attr("disabled", true);
            } else {
                $("#font-name-validation").text("Enter a name for your awesome font");
                $("#font-name-validation").removeClass("alert");
                $("#submit-all").attr("disabled", false);
            }
            $("#font-name").val(e.target.value);
        });
    });
    </script>
    <p id = "font-name-validation">Enter a name for your awesome font</p>
</div>

<div class="upload">
    <p>Upload the scanned template</p>
    <form action="/upload-file" class="dropzone gradient-rect" id="uploadDropzone">
        <input type="hidden" id="font-name" name="font-name"></input>
    </form>
    <p><button class="gradient-rect" id="submit-all">Sumbit</button></p>
</div>
{% endblock %}

Validate font-name at front end
Validate font-name at front end
