New to bootstrap and struggling with form layout.
While I have a lot of development experience, I've only about 3 days working with Bootstrap. I'm running into problems with layout and in getting the form to validate.
The more immediate problem is the layout - namely that the two columns for first and last name need to be side by side. It works now, but when I change the code to add separate form-group tags to each field, the name fields wind up being on top of one another rather than adjacent as I need. I've looked and tried a number of things but can't get anything to work yet. Obviously, if necessary, I can live with the stacked fields but I really want those two adjacent in the larger formats.
The second problem has do to with the validation but that's a separate question I believe.
I'm reach out for help now because I need to get a handle on it by Monday as the form needs to be done by Wednesday. I'm including the testing code I'm using below in hopes that someone can help show me where I'm going wrong.
Many thanks in advance as always
The more immediate problem is the layout - namely that the two columns for first and last name need to be side by side. It works now, but when I change the code to add separate form-group tags to each field, the name fields wind up being on top of one another rather than adjacent as I need. I've looked and tried a number of things but can't get anything to work yet. Obviously, if necessary, I can live with the stacked fields but I really want those two adjacent in the larger formats.
The second problem has do to with the validation but that's a separate question I believe.
I'm reach out for help now because I need to get a handle on it by Monday as the form needs to be done by Wednesday. I'm including the testing code I'm using below in hopes that someone can help show me where I'm going wrong.
Many thanks in advance as always
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootply snippet - multicolumn form</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css">
<!--[if lt IE 9]>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
<style type="text/css">
.glyphicon {margin-right:1.2em;}
</style>
</head>
<body >
<div class="container">
<div class="row clearfix">
<form data-toggle="validator" role="form" id="contact_form">
<div class="row">
<div class="column col-xs-10 col-xs-offset-1 col-md-7 col-lg-7">
<div class="form-group">
<div class="column col-xs-12 col-md-6 col-lg-6">
<label class="control-label"><span class="required">*</span>Your First Name</label>
<input name="fName" id="fName" type="text" class="form-control">
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="column col-xs-12 col-md-6 col-lg-6">
<label class="control-label"><span class="required">*</span>Your Last Name</label>
<input name="lName" id="lName" type="text" class="form-control">
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="column col-xs-12 col-lg-12">
<label class="control-label"><span class="required">*</span>Your Email</label>
<input type="text" class="form-control">
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<div class="column col-xs-12 col-lg-12">
<button type="submit" >Send <span class="glyphicon"></span></button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<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>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.js"></script>
<script>
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fName: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your first name'
}
}
},
lName: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your last name'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
}
}
})
.on('success.form.bv', function(e) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
$('#contact_form').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
</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.
welcome :)
ASKER