Test form validation with validate.js

Developer
Martin Boyce
Size
3,293 Kb
Views
22,264
  1. Test form validation with validate.js Previews
  2. Test form validation with validate.js HTML Codes
  3. Test form validation with validate.js CSS Codes
  4. Test form validation with validate.js JS Codes

How do I make an test form validation with validate.js?

What is a test form validation with validate.js? How do you make a test form validation with validate.js? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.

Test form validation with validate.js Previews
IQ Test

Test form validation with validate.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>test form validation with validate.js</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="//rickharrison.github.io/validate.js/validate.js"></script>
<div class="container-fluid"> <h1>Test form validation with validate.js</h1> <form method="POST" class="unpadded selfreg" id="selfreg" name="selfreg" autocomplete="off"> <div class="errormessage" id="selfRegMessage"> </div> <fieldset> <legend>Please enter the following information: (all fields must be completed)</legend> <div class="form-group"> <label for="nfirst">Given Names:</label> <input class="form-control" name="nfirst" id="nfirst" value=""> </div> <div class="form-group"> <label for="nlast">Family Name:</label> <input class="form-control" name="nlast" id="nlast" value=""> </div> <div class="form-group email-check"> <label for="email">Do not enter anything in this field:</label> <input class="form-control" id="nEmail" type="text" name="nEmail" value="" /> </div> <div class="form-group"> <label for="street_aaddress">House no. &amp; Street:</label> <input class="form-control" name="stre_aaddress" id="stre_aaddress" value=""> </div> <div class="form-group"> <label for="city_aaddress">Suburb State Postcode:</label> <input class="form-control" name="city_aaddress" id="city_aaddress" value=""> <span class="formLabelExample formNote">Please add 2 spaces between the city, state &amp; postcode. eg. SUTHERLAND [space][space] NSW [space][space] 2232</span> </div> <div class="form-group"> <label for="zemailaddr">Email:</label> <input class="form-control" name="zemailaddr" id="zemailaddr" value=""> </div> <div class="formgroup"> <label for="tphone1">Phone:</label> <input class="form-control" name="tphone1" id="tphone1" value=""> <span class="formLabelExample formNote">No spaces please, eg. 95234321</span> </div> <div class="form-group"> <label for="F051birthdate">Date of Birth:</label> <input class="form-control" name="F051birthdate" id="F051birthdate" value="" > <span class="formLabelExample formNote">Enter your DOB in the format DD/MM/YYYY. eg. 29/01/1980</span> </div> <div class="warning"> <p>Important: by submitting this form you are agreeing to comply with the restrictions set out on this page and with the Libary's general <a href="https://www.sutherlandshire.nsw.gov.au/Library/Membership/Conditions_of_Membership" target="_blank">Conditions of Membership</a>.</p> <p>To confirm your membership you must visit any Sutherland Shire Library within 6 weeks, complete a printed application form and show personal identification, whereupon you will be issued a permanent library card. If you don't confirm your account your membership will be cancelled and you will need to re-join.</p> </div> <button type="submit" class="btn btn-info">Submit</button> </fieldset> </form> <div class="row"> <h2>Some footer text.</h2> </div>
</div><!-- /container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Test form validation with validate.js - Script Codes CSS Codes

.email-check { position: absolute; right: 110%; height: 0; overflow: hidden;
}

Test form validation with validate.js - Script Codes JS Codes

var validator = new FormValidator('selfreg', [{ name: 'nfirst', display: 'Given Names', rules: 'required' }, { name: 'nlast', display: 'Family Name', rules: 'required' }, { name: 'nEmail', display: 'do not enter', rules: 'max_length[0]' }, { name: 'stre_aadress', display: 'Street Address', rules: 'required' }, { name: 'city_aaddress', display: 'Suburb, State, Postcode', rules: 'required' }, { name: 'zemailaddr', display: 'Email address', rules: 'required|valid_email' }, { name: 'tphone1', display: 'Telephone No', rules: 'required|alpha_numeric' }, { name: 'F051birthdate', display: 'Date of Birth', rules: 'required|exact_length[10]' }], function(errors, event) { if (errors.length > 0) { // Show the errors var displayErrors = document.getElementById('selfRegMessage'); var errorString = ''; for (var i = 0; i < errors.length; i++) { errorString += errors[i].message + '<br />'; } displayErrors.innerHTML = errorString; } });
Test form validation with validate.js - Script Codes
Test form validation with validate.js - Script Codes
Home Page Home
Developer Martin Boyce
Username boycetrus
Uploaded September 20, 2022
Rating 3
Size 3,293 Kb
Views 22,264
Do you need developer help for Test form validation with validate.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Martin Boyce (boycetrus) Script Codes
Name
Get the app
Flexbox horozontal scrolling booklist
Homepage thumbnail
Booklist Using Google Spreadsheets as JSON Source and Handlebars for templating
Nested flexbox layout for library catalog
First steps with Handlebars.js
Test Case for ajax fail on single result
Google Maps API test
Fetching book covers with the Google Books API
Sutherland Shire Libraries Catalogue Search
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!