Example Form

100%

✓ Published0🌍 Public

Last edited Feb 1, 2015

Created on Jun 9, 2017

This example demonstrates an interactive form that validates a user-entered street address using the Google Maps Geocoder API. It shows how to require a full, specific address—not just any geocodable location—by checking that the formatted result contains at least three commas. The form uses jQuery and the jQuery Validation plugin to trigger validation, while the custom `AddressValidator` function asynchronously queries Google Maps, reformats the address with a line break, and displays an error if the location is too vague. The code also handles form resubmission after the asynchronous check completes.

AI-generated description

Similar vizzes

Loading thumbnail…

D3 + leaflet + GForm

This example combines D3.js, Leaflet, and the Google Maps Geocoding API to visualize geocoded data from a Google Form spreadsheet on an interactive map. Circles are drawn on a Leaflet map using D3, with their positions updated based on the map view. The circles' fill colors correspond to categories in the data, and hovering over a circle triggers a smooth elastic transition that enlarges it, while clicking displays the venue's name, formatted address, and timestamp in an HTML tooltip panel. The map and circles animate in response to panning and zooming, and the data is loaded dynamically via Tabletop from a public Google Sheet.

FFedericopvs

58% match

Loading thumbnail…

Form Validation

This example shows a client-side HTML form that validates an email address and password when the user submits it, displaying any errors in a red list. The code uses jQuery’s `.on('submit')` method to intercept the submission and a series of regular expressions to test the email format, numeric digits, a capital letter, and a minimum length of eight characters. Error messages are pushed into an array and appended as list items to a `<ul>` element, with styling from a simple CSS rule.

EElaineYu

58% match

Loading thumbnail…

Leaflet-form

This example is an interactive map for collecting user-generated geographic data. A Leaflet map centered on Gothenburg, Sweden, displays OpenStreetMap tiles and includes a blank GeoJSON layer. Users can add features to this layer, which are then clickable. The code uses Leaflet, the Leaflet.draw plugin for drawing shapes, and EasyButton for custom controls, with jQuery handling form input.

AAnimesh Nautiyal

56% match

Loading thumbnail…

Gist 7699534

This example demonstrates a jQuery plugin for form validation, where input fields are checked against rules like presence, email format, and numeric ranges. Valid and invalid states trigger CSS classes (`pass`/`fail`) through event handlers. The implementation defines custom jQuery functions (`jQuery.fn.valid`, `jQuery.fn.validate`) that listen for events such as `focusout`, `keydown`, and `submit`, using the `jQuery(@).data()` API to track validity. The usage sample binds validators to elements with the class `form-control.required`, applying the declared callbacks for live feedback.

DDylanFM

55% match

Loading thumbnail…

Events

This example shows a geographic map of volunteer events across U.S. cities, with clickable markers that open detailed infowindows containing event descriptions, dates, addresses, and volunteer counts. The map uses the Google Maps JavaScript API, with custom top-center controls to pan and zoom between city locations. Event data is fetched from a remote server via jQuery AJAX, and dates are formatted using Moment.js; the visualization also supports URL parameters to filter events by date range.

WWill Carter

51% match

Loading thumbnail…

post-google-forms-nodejs

This example demonstrates how to submit form data directly to a Google Form using Node.js, bypassing the need for a browser interface. It shows a programmatic POST request that populates a form with fields such as size, email, delivery method, and address. The code uses the `superagent` library to send URL-encoded form data to the `/formResponse` endpoint of Google Forms. It explicitly maps each form field’s entry ID, like `entry.1721541334`, and includes both regular and "other" response options. The script logs the server response or any errors encountered during submission.

55un

50% match

Loading thumbnail…

redux-form example - http://insin.github.io/redux-form-example/

This example demonstrates a travel-add form built with React and redux-form, styled using React-Bootstrap. It validates user input—start and end dates, origin, destination, hotel, and car access—with client-side rules like date range checks, and includes a fake submit flow that displays the submitted data as formatted JSON. The visualization highlights redux-form's declarative field binding, validation, and state management through a multi-field form, with a loading state simulated during submission.

AAbhay-Joshi-Git

50% match

Loading thumbnail…

simple implementation of a google map using the react-google-map library

This example shows a simple interactive map centered on a fixed coordinate, with a marker placed at that location. It demonstrates the core usage of the react-google-maps library by rendering a `GoogleMap` component inside a `GoogleMapLoader`, which attaches the map to a full-size container div. The map’s zoom is set to 15, and the `options` prop disables the street view and map type controls. Markers are rendered from an array passed via `this.props.markers`, in addition to a hardcoded marker at the given latitude and longitude, illustrating how to compose map elements with React props.

CCKschneid

50% match