I have created an example form to show what i am doing. The below example has 3 input form fields, First Name, Last Name and Country with a submit button. The validation works on the 2 name fields, however only partially works on the country field which has typeahead.js on it. The field name changes colour, however the success/failed icon fails to display.
The HTML is strait forward
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link href="/assets/global/css/components-rounded.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/layouts/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="/assets/layouts/css/themes/default.min.css" rel="stylesheet" type="text/css" id="style_color" />
</head>
<body>
<div class="page-content-wrapper">
<!-- BEGIN CONTENT BODY -->
<div class="page-content">
<form id="form_sample_1" class="form-horizontal">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">First Name <span class="required">
* </span>
</label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa"></i>
<input type="text" class="form-control" placeholder="First Name" name="firstname" />
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Last Name <span class="required">
* </span>
</label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa"></i>
<input type="text" class="form-control" placeholder="Last Name" name="lastname" />
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Country <span class="required">
* </span>
</label>
<div class="col-md-8">
<div class="input-icon right">
<i class="fa"></i>
<input type="text" class="form-control typeahead" placeholder="Country" name="country" />
</div>
</div>
</div>
</div>
<button type="submit" class="submitbutton btn yellow" id="save">Save</button>
</form>
</div>
</div>
<script src="/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/typeahead/typeahead.bundle.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>The javascript for JQuery Validation is
Code:
$(function() {
// Initialize form validation on the registration form.
// It has the name attribute "registration"
$("#form_sample_1").validate({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
firstname: {
required: true,
minlength: 5
},
lastname: {
required: true,
minlength: 5
},
country: {
required: true,
minlength: 5
}
},
// Specify validation error messages
messages: {
firstname: "Please enter your firstname"
},
errorPlacement: function(e, r) {
var i2 = $(r).parent(".input-icon").children("i");
i2.addClass("fa-warning");
i2.removeClass("fa-check").addClass("fa-warning"), i2.attr("data-original-title", e.text()).tooltip({
container: "body"
});
},
success: function(e, r) {
var i2 = $(r).parent(".input-icon").children("i");
$(r).closest(".form-group").removeClass("has-error").addClass("has-success"), i2.removeClass("fa-warning").addClass("fa-check")
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
//form.submit();
}
});
});And the javascript for the typeahead is
Code:
var countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// url points to a json file that contains an array of country names, see
// https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
prefetch: '/assets/typeahead_countries.json'
});
// passing in `null` for the `options` arguments will result in the default
// options being used
$('.typeahead').typeahead(null, {
name: 'countries',
source: countries
});I need the icon to appear on the country input field when validating with typeahead.