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 bg-light">

	<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 px-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 value="AK">AK</option>
	<option value="AZ">AZ</option>
	<option value="AR">AR</option>
	<option value="CA">CA</option>
	<option value="CO">CO</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 ({


	
	rules: {
			autocomplete:{
		   required: true,
		        minlength: 3,
                maxlength: 30,
			    lettersonly: true
		   },
		   
		   state:{
		   required: true},
		   
        email2: {email:true, required:true}
      },

        messages: {
            email2: {
                required: "Enter your email address",
				},   
				  state: {
                required: "Enter 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"
				
				}, 

                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }    
        }

    });