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;">
			
	
		<form id="signupform" class="mt-4 p-sm-3 p-2 signupForm1 input-group mb-sm-3 rounded" method="post" action="#">
 
 
 
 

	<div class=" form-row w-100">

	<div class="input-group col-sm-8 col-12 w-100 ">
       <label style="" class=" w-100">
      <input type="text" name="autocomplete" id="autocomplete" class="lightfield form-control sentence rounded" placeholder="City"/> <div style=""class="ml-1">  <label for="autocomplete" class="text-left p-0 m-0 error text-danger" generated="true"></label>      </div>
      
     </label>
    </div>
    
    
    
           <div class="input-group w-100 col-sm-4 col-12 px-1"> 
    		<label class=" w-100">

      <select id="inputState" name="state" class="state lightfield form-control sentence rounded">
        <option value="" selected>State</option>
				<option value="AK">Alaska</option>
			<option value="AL">Alabama</option>
			<option value="AR">Arkansas</option>
			<option value="AZ">Arizona</option>
			<option value="CA">California</option>
			<option value="CO">Colorado</option>
			<option value="CT">Connecticut</option>
			<option value="DE">Delaware</option>
			<option value="FL">Florida</option>
			<option value="GA">Georgia</option>
			<option value="HI">Hawaii</option>
			<option value="IA">Iowa</option>
			<option...

CSS

label.error {
   display: none;
}

JavaScript

jQuery.validator.addMethod('lettersonly', function(value, element) {
    return this.optional(element) || /^[a-z," " áãâäàéêëèíîïìóõôöòúûüùçñ]+$/i.test(value);
}, "Letters and spaces only please");
	  
$(".signupForm1").validate ({
errorPlacement: function(error, element) {
    return false;
}, 
invalidHandler: function(event, validator) {
    $(document).find('label.error').css('display', 'block !important');
},

	
	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 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"
				
				}, 

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

    });