JSFiddle - React, Tailwind, and code Playground

by Ganesh Swami

HTML

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <title>MooWoos Stall Booking</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    

</head>

<body>
<div class="container">
    <nav class="navbar navbar-toggleable-md navbar-light">
        <a class="logo"><img src="assets/logo_opt.png"></a>
    </nav>

    <hr>

    <div class="modal fade" id="redirect_page" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="form-horizontal">

                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3 bookingform">
            <h1>Stall Booking Form</h1>
            <p class="lead">
                Fill out the form to book and pay for your stall!
            </p>
            <form id="bookingForm">
                <div class="form-group">
                    <label for="name">Name: </label>
                    <input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
                </div>
                <div class="form-group">
                    <label for="address">Address: </label>
                    <textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
                </div>
                <div class="form-group">
                    <label for="phone">Telephone Number: </label>
                    <input type="text" name="phone" class="form-control"...

JavaScript

$('#stallType-Business').change(function () {
    if($('#stallType-Business').prop('checked')) {
        $('#bizName').attr('required');
    } else {
       $('#bizName').removeAttr('required');
    }
})