Base Bootstrap

by godsnake

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<div class="container">
    <div class="row" style="transition: all 0.25s;">
        <div class="col-sm-12 align-items-center align-self-center" style="transition: all 0.25s; flex-wrap:wrap;">



            <h1 class="headline semibolder text-white mt-2 mt-md-0 text-shadower">Voozlr connects you to local creators online</h1>

            <a name="PostForm"></a>
            <form class="p-sm-3 p-2 signupForm1 bg-black input-group mb-sm-3 rounded" method="post" action="./signup/chooseaccount.html">
                <p class="bigsentence text-white text-shadow text-center semibolder" style="line-height:1.6;">Join thousands <span class="d-none d-md-inline-block">of local people and creators </span> already on Voozlr
                    <span style="width:2px;" class=""></span> </p>


                <div class="w-100">

                    <div class="pm0 form-row w-100">
                        <div class="input-group pm0 col-sm col-8 mx-auto">

                            <input type="text" name="autocomplete" id="autocomplete" class="lightfield form-control mx-auto sentence rounded" placeholder="City" />
                        </div>
                        <div class="input-group py-0 my-0 mr-0 pr-0 col-sm col-4 mx-auto">
                            <select name="state" id="inputState" class="state d-inline-block d-sm-none lightfield form-control mx-auto sentence rounded">
        <option value="" selected>...</option>
	<option value="AL">AL</option>
	<option...

JavaScript

jQuery.validator.addMethod('lettersonly', function(value, element) {
    return this.optional(element) || /^[a-z," " áãâäàéêëèíîïìóõôöòúûüùçñ]+$/i.test(value);
}, "Letters and spaces only please");

$(".signupForm1").validate({
    // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",
    errorElement: 'div',
    errorPlacement: function(error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertBefore(element.select);
        }
    },
    rules: {
        autocomplete: {
            required: true,
            minlength: 3,
            maxlength: 30,
            lettersonly: true
        },
        state: {
            required: true
        },

        email2: {
            email: true,
            required: true
        }
    },
    highlight: function(element, errorClass) { 
        $(element).addClass(errorClass);
    },
    unhighlight: function(element, errorClass) { 
        $(element).removeClass(errorClass);
    },
    messages: {
        email2: {
            required: "Enter your email address",
        },
        state: {
            required: "Enter your state"
        },
        autocomplete: {
            required: "Enter your city",
            minlength: "Too short for a city name",
            maxlength: "Too long for a city name",
            lettersonly: "Only use letters and spaces"

        }
    }
});