Skip to content

Instantly share code, notes, and snippets.

@snowleo208

snowleo208/form-validation.html

Last active December 14, 2018 14:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save snowleo208/919241c7fd91eb4c594944c0fc182f30 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save snowleo208/919241c7fd91eb4c594944c0fc182f30 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
form-validation.html
<form class="c-form" id="form">
<label for="email"><span class="c-form-label">Email <abbr title="Required">*</abbr></span>
<input class="c-form-input" id="form-email" type="email" name="email" required="required" pattern=".{3,}" />
<span class="u-alert" id="form-email-error">Please enter a valid email format</span>
</label>
<label for="name"><span class="c-form-label">Name</span>
<input class="c-form-input" id="form-name" type="text" name="name" pattern="^[A-Za-z ,.'-]+$" />
<span class="u-alert" id="form-name-error">Please enter a valid name with alphabets only</span>
</label>
<label for="message"><span class="c-form-label">Message <abbr title="Required">*</abbr></span>
<textarea class="c-form-input" id="form-message" minlength="10" maxlength="200" rows="4" name="message"
required="required"></textarea><span class="c-form-input__length"><span id="form-message-length">0</span>/200</span>
<span class="u-alert" id="form-message-error">Please enter at least 10 characters and less than 200 characters.</span>
</label>
<label class="c-form-group" for="signup">
<input class="c-form-checkbox" id="form-signup" type="checkbox" name="signup" />
<span class="c-form-label">Sign me up for latest updates</span>
</label>
<input class="c-form-submit" id="form-submit" type="submit" value="Submit" name="submit" />
<span class="u-alert" id="form-submit-error">Please correct all information and try again.</span>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment