JSFiddle - React, Tailwind, and code Playground

by Adrian Carriger

HTML

<h1>Reservation Request</h1>

<form action="response.html" method="get" name="reservation_form" id="reservation_form">
    <fieldset>
        <legend>General Information</legend>
        <label for="arrival_date">Arrival date:</label>
        <input type="text" name="arrival_date" id="arrival_date" autofocus>
        <br>
        <label for="nights">Nights:</label>
        <input type="text" name="nights" id="nights">
        <br>
        <label>Adults:</label>
        <select name="adults" id="adults">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <br>
        <label>Children:</label>
        <select name="children" id="children">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <br>
    </fieldset>
    <fieldset>
        <legend>Preferences</legend>
        <label>Room type:</label>
        <input type="radio" name="room" id="standard" class="left" checked>Standard&nbsp;&nbsp;&nbsp;
        <input type="radio" name="room" id="business" class="left">Business&nbsp;&nbsp;&nbsp;
        <input type="radio" name="room" id="suite" class="left last">Suite
        <br>
        <label>Bed type:</label>
        <input type="radio" name="bed" id="king" class="left" checked>King&nbsp;&nbsp;&nbsp;
        <input type="radio" name="bed" id="double" class="left last">Double Double
        <br>
        <input type="checkbox" name="smoking" id="smoking">Smoking
        <br>
    </fieldset>
    <fieldset>
        <legend>Contact Information</legend>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name">
        <br>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email">
        <br>
   ...

JavaScript

$(document).ready(function () {
    $("#arrival_date").focus;
    var $fields = $("#reservation_form").find('input');
    $("#reservation_form").submit(function (e) {
        var $emptyFields = $fields.filter(function () {
            // remove the $.trim if whitespace is counted as filled
            return $.trim(this.value) === "";
        });
        if ($emptyFields.length || !$.isNumeric($("#nights").val()) || !validateEmail($("#email").val())) {
            e.preventDefault();
        }

        function storeValues(form) { //function to store cookie values from input boxes
            setCookie("arrival_date", form.arrival_date.value);
            setCookie("nights", form.nights.value);
            setCookie("name", form.name.value);
            setCookie("email", form.email.value);
            setCookie("phone", form.phone.value);
            return true;
        }
    });

    function validateEmail(email) {
        var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        return re.test(email);
    }
});