Develop Reference

Disabling and enabling button through jQuery but onclick event not trigerred after button enabled

I have a problem which I dont seem to find a solution for. The problem is this: I have some jQuery which will keep the button disabled until all the form's fields are filled up. When all the fields are filled up the button is being enabled, but the javascript onSubmit event used for the google recaptcha is not being trigerred. Anyone can help in this, please
Code is the one below:
//jquery to disable button until all fields are filled up
$().ready(function() {
// validate signup form on keyup and submit
$("#fbForm").validate({
rules: {
name: {
required: true
},
surname: {
required: true
},
terms: {
required: true
}
},
errorPlacement: function(error, element) {
return true;
},
submitHandler: function() {
}
});
$('#fbForm').change(function() {
if ($("#fbForm").valid()) {
$("#btnSubmit").removeAttr("disabled");
}
});
//recaptcha JS
function onSubmit(token) {
if (screen.width >= 768) {
document.getElementById("fbForm").submit();
}else if (screen.width <= 767){
document.getElementById("fbForm2").submit();
}
}
<form id="fbForm"class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator">
<div class="form-group">
<label for="name "class="col-md-4 control-label">First Name</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<!-- Surname: Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="surname">Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required>
I agree
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>

You are missing a } at the last line to close the ready function. Fix that first.

$().ready(function() {
$('#num').validate();
// validate signup form on keyup and submit
$("fbForm").validate({
rules: {
name: {
required: true
},
surname: {
required: true
},
terms: {
required: true
}
},
errorPlacement: function(error, element) {
return true;
},
submitHandler: function() {
}
});
$('#fbForm').change(function() {
if ($("#fbForm").valid()) {
$("#btnSubmit").removeAttr("disabled");
}
});
//recaptcha JS
function onSubmit(token) {
if (screen.width >= 768) {
document.getElementById("fbForm").submit();
}else if (screen.width <= 767){
document.getElementById("fbForm2").submit();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<form name="formSend" id="fbForm" class="well form-horizontal" action="winesOfDistinction.php?send=true" method="post" data-toggle="validator">
<fieldset>
<div class="form-group">
<label for="name "class="col-md-4 control-label">First Name</label>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="First Name" name="name" id="name" class="form-control" data-minlength="2" data-error="Minimum Lenght of First Name must be made up of at least 2 characters!" value="<?= $name ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<!-- Surname: Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="surname">Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="Last Name" name="surname" id="surname" class="form-control" data-minlength="2" data-error="Minimum Lenght of Last Name must be made up of at least 2 characters!" value="<?= $surname ;?>" required>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="terms"id="terms" data-error="Please check the GDPR Disclaimercheck box in order to be able to submit the data" required>
I agree
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4"><br>
<button id="btnSubmit" name="btnSubmit" disabled="disabled" type="submit" value="" class="g-recaptcha btn btn-success" data-sitekey="6LfuAWcUAAAAAEKjLeOZfygAMxAeld1k4UUMGnfN" data-callback='onSubmit'>SUBMIT <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
Okay, Missing jquery validtor and syntax errors were causing the problem. The snippet works fine.You should use visual code as editor and please resolve syntax errors before posting here.

How to apply validation if input fields are empty?

I am applying validations to all the input where values are left blank. Whenever any input is blank and user will click on save button them we add class has-error and display message in small tag.
I have written following html.
<div class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">
Academic Year is Required
</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input aria-required="true" id="startson" class="form-control block-keypress" type="text"
onclick="css()">
<small id="start_dateHelp" class="text-danger hide">
Start Date is Required
</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input aria-required="true" id="endson" class="form-control block-keypress" type="text" onclick="css()">
<small id="end_dateHelp" class="text-danger hide">
End Date is Required
</small>
</div>
</div>
</div>
...
....
In jquery I am doing following validation on save button click
if((":input").val().trim() =="")
{
$(this).closest(".form-group").addClass( "has-error");
$("small").removeClass('hide');
return;
}
if(academicyearname == "")
{
$("#academicyearname").closest(".form-group").addClass( "has-error");
$("#year_nameHelp").removeClass('hide');
$("#academicyearname").focus();
}
else if(startson == "")
{
$("#startson").closest(".form-group").addClass( "has-error");
$("#start_dateHelp").removeClass('hide');
}
else if(endson == "")
{
$("#endson").closest(".form-group").addClass( "has-error");
$("#end_dateHelp").removeClass('hide');
}
....
The part
if((":input").val().trim() =="")
{
$(this).closest(".form-group").addClass( "has-error");
$("small").removeClass('hide');
return;
}
is not working accordingly. I mean it should be able to dynamically detect which inputs are empty and then add error class to the corresponding input where value is "".

You can use jquery validator js's blank element plugin and you can use it as follows:
$( "input:blank" ).css( "background-color", "#bbbbff" );
Have a look at below:
https://jqueryvalidation.org/blank-selector/
It also can be applied at id and class level.

Try using
var result = $("input:text").val().trim();
if(result == ""){
//do something
}

var vendorError = false;
$(".vendorForm input").each(function () {
if ($(this).val() == '') {
jAlert('Required', 'empty');
vendorError = true;
var div = document.getElementById($(this).attr('id'));
// show meg logic
if (div.style.display !== "block") {
div.style.display = "block";
}
return false;
}
})
if (vendorError) {
return false;
}
HTML file
<div id="vendorForm" class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">
Academic Year is Required
</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input id="startson" value="" class="form-control block-keypress" type="text"
onclick="css()">
<small id="start_dateHelp" class="text-danger hide">
Start Date is Required
</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input id="endson" value="" class="form-control block-keypress" type="text" onclick="css()">
<small id="end_dateHelp" class="text-danger hide">
End Date is Required
</small>
</div>
</div>
</div>
...
....

I understood and somewhat same module i also designed. You can make the use of modal and give that id to in the js and on click button you can run the function in your js file. See my html page:
<div class="modal-body">
<div class="form-group">
<form id = "updateForm" onsubmit="return false" enctype="multipart/form-data">
<div class="left">
<div class="well img_height">
<img id="blah" src="admin_resources/images/user-icon.png"/>
</div>
<div>
<input type="file" name="myfile" onchange="readURL(this);" id="myfile"/>
</div>
</div>
<label for="emp_id">Employee Id:</label>
<input type="text" class="form-control" id="emp_id" name="employeeId" >
<p id="valid_msg_employee_id" class="error_message"></p>
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="firstName" name="firstName" >
<p id="valid_msg_fname" class="error_message"></p>
<label for="lname">Last Name:</label>
<input type="text"class="form-control" id="lastName" name="lastName">
<p id="valid_msg_lname" class="error_message"></p>
<label for="designation">Designation:</label> <br/>
<select name="designation" id="dropdown" class="form-control">
<option value="Select">Select Designation</option>
<option value="manager">Manager</option>
<option value="HR">HR</option>
<option value="Tech Lead">Tech Lead</option>
<option value="QA Lead">QA Lead</option>
<option value="Developer">Developer</option>
<option value="QA-Automation">QA-Automation</option>
<option value="QA-Manual">QA-Manual</option>
<option value="Software Trainee">Software Trainee</option>
<option value="Sr. Software Quality Engineer">Sr. Software Quality Engineer</option>
<option value="SQE">SQE</option>
<option value="Software Quality Engineer">Software Quality Engineer</option>
<option value="Associate Software Engineer">Associate Software Engineer</option>
<option value="QA Manager">QA Manager</option>
</select>
<p id="valid_msg_designation" class="error_message"></p>
<label for="Doj">Joining Date:</label>
<input type="text" class="form-control" id="doj" name="yearOfJoining" >
<p id="valid_msg_year" class="error_message"></p>
<label for="status">Status:</label> <br/>
<select name="status" id="status" class="form-control">
<option value="active">Active</option>
<option value="inactive">inactive</option>
</select>
<p id="valid_msg_designation" class="error_message"></p>
<p id="valid_msg_year" class="error_message"></p>
<label for="email_id">Email-id:</label>
<input type="email" class="form-control" id="email" name="email">
<p id="valid_msg_email" class="error_message"></p>
<label for="quali">Contact:</label>
<input type="text" class="form-control" id="contact" name="mobileNo">
<p id="valid_msg_contact" class="error_message"></p>
<button type="submit" class="btn btn-default" onclick="updateEmployeeDetail();" data-dismiss="modal">Update</button>
<button type="button" class="btn btn-default" onclick = "deleteEmployee();" data-dismiss="modal">Delete</button>
</form>
</div>
</div>
and you can now add a class "erro_message which will be called on the modal:
the js file is this:
function employeeDetail() {
$("#submit_emp").click(function(event) {
var formValid = employeeDetail.formValidation();
if (formValid) {
var formvalue = new FormData($('#addForm')[0]);
$.ajax({
url: "intranet/addEmployee",
type: "POST",
data: formvalue,
contentType: false,
processData: false,
success: function(response) {
$('#your-modal').modal('toggle');
$("#header_success").empty();
$("#header_success").append("Response");
$("#message_success").empty();
$("#message_success").append(response.message);
$('#addForm').trigger("reset");
},
error: function(e) {
$('#your-modal').modal('toggle');
$("#message_success").empty();
$("#message_success").append(e.message);
}
});
} else {
return false;
}
});
You can add many validations on this input type and can append the messge ypuwant on that particular fied:
Hope this might help you.

This is super simplistic and does NOT do the "validation" by checking for example numeric values, etc. but you wanted/asked for the selector for empty text inputs so this gives that.
// put on some event, used change here:
$('input[type=text]').on('change', function() {
// just clear all
$(".form-group").removeClass("has-error");
$("small").addClass('hide');
// filter those empty ones
$('input[type=text]').filter(function() {
return $(this).val().trim() == "";
}).each(function() {
$(this).closest(".form-group").addClass("has-error");
$(this).parent().find("small").removeClass('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">Academic Year is Required</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i> </span>
<input aria-required="true" id="startson" class="form-control block-keypress" type="text" >
<small id="start_dateHelp" class="text-danger hide">Start Date is Required</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon"> <i class="fa fa-calendar"></i> </span>
<input aria-required="true" id="endson" class="form-control block-keypress" type="text" >
<small id="end_dateHelp" class="text-danger hide">End Date is Required</small>
</div>
</div>
</div>

popover on empty inputs after clicking submit using javascript

I want to display error when the user doesn't enter in the input field after he clicks on the submit button. This display should be displayed at right of the input field. But i can't seem to figure out how is that possible using php and javascript. Here is my code:
<?php include "head.php";?>
<div class="container">
<?php
if(isset($_SESSION["error"]) && $_SESSION["error"] != ""){
echo $_SESSION["error"];
}unset($_SESSION["error"]);
if(isset($_SESSION["error1"]) && $_SESSION["error1"] != ""){
echo $_SESSION["error1"];
}unset($_SESSION["error1"]);
if(isset($_SESSION["warning"]) && $_SESSION["warning"] != ""){
echo $_SESSION["warning"];
}unset($_SESSION["warning"]);
if(isset($_SESSION["warning1"]) && $_SESSION["warning1"] != ""){
echo $_SESSION["warning1"];
}unset($_SESSION["warning1"]);
if(isset($_SESSION["success"]) && $_SESSION["success"] != ""){
echo $_SESSION["success"];
}unset($_SESSION["success"]);
?>
<form class="form-horizontal" action="loginprocess.php" method="post">
<!--username input--->
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">username</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" name="username">
</div>
</div>
<!--password input --->
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-
label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3"
placeholder="Password" name="password">
</div>
</div>
<!-- input file --->
<div class="form-group">
<label for="exampleInputFile" class="col-sm-3 control-label">File
input</label>
<div class="col-sm-6">
<input type="file" id="exampleInputFile" name="file">
<!--<p class="help-block">Example block-level help text here.</p>-->
</div>
</div>
<!-- selecting country --->
<div class="form-group">
<label for="country" class="col-sm-3 control-label">Select Country</label>
<div class="col-sm-6">
<select class="form-control" id="country" name="country[]">
Nepal
<span class="caret"></span>
<option>Nepal</option>
<option>USA</option>
<option>Dubai</option>
<option>Nepal</option>
<option>USA</option>
<option>Dubai</option>
<option>Nepal</option>
<option>USA</option>
<option>Dubai</option>
</select>
</div>
</div>
<!-- checkbox--->
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<div class="checkbox">
<label>
<input type="checkbox" name="remember me"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<script>
$(function () {
$("[data-toggle="tooltip"]").tooltip()
})
</script>
<?php
print_r ($_POST);
?>
<?php include "foot.php";?>

https://www.w3schools.com/js/js_validation.asp
Check this. Alternatively you could work with php only and show the message after the form has been submitted (in form handler).
Here you have some more examples using bootstrap:
http://1000hz.github.io/bootstrap-validator/
$(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: {
first_name: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your first name'
}
}
},
last_name: {
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'
}
}
},
phone: {
validators: {
notEmpty: {
message: 'Please supply your phone number'
},
phone: {
country: 'US',
message: 'Please supply a vaild phone number with area code'
}
}
},
address: {
validators: {
stringLength: {
min: 8,
},
notEmpty: {
message: 'Please supply your street address'
}
}
},
city: {
validators: {
stringLength: {
min: 4,
},
notEmpty: {
message: 'Please supply your city'
}
}
},
state: {
validators: {
notEmpty: {
message: 'Please select your state'
}
}
},
zip: {
validators: {
notEmpty: {
message: 'Please supply your zip code'
},
zipCode: {
country: 'US',
message: 'Please supply a vaild zip code'
}
}
},
comment: {
validators: {
stringLength: {
min: 10,
max: 200,
message: 'Please enter at least 10 characters and no more than 200'
},
notEmpty: {
message: 'Please supply a description of your project'
}
}
}
}
})
.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');
});
});
#success_message {
display: none;
}
<head>
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Us Today!</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">First Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Phone #</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="(845)555-1212" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Address</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">City</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="city" class="form-control" type="text">
</div>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label">State</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="state" class="form-control selectpicker">
<option value=" " >Please select your state</option>
<option>Alabama</option>
<option>Alaska</option>
<option >Arizona</option>
<option >Arkansas</option>
<option >California</option>
<option >Colorado</option>
<option >Connecticut</option>
<option >Delaware</option>
<option >District of Columbia</option>
<option> Florida</option>
<option >Georgia</option>
<option >Hawaii</option>
<option >daho</option>
<option >Illinois</option>
<option >Indiana</option>
<option >Iowa</option>
<option> Kansas</option>
<option >Kentucky</option>
<option >Louisiana</option>
<option>Maine</option>
<option >Maryland</option>
<option> Mass</option>
<option >Michigan</option>
<option >Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option> Uttah</option>
<option>Vermont</option>
<option>Virginia</option>
<option >Washington</option>
<option >West Virginia</option>
<option>Wisconsin</option>
<option >Wyoming</option>
</select>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Zip Code</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="Zip Code" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Website or domain name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe"></i></span>
<input name="website" placeholder="Website or domain name" class="form-control" type="text">
</div>
</div>
</div>
<!-- radio checks -->
<div class="form-group">
<label class="col-md-4 control-label">Do you have hosting?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" name="hosting" value="yes" /> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="hosting" value="no" /> No
</label>
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- /.container -->
https://codepen.io/jaycbrf/pen/iBszr

