Gist 7699534

100%

✓ Published0🌍 Public

Last edited Nov 28, 2013

Created on Nov 28, 2013

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.

AI-generated description

Similar vizzes

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

69% match

Loading thumbnail…

Gist 305339

This example demonstrates a reusable jQuery plugin pattern for encapsulating a custom visualization or interaction, applying it to selected DOM elements with configurable defaults. The code defines a `PluginClass` that initializes on plugin call, using `$.fn.extend` and `$.extend` to merge user options with defaults. It shows the structural scaffolding for a visualization module, though it contains no actual rendering logic or data-binding calls. The implementation relies on jQuery’s event and DOM utilities, with the plugin returning `this` to support method chaining, a common convention for jQuery-based visual components. The source is a single JavaScript file from a gist, focusing on code organization rather than visual output.

DDylanFM

64% match

Loading thumbnail…

Gist 61766

This visualization transforms the nested validation logic of a JavaScript function into a radial tree diagram. It shows the hierarchical decision tree of password confirmation checks and user-input validations, with each branch representing a conditional alert. The code uses D3.js’s `d3.forceSimulation` to arrange nodes, likely with `d3.hierarchy` and `d3.tree` or similar layout methods, while rendering circles and links to map the flow. Data is derived directly from the gist’s source code, converting the repetitive if-else structure into a visual metaphor for form validation complexity.

CCaged

61% match

Loading thumbnail…

form with strip background and css animation bubbles

A form with floating labels sits on a striped background made via repeated CSS `linear-gradient` layers. Eight geometric shapes (circles, triangles, squares) float upward from the bottom in CSS keyframe animations (`shapes1`, `shapes2`, `shapes3`) with varied delays, durations, and colors, some using `border-radius` and border triangles. JavaScript event listeners on `focusin`/`focusout` toggle an `.active` class to animate labels. Password validation shows requirements when invalid, using `:invalid` and `:placeholder-shown` selectors. No external libraries are used; all rendering relies on native CSS and JavaScript.

KKacieW

60% match

Loading thumbnail…

Gist 518525

This example visualizes the JavaScript events bound to elements on a page, showing their frequency and the element types they target. It uses jQuery’s `.data(‘events’)` to inspect registered handlers, then binds a global listener to all those event types via `.bind()` on the `html` element. As events fire, the code increments per-event and aggregate counts, logging each target’s `nodeName` into arrays for later analysis. The underlying data comes from live user interactions on the rendered DOM, providing a real-time snapshot of event activity without any external dataset.

DDylanFM

59% match

Loading thumbnail…

Gist 6442223

This example demonstrates a file upload interface with a progress bar, built using jQuery and the html5_upload plugin. The page allows multiple file selection, prompts for a server URL for each file, and displays upload progress with a blue progress bar. The CSS gives the page a cohesive blue gradient design with responsive layout adjustments for different screen sizes, including a playful rotation effect on images when clicked. The visualization highlights the interaction between custom JavaScript upload logic and dynamic CSS styling.

AAntonio24

58% match

Loading thumbnail…

// source https://jsbin.com

This example demonstrates a credit-card payment form with built-in validation and real-time formatting feedback, rendered as an animated UI prototype. The form uses the Stripe API to validate card details, displaying a spinner during processing and showing error messages inline if validation fails. It includes input masks for card number, expiry, and CVC fields, with visual styling for errors and success states. The animation highlights the interactive validation flow, making it clear how user inputs are checked against payment standards. The visualization is not a chart but an animated demonstration of form behavior and user interaction.

AAntonio24

58% 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

57% match