JQuery validation and Twitter Typeahead

Drew2k · 04-02-2017, 02:48 PM

I am creating a website which utilises both JQuery validation and Twitter Typeahead, however have ran into a issue validating a input field using typeahead.js. The validation works on all other fields.

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.

JQuery validation and Twitter Typeahead

Submitted by Drew2k, 04-02-2017, 02:48 PM, Thread ID: 29017