BootstrapValidator feedbackIcons not placed in input fields

I am using BootStrapValidator in my web app and for some reason unknown to myself the feedbackIcons are not being placed in the input fields and are being placed below the input fields, and from what I see in other examples that the feedbackIcons should be placed inside the input fields and because the feedbackIcons are placed below it is throwing my layout off
Here is the picture of what it currently looks like
Here is an example of how the feedbackIcons are to be displayed
Here is my markup
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
.max-size {
max-width: 100%;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: white;
background-color: #347AB6;
}
.panel-heading {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.panel {
border-radius: 0px;
}
</style>
<link href="~/Content/bootstrapValidator.min.css" rel="stylesheet" />
</head>
<body>
<div class="form-horizontal">
<ul class="nav nav-tabs">
<li class="active">Customer Data</li>
<li>SubDivision Assignment</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="CustomerData">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit Customer</strong></div>
<div class="panel-body">
<div class="col-md-6">
<fieldset class="Myfieldset">
<legend class="Mylegend"><h4><b>Address</b></h4></legend>
<div class="form-group">
<label for="txtCustomerFirstName" class="control-label col-md-2" id="lblCustomerFirstName"><b>First Name</b></label>
<div class="col-md-10">
<input id="txtCustomerFirstName" type="text" class="form-control max-size" name="firstname" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerLastName" class="control-label col-md-2" id="lblCustomerLastName"><b>Last Name</b></label>
<div class="col-md-10">
<input id="txtCustomerLastName" type="text" class="form-control max-size" name="lastname" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerAddress1" class="control-label col-md-2" id="lblCustomerAddress1">Address</label>
<div class="col-md-10">
<input id="txtCustomerAddress1" type="text" class="form-control max-size" name="address" />
</div>
</div>
<div class="form-group">
<label for="CustomertxtAddress2" class="control-label col-md-2" id="lblCustomerAddress2">Address2</label>
<div class="col-md-10">
<input id="txtCustomerAddress2" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerCity" class="control-label col-md-2" id="lblCustomerCity">City</label>
<div class="col-md-4">
<input id="txtCustomerCity" type="text" class="form-control max-size" name="city" />
</div>
<label for="txtCustomerCounty" class="control-label col-md-2" id="lblCustomerCounty">County</label>
<div class="col-md-4">
<input id="txtCustomerCounty" type="text" class="form-control" name="County" />
</div>
</div>
<div class="form-group">
<label for="acState" class="control-label col-md-2" id="lblCustomerState"><b>State</b></label>
<div class="col-md-4">
<select id="acState" class="form-control" name="state"></select>
</div>
<label for="txtCustomerZip" class="control-label col-md-2" id="lblCustomerZip">Zip/Postal</label>
<div class="col-md-4">
<input id="txtCustomerZip" type="text" class="form-control" name="zip" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerYearBuilt" class="control-label col-md-2" id="lblCustomerYearBuilt">Year Built</label>
<div class="col-md-10">
<input id="txtCustomerYearBuilt" type="text" class="form-control max-size" name="yearbuilt" />
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="Myfieldset">
<legend class="Mylegend"><h4><b>Contact</b></h4></legend>
<div class="form-group">
<label for="txtCustomerContact" class="control-label col-md-2" id="lblCustomerContact">Contact</label>
<div class="col-md-10">
<input id="txtCustomerContact" type="text" class="form-control max-size" name="customercontact" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerEmail" class="control-label col-md-2" id="lblAdministrationModeratorEmail"><b>Email</b></label>
<div class="col-md-10">
<input id="txtCustomerEmail" type="text" class="form-control max-size" name="email" />
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="control-label col-md-2" id="lblCustomerPhone">Phone</label>
<div class="col-md-10">
<input id="txtPhone" type="text" class="form-control max-size" name="phone" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerFax" class="control-label col-md-2" id="lblCustomerFax">Fax</label>
<div class="col-md-10">
<input id="txtCustomerFax" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerMobile" class="control-label col-md-2" id="lblCustomerMobile">Mobile</label>
<div class="col-md-10">
<input id="txtCustomerMobile" type="text" class="form-control max-size" />
</div>
</div>
<div class="form-group">
<label for="txtCustomerOther" class="control-label col-md-2" id="lblCustomerOther">Other</label>
<div class="col-md-10">
<input id="txtCustomerOther" type="text" class="form-control max-size" />
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="SubDivisionAssignment">
<div class="panel panel-primary">
<div class="panel panel-heading"><strong>Add/Edit SubDivision Assignment</strong></div>
<div class="panel-body">
Off
</div>
</div>
</div>
</div>
<div class="form-group col-md-12">
<button id="btnSave" type="button" class="btn btn-primary pull-right">Save</button>
</div>
</div>
<script src="~/Scripts/Customjs/Customer/CustomerEditorJS.js"></script>
</body>
</html>
and here is my BootstrapValidator code
function ValidateCustomer(){
var validator = $("#CustomerData").bootstrapValidator({
excluded: ':disabled',
container: 'tooltip',
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields: {
firstname: {
message: "First Name is required",
validators: {
notEmpty: {
message: "Please add First Name"
}
}
},
lastname: {
message: "Last Name is required",
validators: {
notEmpty: {
message: "Please add Last Name"
}
}
},
address: {
message: "Address is required",
validators: {
notEmpty: {
message: "Please add Address"
}
}
},
city: {
message: "City is required",
validators: {
notEmpty: {
message: "Please add City"
}
}
},
zip: {
message: "ZipCode is required",
validators: {
notEmpty: {
message: "Please add ZipCode"
}
}
},
city: {
message: "City is required",
validators: {
notEmpty: {
message: "Please add City"
}
}
},
state: {
message: "State is required",
validators: {
notEmpty: {
message: "Please add State"
}
}
},
yearbuilt: {
message: "Year Built is required",
validators: {
notEmpty: {
message: "Please add Year Built"
}
}
},
phone: {
message: "Phone is required",
validators: {
notEmpty: {
message: "Please add Phone"
}
}
},
email: {
message: "Email address is required",
validators: {
notEmpty: {
message: "Please provide Email address"
},
emailAddress: {
message: "Email address was invalid"
}
}
},
customercontact: {
message: "Contact name is required",
validators: {
notEmpty: {
message: "Please add Contact name"
}
}
}
},
});
}

Bootstrap 3 Multiple Date Validation

I am using bootstrap ver. 3 along with bootstrapValidator ver. 0.5.2 and Datetimepicker ver. 3. My problem is when I validate 3 dates next to each other the error message is above the first date, instead of where it should be. I know it has something to do with the fact that I'm using all 3 controls in the same form-group, but I don't know how to fix it. I have included a screen shot and code below. In the screen-shot I've included you can see that the popup is on top of 'Incident Date' and the cursor is in the 'Resolution Due Date'.
Thanks in advance!
HTML
<div class="form-group">
<div class="row">
<div class="col-md-8">
<label class="control-label">Title</label>
<input type="text" class="form-control input-lg" placeholder="*Required" name="txtTitle" />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4">
<label class="control-label">Incident Date:</label>
<div class='input-group date' id='dtpIncidentDate'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNIncidentDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Date Assigned:</label>
<div class='input-group date' id='dtpDateAssigned'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="DD/MM/YYYY" name="dtpNDateAssigned"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Resolution Due Date:</label>
<div class='input-group date' id='dtpResolutionDate'>
<input type="text" class="form-control input-lg" placeholder="*Required" data-date-format="DD/MM/YYYY" name="dtpNResolutionDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
JS
$(document).ready(function () {
$('#form1').bootstrapValidator({
container:'popover',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtTitle: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The Title is required and cannot be empty'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The title can only consist of alphabetical and number'
}
}
},
dtpNIncidentDate: {
validators: {
notEmpty: {
message: 'Incident Date is required and cannot be empty'
}
}
},
dtpNDateAssigned: {
validators: {
notEmpty: {
message: 'Date Assigned is required and cannot be empty'
}
}
},
dtpNResolutionDate: {
validators: {
notEmpty: {
message: 'Resolution Date is required and cannot be empty'
}
}
}
}
});
$('#dtpIncidentDate')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNIncidentDate');
});
$('#dtpDateAssigned')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNDateAssigned');
});
$('#dtpResolutionDate')
.on('dp.change dp.show', function (e) {
// Revalidate the date when user change it
$('#form1').bootstrapValidator('revalidateField', 'dtpNResolutionDate');
});
});

I figured out the problem. I moved the row above the form-group and everything is working like it should. Each 'X' is controlled by the form-group. Below is the new code just in case someone else has the same issue I am.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Incident Date:</label>
<div class='input-group date' id='dtpIncidentDate'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNIncidentDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Date Assigned:</label>
<div class='input-group date' id='dtpDateAssigned'>
<input type='text' class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNDateAssigned"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Resolution Due Date:</label>
<div class='input-group date' id='dtpResolutionDate'>
<input type="text" class="form-control input-lg" placeholder="*Required" data-date-format="MM/DD/YYYY" name="dtpNResolutionDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>