59198

Label transition issue

I am new in html, css and I am getting error when user enter invalid input into the input box then label of particular input field goes down but when user enter correct input then its work fine.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
    <form id="form">
    <div class="group">
    <input type="text" required id="name" minlength="4">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label class="labeling">Name</label>
    </div>
    <div class="group">
    <input type="email" required id="email">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label class="labeling">Email</label>
    </div>
    </form>




I have tried this

<form id="form"> <div class="group"> <input type="text" required id="name" minlength="4"> <span class="highlight"></span> <span class="bar"></span> <label class="labeling">Name</label> </div> <div class="group"> <input type="email" required id="email"> <span class="highlight"></span> <span class="bar"></span> <label class="labeling">Email</label> </div> </form> .group { margin-top: 40px; position: relative; margin-bottom: 45px; } input { font-size: 22px; padding: 10px 10px 10px 5px; display: block; width: 300px; border: none; border-bottom: 1px solid #ccc; } input:focus { outline: none; } label.labeling { color: #999; font-size: 18px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; transition: 0.2s ease all; } input:focus ~ label.labeling, input:valid ~ label.labeling { top: -20px; font-size: 14px; color: #5264AE; } .bar { position: relative; display: block; width: 309px; } .bar:before, .bar:after { content: ''; height: 1px; width: 0; bottom: 1px; position: absolute; transition: 0.2s ease all; } .bar:before { left: 50%; } .bar:after { right: 50%; } input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; } .highlight { position: absolute; height: 60%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: 0.5; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } $(document).ready(function() { $("#form").validate({ rules: { name: { required: true }, email: { required: true } }, messages: { minlength: "your name at least 4 characters long", email: "Please enter a valid email address" } }); });

Answer1:

You have to use some JS too to here as there is no :empty css property for an input box.(using :invalid will mean your placeholder setup will not work!)

Check out this fiddle and let me know your feedback. Thanks!

Used this css:

input.invalid-input ~ label.labeling { top: -20px; font-size: 14px; color: red; }

and added some js too:

$("input").each(function() { var $this = $(this); $this.on("change", function() { if ($(this).is(':invalid') && $(this).val() != "") { $(this).addClass("invalid-input"); } else { $(this).removeClass("invalid-input"); } }); });

Recommend

  • R— repeating linear regression in a large dataset
  • Several custom validate rules in Jquery Validate plugin
  • Aurelia validation: applying some rule on change and some on blur on same property
  • Google chart horizontal scrollbar
  • Pandas split array based on condition
  • JqueryUI Autocomplete : only one character is displayed per list item
  • curl not working for getting a web page content, why?
  • Android Ripple: How do other apps make their ripple so transparent without affecting the original co
  • changes in jquery 1.4.2 breaking the code?
  • JQuery Auto-Complete: How do I handle modifications?
  • text-align justify, cannot override
  • Angular - routerLinkActive and queryParams handling
  • Is it possible to get the word under the mouse cursor in a ``?
  • Google Maps api v3 get start and end coordinates of a street
  • Image map in Flex
  • Does Mobilefirst provide a provision to access web services directly?
  • Insert into database using onclick function
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • Align navbar back button on right side
  • Window Size for Mac application
  • MySQL WHERE-condition in procedure ignored
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • SQL merge duplicate rows and join values that are different
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Codeigniter doesn't let me update entry, because some fields must be unique
  • trying to dynamically update Highchart column chart but series undefined
  • Proper way to use connect-multiparty with express.js?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • How to stop GridView from loading again when I press back button?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Does armcc optimizes non-volatile variables with -O0?
  • Binding checkboxes to object values in AngularJs
  • java string with new operator and a literal
  • How to push additional view controllers onto NavigationController but keep the TabBar?