BootstrapValidator JS

by godsnake

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
	
		<form role="form" data-toggle="validator" action="blank.html" method="post" class="p-sm-3 p-2 signupForm1 bg-black input-group mb-sm-3 rounded">
 <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">
	<span class="error"></span>
	<div class="pm0 form-row w-100">

	<div class="group 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="group py-0 my-0 mr-0 pr-0 col-sm col-4 mx-auto">
      <select name="state" id="state" 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 value="CT">CT</option>
	<option value="DE">DE</option>
	<option value="DC">DC</option>
	<option value="FL">FL</option>
	<option value="GA">GA</option>
	<option value="HI">HI</option>
	<option value="ID">ID</option>
	<option value="IL">IL</option>
	<option value="IN">IN</option>
	<option value="IA">IA</option>
	<option value="KS">KS</option>
	<option value="KY">KY</option>
	<option value="LA">LA</option>
	<option value="ME">ME</option>
	<option...

JavaScript

$(document).ready(function() {
			$('.signupForm1').bootstrapValidator({
				framework : 'bootstrap',

				fields : {
					autocomplete : {
						group : '.group',
						validators : {
							notEmpty : {
								message : 'The city is required'
							}
						}
					},
					state : {
						group : '.group',
						validators : {
							notEmpty : {
								message : 'The state is required'
							}
						}
					},
					email2 : {
						group : '.group',
						validators : {
							notEmpty : {
								message : 'Email is required'
							},
              
                 emailAddress: {
          message: 'Please enter a valid email address'
        },
							
						}
					}
				}
			});
		});