Code editor in upfront/spirit cannot handle HTML5 form validation

Any reason I cannot get a form validation to work in the code editor in Spirit theme?

<form action="" method="post">
<fieldset>
<legend>Booking Details</legend>
<div>
<label for="name">Name:</label>
<input id="name" name="name" value="" required pattern="[A-Za-z-0-9]+s[A-Za-z-'0-9]+" aria-required="true" aria-describedby="name-format">
<span id="name-format" class="help">Format: firstname lastname</span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="" required aria-required="true">
</div>
<div>
<label for="website">Website:</label>
<input type="url" id="website" name="website" value="">
</div>
<div>
<label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
<input type="number" id="numTickets" name="numTickets" value="" required aria-required="true" min="1" max="4">
</div>
<div class="submit">
<input type="submit" value="Submit">
</div>
</fieldset>
</form>

Seems to hate the "required" Attribute.

  • Kasia Swiderska

    Hello Jason,

    I've tested your code in Spirit theme and it works fine - I just changed required to required="required" - so form looks like this

    <form action="" method="post">
    <fieldset>
    <legend>Booking Details</legend>
    <div>
    <label for="name">Name:</label>
    <input id="name" name="name" value="" required="required" pattern="[A-Za-z-0-9]+s[A-Za-z-'0-9]+" aria-required="true" aria-describedby="name-format">
    <span id="name-format" class="help">Format: firstname lastname</span>
    </div>
    <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" value="" required="required" aria-required="true">
    </div>
    <div>
    <label for="website">Website:</label>
    <input type="url" id="website" name="website" value="">
    </div>
    <div>
    <label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
    <input type="number" id="numTickets" name="numTickets" value="" required="required" aria-required="true" min="1" max="4">
    </div>
    <div class="submit">
    <input type="submit" value="Submit">
    </div>
    </fieldset>
    </form>

    Also I see that you still use previous version of the theme - I recommend you update it to the latest version as it has lots of improvements.

    Kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.