jquery-hanging
Version:
A jQuery plugin to hang actions from an element if target fields are not valid.
220 lines (212 loc) • 11.8 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>jQuery Hanging</title>
<link href="https://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/jquery-boot/dist/jquery-boot.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/jquery-dirty/dist/jquery-dirty.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/jquery-namely/dist/jquery-namely.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/jquery-search/dist/jquery-search.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/jquery-hanging/dist/jquery-hanging.min.js" type="text/javascript"></script>
<style type="text/css">
.leckerlize {
font-family: 'Leckerli One', cursive;
}
</style>
</head>
<body>
<section class="hero is-success is-fullheight">
<div class="hero-head">
<header class="nav">
<div class="container">
<div class="nav-left">
<a class="nav-item leckerlize" href="">
jHanging
</a>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right nav-menu">
<a class="nav-item is-active" href="">
Home
</a>
<a class="nav-item" href="https://gist.github.com/eagostini/6ee686ea81e2c76720347225c0a23af6">
Quick Start
</a>
<a class="nav-item" href="https://github.com/eagostini/jquery-hanging">
Repository
</a>
<span class="nav-item">
<a class="button is-success is-inverted" href="https://github.com/eagostini/jquery-hanging/releases">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>Download</span>
</a>
</span>
</div>
</div>
</header>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title leckerlize is-size-2" style="margin-bottom: 2rem;">jQuery Hanging</h1>
<h2 class="subtitle">A jQuery plugin to hang actions from an element if target fields are not valid.</h2>
</div>
</div>
<div class="hero-foot">
<nav class="tabs is-boxed is-fullwidth">
<div class="container">
<ul>
<li class="is-active">
<a href="#usage">What does it mean?</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<section class="section" id="usage">
<div class="container">
<div class="content">
<p>Do you know when you <strong>don't</strong> want to enable that submit <code><button name="send" /></code> until the user complete at least all the required fields of your <code><form /></code>? Yeah, this plugin intends to help you with that. Want to know how? No worries, that's supposed to be simple. Let's take the form below as an example:</p>
</div>
<form class="box">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">From*</label>
</div>
<div class="field-body">
<div class="field">
<p class="control is-expanded has-icons-left">
<input class="input" name="name" placeholder="Your name..." required type="text" />
<span class="icon is-small is-left">
<i class="fa fa-user"></i>
</span>
</p>
</div>
<div class="field">
<p class="control is-expanded has-icons-left has-icons-right">
<input class="input" name="email" placeholder="Your email..." required type="email" />
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fa fa-check"></i>
</span>
</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label" for="level">Level*</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select is-fullwidth">
<select id="level" name="level" required>
<option value="">Select...</option>
<option value="beginner">Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Member*</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<label class="radio">
<input name="member" required type="radio" value="free" /> Free
</label>
<label class="radio">
<input name="member" required type="radio" value="single" /> Single
</label>
<label class="radio">
<input name="member" required type="radio" value="team" /> Team
</label>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Subject*</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="subject" placeholder="e.g. Partnership Opportunity" required type="text" />
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Message*</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<textarea class="textarea" minlength="5" name="message" placeholder="Explain how we can help you..." required></textarea>
</div>
<p class="help">Minimum of <code>5</code> characters.</p>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label"></div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<label class="checkbox">
<input name="terms" required type="checkbox"> I agree to the <a href="#">Terms and Conditions</a>.
</label>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label"></div>
<div class="field-body">
<div class="field">
<div class="control">
<button class="button is-primary" name="send">Send</button>
</div>
</div>
</div>
</div>
</form>
<div class="content">
<p>After tasting the form above you're gonna notice that our submit button is enabled only after the valid completion of the fields. The gists bellow intend to show you, with comments, how that works in details:</p>
</div>
<script src="https://gist.github.com/eagostini/6ee686ea81e2c76720347225c0a23af6.js" type="text/javascript"></script>
</div>
</section>
<script src="https://cdn.rawgit.com/eagostini/6ee686ea81e2c76720347225c0a23af6/raw/hanging.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function ($) {
$('.nav-toggle').click(function () {
$('.nav-toggle, .nav-menu').toggleClass('is-active');
});
});
</script>
</body>
</html>