JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<script src="http://jetbookingdirect.com/skiingmarketing/js/jquery.validate.min.js"></script>
            <form id="enquiry" action="index.php" method="post">
            
            <fieldset>
            
            <span><label for="name">Your Name:</label><input name="name" id="name" type="text" ></span>
            
            <span><label for="email">Your Email:</label><input type="email" id="email" name="email" ></span>
            
            <span><label for="numberform">Your Number:</label><input type="numberform" id="numberform" ></span>
            
            </fieldset>
            
            <fieldset class="message"><span class="message"><label for="message">Your Enquiry:</label><textarea name="message" id="message" cols="10" rows="5"></textarea></span>
            
            </fieldset>
            
            <fieldset class="submit"><button>Send my request &rarr;</button><a href="#" class="closeLink">Cancel</a></fieldset>
            
            </form>

JavaScript

// validate signup form on keyup and submit
    $("#enquiry").validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            number: {
                required: true,
                minlength: 3                
            },
            message: {
                required: true,
                minlength: 20                
            },            
        },
        messages: {
            name: "Please enter your full name",
            number: {
                required: "Please provide a contact number",
                minlength: "You must provide a full contact number"
            },
            email: "Please enter a valid email address",
            message: "Please enter a message at least 20 characters long",
        }
        
    });