<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form class="form-horizontal" id="register_form" method="post" action="" enctype="multipart/form-data">
<fieldset>
<!-- Form Name -->
<legend>Book a Tour</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-4">
<input name="name" type="text" id="fname" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="emailaddress">Email Address</label>
<div class="col-md-4">
<input id="emailaddress" name="emailaddress" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="phone">Phone Number</label>
<div class="col-md-4">
<input id="phone" name="phone" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="tourselection">Tour</label>
<div class="col-md-4">
<select id="tourselection" name="tourselection" class="form-control">
<option value="1">Charter Fishing Trip</option>
<option value="2">Booze Cruise</option>
<option value="3">Kayak per person</option>
<option value="4">Airboat</option>
</select>
</div>
</div>
<!-- Multiple Radios -->
<div class="form-group">
<label class="col-md-4 control-label" for="airboatsize">Airboat Size</label>
<div class="col-md-4">
<div class="radio">
<label for="airboatsize-0">
<input type="radio" name="airboatsize" id="airboatsize-0" value="1" checked="checked">
Small
</label>
</div>
<div class="radio">
<label for="airboatsize-1">
<input type="radio" name="airboatsize" id="airboatsize-1" value="2">
Large
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="quantity">Number of People</label>
<div class="col-md-4">
<input id="quantity" name="quantity" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="dateselection">Date</label>
<div class="col-md-4">
<input id="dateselection" name="dateselection" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="timeselect">Time</label>
<div class="col-md-4">
<select id="timeselect" name="timeselect" class="form-control">
<option value="1">9:45a</option>
<option value="2">12p</option>
<option value="3">2p</option>
<option value="4">4p</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="hotel">Hotel Name</label>
<div class="col-md-4">
<input id="hotel" name="hotel" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="pickup">Hotel Pickup</label>
<div class="col-md-4">
<label class="checkbox-inline" for="pickup-0">
<input type="checkbox" name="pickup" id="pickup-0" value="1">
Yes
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="pickup">Submit</label>
<div class="col-md-4">
<input name="submit" class="btn btn-danger" type="submit" value="Add">
</div>
</div>
</fieldset>
</form>
var Script = function () {
/*$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});*/
$().ready(function() {
// validate the comment form when it is submitted
$("#feedback_form").validate();
// validate signup form on keyup and submit
$("#register_form").validate({
rules: {
fname: {
required: true,
minlength: 3
},
address1: {
required: true,
minlength: 10
},
city: {
required: true,
minlength: 3
},
zipcode: {
required: true,
minlength: 4
},
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
fname: {
required: "Please enter a First Name.",
minlength: "Your First Name must consist of at least 3 characters long."
},
address1: {
required: "Please enter a Address.",
minlength: "Your Address must consist of at least 10 characters long."
},
city: {
required: "Please enter a City.",
minlength: "Your City must consist of at least 3 characters long."
},
zipcode: {
required: "Please enter a Zipcode.",
minlength: "Your Zipcode must consist of at least 4 characters long."
},
username: {
required: "Please enter a Username.",
minlength: "Your username must consist of at least 5 characters long."
},
password: {
required: "Please provide a password.",
minlength: "Your password must be at least 5 characters long."
},
confirm_password: {
required: "Please provide a password.",
minlength: "Your password must be at least 5 characters long.",
equalTo: "Please enter the same password as above."
},
email: "Please enter a valid email address.",
agree: "Please accept our terms & condition."
}
});
// propose username by combining first- and lastname
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
topics[this.checked ? "removeClass" : "addClass"]("gray");
topicInputs.attr("disabled", !this.checked);
});
//add item validation
// validate signup form on keyup and submit
$("#additem_form").validate({
rules: {
select_cat: {
required: true,
},
select_sub_cat: {
required: true,
},
select_model: {
required: true,
},
item_name: {
required: true,
minlength: 3
},
price1: {
required: true,
},
price2: {
required: true,
},
price3: {
required: true,
},
file_1: {
required: true,
}
},
messages: {
select_cat: {
required: "Please Select Main Category.",
},
select_sub_cat: {
required: "Please Select Sub Category.",
},
select_model: {
required: "Please Select Model.",
},
item_name: {
required: "Please enter Item Name.",
minlength: "Item Name must consist of at least 3 characters long."
},
price1: {
required: "Please enter Price.",
},
price2: {
required: "Please enter Price.",
},
price3: {
required: "Please enter Price.",
},
file_1: ""
}
});
});
}();
