Floating Form Labels and Parsley Validation Tests

Developer
Alex Sperellis
Size
4,433 Kb
Views
44,528
  1. Floating Form Labels and Parsley Validation Tests Previews
  2. Floating Form Labels and Parsley Validation Tests HTML Codes
  3. Floating Form Labels and Parsley Validation Tests CSS Codes
  4. Floating Form Labels and Parsley Validation Tests JS Codes

How do I make an floating form labels and parsley validation tests?

Floating form labels . What is a floating form labels and parsley validation tests? How do you make a floating form labels and parsley validation tests? This script and codes were developed by Alex Sperellis on 16 September 2022, Friday.

Floating Form Labels and Parsley Validation Tests Previews
IQ Test

Floating Form Labels and Parsley Validation Tests - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floating Form Labels and Parsley Validation Tests</title> <link rel='stylesheet prefetch' href='https://www.simon.com/rewardcard/dist/styles/rewardcard.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="test-form"> <div class="container"> <div class="row"> <div class="col-xs-6 col-xs-offset-3"> <form class="js-floating-labels" data-parsley-validate data-parsley-errors-messages-disabled> <fieldset class="form-group"> <label for="exampleInputEmail2" class="floating">EMAIL ADDRESS<span class="floating-desc">: Invalid Email</span></label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="ENTER EMAIL" data-parsley-required> </fieldset> <fieldset class="form-group"> <label for="exampleInputPassword1" class="floating">PASSWORD<span class="floating-desc">: Password Required</span></label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="PASSWORD" data-parsley-required> </fieldset> <fieldset class="form-group"> <label for="exampleSelect1" class="floating">EXAMPLE SELECT<span class="floating-desc">: Please Make A Selection</span></label> <select class="form-control" id="exampleSelect1" data-parsley-required> <option value="">daw</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </fieldset> <fieldset class="form-group"> <label for="exampleTextarea" class="floating">EXAMPLE TEXTAREA</label> <textarea class="form-control" id="exampleTextarea" rows="3"></textarea> </fieldset> <fieldset class="form-group"> <div class="checkbox"> <label> <input type="checkbox" name="testbox" data-parsley-required /> <span class="c-indicator"></span> Checkbox </label> </div> </fieldset> <fieldset class="form-group"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-parsley-required> <span class="r-indicator"></span> Regular radio </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option1" data-parsley-required> <span class="r-indicator"></span> Regular radio </label> </div> </fieldset> <div class="form-group"> <button type="submit" class="btn btn-primary">SUBMIT</button> </div> </form> </div> </div> </div>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.1.2/parsley.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Floating Form Labels and Parsley Validation Tests - Script Codes CSS Codes

label.floating { top: 0; opacity: 0; transition: all 0.2s ease-in;
}
label.floating.up { top: -16px; opacity: 1;
}
/* error message class - added to global styles */
label .floating-desc { display: none;
}
.has-error label .floating-desc { display: inline;
}
/* utility class - added to global styles */
.text-black { color: black !important;
}

Floating Form Labels and Parsley Validation Tests - Script Codes JS Codes

'use strict';
/*
Floating Labels with Parsley Validation
By: Alex Sperellis
Description:
Example form with all inputs to test floating labels and parsley.js validation
*/
// Init Function
var floatingLabelsInit = function floatingLabelsInit() { // floating label function var floatingLabel = function floatingLabel(onload) { // input to target var $input = $(this); //on window load if (onload) { $.each($('.form-control'), function (index, value) { var $current_input = $(value); // if input is filled already - float label up if ($current_input.val()) { $current_input.siblings('label.floating').addClass('up'); } }); } // timeout function to check val setTimeout(function () { // if input has a value if ($input.val()) { // float label up $input.siblings('label.floating').addClass('up'); // for selects only: add class to change text to black if ($input.is('select')) { $input.addClass('text-black'); } } else { // else hide label if input gets cleared $input.siblings('label.floating').removeClass('up'); // for selects only: remove class to change text to gray if ($input.is('select')) { $input.removeClass('text-black'); } } }, 1); }; // on keydown, change and window load - fire floating label function $('.form-control').keydown(floatingLabel); $('.form-control').change(floatingLabel); window.addEventListener('load', floatingLabel(true), false); // on parsley error $('.js-floating-labels').parsley().on('form:error', function () { $.each(this.fields, function (key, field) { // if validation fails float label up and add error class to form group if (field.validationResult !== true) { field.$element.siblings('label.floating').addClass('up'); field.$element.closest('.form-group').addClass('has-error'); } }); }); // on parsley passed validation $('.js-floating-labels').parsley().on('field:validated', function () { // if validation passes if (this.validationResult === true) { //remove error class from form group this.$element.siblings('label.floating'); this.$element.closest('.form-group').removeClass('has-error'); } else { // float label up and add error class to form group this.$element.siblings('label.floating').addClass('up'); this.$element.closest('.form-group').addClass('has-error'); } });
};
// init invoke, make sure form has class js-floating-labels
floatingLabelsInit();
Floating Form Labels and Parsley Validation Tests - Script Codes
Floating Form Labels and Parsley Validation Tests - Script Codes
Home Page Home
Developer Alex Sperellis
Username asperellis
Uploaded September 16, 2022
Rating 3
Size 4,433 Kb
Views 44,528
Do you need developer help for Floating Form Labels and Parsley Validation Tests?

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!

Alex Sperellis (asperellis) Script Codes
Name
Weather generator
Highlights
Mobile Nav and Dropdown Animations
Custom File Input
Header with search dropdown
Twitch API
A Pen by Alex Sperellis
Tribute page
Credit Card Form with Parsley Validation
Mobile Navigation
Create amazing love letters 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!