Needing help getting bootstrap 3 validation to fire
I brand new to bootstrap but not to web development and 3 days in, I need help with the validation. I'm sure I'm missing something pretty basic, but I can't see it. It's really irritating as this is so much like the jquery validators that I use all the time.
I have a form, got a working example of validation and melded the two and nothing happens when I hit submit. Form name matches with the validator, everything has its own form-group, fields have the form-control class, the links to the libraries are all resolving. I've moved the js libraries from bottom of page to top and back again and still nothing.
My test page code is below - FYI, the real form has 3 adjacent columns (thank you Prasadh Baapaat) so that's why it's laid out the way it is. As always, thanks so much in advance for any assistance.
I have a form, got a working example of validation and melded the two and nothing happens when I hit submit. Form name matches with the validator, everything has its own form-group, fields have the form-control class, the links to the libraries are all resolving. I've moved the js libraries from bottom of page to top and back again and still nothing.
My test page code is below - FYI, the real form has 3 adjacent columns (thank you Prasadh Baapaat) so that's why it's laid out the way it is. As always, thanks so much in advance for any assistance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="" />
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- BootstrapValidator CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body >
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 column col-sm-offset-0 col-md-offset-2 col-lg-offset-2">
<form data-toggle="validator" role="form" id="registration-form" method="POST" action="#">
<div class="row">
<div class="column col-xs-10 col-xs-offset-1">
<div class="column col-xs-12 col-md-6 form-group">
<label class="control-label" for="fName">Your First Name</label>
<input name="fName" id="fName" type="text" class="form-control" placeholder="Your First Name">
</div>
<div class="column col-xs-12 col-md-6 form-group">
<label class="control-label" for="lName">Your Last Name</label>
<input name="lName" id="lName" type="text" class="form-control" placeholder="Your Last Name">
</div>
<div class="column col-xs-12 form-group">
<label class="control-label" for=email">Your Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Your Email">
</div>
</div>
</div>
<div class="row">
<div class="column col-xs-10 col-xs-offset-1">
<div class="column col-xs-12 col-lg-12 form-group">
<label class="control-label" for="loc">Choose Location</label>
<select name="loc" id="loc" class="form-control">
<option value="">Select Location --- </option>
<option value="loc1">Location 1</option>
<option value="loc2">Location 2</option>
<option value="loc3">Location 3</option>
<option value="loc4">Location 4</option>
<option value="loc5">Location 5</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="column col-xs-10 col-xs-offset-1">
<div class="column col-xs-12 col-lg-12 form-group">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</form>
<div id="confirmation" class="alert alert-success hidden">
<span class="glyphicon glyphicon-star"></span> Thank you for registering
</div>
</div>
</div>
</div>
<!-- jQuery and Bootstrap JS -->
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- BootstrapValidator -->
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var validator = $("#registration-form").bootstrapValidator({
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields : {
fName : {
validators: {
notEmpty : {
message : "Name is required"
},
stringLength : {
min: 2,
message: "Name must be at least 2 characters long"
},
}
},
email :{
message : "Email address is required",
validators : {
notEmpty : {
message : "Please provide an email address"
},
stringLength: {
min : 6,
max: 35,
message: "Email address must be between 6 and 35 characters long"
},
emailAddress: {
message: "Email address was invalid"
}
}
},
}
});
validator.on("success.form.bv", function (e) {
e.preventDefault();
$("#registration-form").addClass("hidden");
$("#confirmation").removeClass("hidden");
});
});
</script>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER