| <form method="post">{{ csrf_field() }} |
| <div class="row"> |
| <section class="col-lg-10 col-lg-offset-1"> |
| |
| |
| <input class="form-control" type="email" name="email" id="email"> |
| <div id="status"></div> |
| </section> |
| </div> |
| |
| |
| </br> |
| <div class="row"> |
| <section class=" col-lg-offset-5 col-lg-4 col-xs-offset-4"> |
| <Button type="submit" class="btn btn-primary" id="validate_submit">Go</button> |
| {{-- <a type="button" class="btn btn-primary" href="go.html">Cancel</a> --}} |
| </section> |
| </div> |
| </form> |
| |
| |
| <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> |
| <script src="src/js/mailgun_validator.js"></script> |
| <script> |
| |
| $(function() { |
| |
| |
| $('#email').keypress(function(e) { |
| if(e.which == 13) { |
| $('#email').trigger('focusout'); |
| return false; |
| } |
| }); |
| |
| |
| $("#validate_submit").click(function() { |
| return false; |
| }); |
| |
| |
| $('#email').mailgun_validator({ |
| api_key: 'pubkey-5d6fba2e8755a91702fb6483d4cc64f1', |
| in_progress: validation_in_progress, |
| success: validation_success, |
| error: validation_error, |
| }); |
| |
| }); |
| |
| |
| |
| |
| function validation_in_progress() { |
| $('#status').html("<img src='images/loading.gif' height='16'/>"); |
| } |
| |
| |
| |
| |
| function validation_success(data) { |
| $('#status').html(get_suggestion_str(data['is_valid'], data['did_you_mean'])); |
| } |
| |
| |
| |
| |
| function validation_error(error_message) { |
| $('#status').html(error_message); |
| } |
| |
| |
| |
| |
| function get_suggestion_str(is_valid, alternate) { |
| if (is_valid) { |
| var result = '<span class="success">Address is valid.</span>'; |
| if (alternate) { |
| result += '<span class="warning"> (Though did you mean <em>' + alternate + '</em>?)</span>'; |
| } |
| return result |
| } else if (alternate) { |
| return '<span class="warning">Did you mean <em>' + alternate + '</em>?</span>'; |
| } else { |
| return '<span class="error">Address is invalid.</span>'; |
| } |
| } |
| |
| |
| </script> |
| </body> |
| <style> |
| .success{color:#2ECC40;} |
| .error{color:#FF4136;} |
| .warning{color:#FF851B;} |
| </style> |