Discover versatile input areas in JTB_MD for seamless data entry. From text and passwords to numbers, emails, URLs, and more - tailor your interfaces effortlessly.
Input elements in JTB_MD offer a wide range of options for collecting user input. Whether you need simple text fields, password inputs, numeric entry, or specialized forms like email, URL, and search, these elements are designed for easy integration and customization in your projects.
All input elements in JTB_MD utilize default <input> elements provided by browsers with support for various types, including:
datedatetime-localemailmonthnumberpasswordsearchteltexttimeurlweek You can choose the type that best fits your input needs while creating your input elements.
To create an input element, you can simply add an <input> that has .jtbInput class and your desired type into your project.
<!-- Example Input -->
<input class='jtbInput' type='text' />
To disable an input element you can simply add .disabled class to your <input>.
<!-- Disabled Input -->
<input class='jtbInput disabled' type='text' />
Once you are feeling safe with creation of inputs, you can easily style them via adding simple classes of inputs.
To remove border radius on input elements, you can simply apply .jtbInput-rect class into them.
<!-- Rectengular Input -->
<input class='jtbInput jtbInput-rect' type='...' />
You can activate the add-ons of your input elements via wrapping them with a container that has .jtbInput-container class. This encapsulation ensures a cohesive and unified appearance for elements working with inputs, and enhances your inputs' functionalities.
<!-- Add-ons activated -->
<div class='jtbInput-container'>
<input class='jtbInput' type='text' placeholder="I'm in container!" />
</div>
Once you've encapsulated your input, you can free to use any add-ons of inputs that defined in JTB_MD:
Labels serve as concise definition texts accompanying your input elements, distinguishing and providing clarity throughout the input process. Unlike placeholders, labels remain visible at all stages, acting as an enduring guide for users, enhancing the overall user experience.
To add a label into your input container, you can simply add a <label> element with your desired definition into container.
<!-- Input with label -->
<div class='jtbInput-container'>
<label>Your name</label>
<input class='jtbInput' type='text' placeholder='Placeholder'/>
</div>
<!-- Input with label (You can add your label anywhere in the container.) -->
<div class='jtbInput-container'>
<input class='jtbInput' type='text' placeholder='Placeholder'/>
<label>Your name</label>
</div>
To incorporate an icon into your input container, simply include an <i> element with your preferred icon class. Unlike labels, the placement of the icon within the container determines whether the icon will appear before or after the input.
<!-- Input with icon (before) -->
<div class='jtbInput-container'>
<i class='jtbIL-user'></i>
<input class='jtbInput' type='text' placeholder='Before'/>
</div>
<!-- Input with icon (after) -->
<div class='jtbInput-container'>
<input class='jtbInput' type='text' placeholder='After'/>
<i class='jtbIL-user'></i>
</div>
Helper texts are elements that provide additional information for your inputs, guiding users as they enter data or offering feedback on their inputs. In JTB_MD, three distinct feedback attributes are defined for helper texts, each specialized for a specific scenario:
helper attribute is for displaying initial data before the user enters any input,helper-invalid attribute for displaying data when the user enters input that doesn't meet the requirements,helper-valid attribute for inputs that successfully fulfill the requirements.To create a helper text for your input element, you can include your desired attribute with the text you want to show in its scenario directly to your input element
helper-invalid and helper-valid, the data in your helper attribute will be displayed to users at all stages of input.
<!-- Input with helper texts -->
<div class='jtbInput-container'>
<input class='jtbInput' type='email' placeholder='Enter your E-mail here.' helper='Please enter an E-mail to test different stages.' helper-invalid='Your E-mail seems wrong, please enter a correct one.' helper-valid='Seems legit m8!'/>
</div>
All input elements defined within the library seamlessly integrate with JTB_MD's jtbInput plugin, handling much of the heavy lifting for you. On the validation side of form elements, the plugin offers a validate method that can be triggered manually using $("#yourInputID").jtbInput('validate') in JavaScript at any time.
In addition to manual triggering, JTB_MD allows you to automatically trigger this method on initialization stage, value changes of elements and key presses on focus. To enable this, simply add the .validate class to the input element you want to validate via the library's listeners.
<!-- Validation activated Input -->
<input class='jtbInput validate' type='email' />
During the validation stage, JTB_MD assigns one of two classes (.valid or .invalid) to the input element (and its .jtbInput-container if it exists) based on the validation outcome.
If the input element is empty during the initialization stage, the library does not validate the element, as it makes more sense. However, if the value of the element becomes empty after the user's focus action, it adds the .invalid class to it if the min or minlength attribute is defined for the input.
For the validation details by input types you can check out the table below:
| Type | Example value | Regexp pattern | Object control | Min-max value control | Length control | Example |
|---|---|---|---|---|---|---|
| date | 2023-12-31 |
/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/ |
Date |
Active | - | |
| datetime-local | 2023-12-31T23:59 |
/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])T([01]\d|2[0-3]):[0-5]\d$/ |
Date |
Active | - | |
| month | 2023-12 |
/^\d{4}-(0[1-9]|1[0-2])$/ |
Date |
Active | - | |
| time | 23:59 |
/^([01]\d|2[0-3]):[0-5]\d$/ |
Date |
Active | - | |
| week | 2023-W14 |
/^\d{4}-W(0[1-9]|[1-4]\d|5[0-3])$/ |
Date |
Active | - | |
ateshli_jojuq@example.com |
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ |
- | - | - | ||
| number | -1.23 |
/^-?\d{1,3}(?:,\d{3})*(?:\.\d+)?$/ |
- | Active | - | |
| url | https://www.jtblabs.com/ |
/^(ftp|http|https):\/\/[^ "]+$/ |
- | - | - | |
| tel | +90 555 555-55-55 |
/^\+?\d{1,4}?\s?\d{1,3}?\s?[\d.-\s]+$/ |
- | - | - | |
| text | Anything |
- | - | - | Active | |
| password | Anything |
- | - | - | Active | |
| search | Anything |
- | - | - | Active |
Where
Regexp pattern represents the pattern used to determine whether the value of input fits the specified criteria or not,Object control involves additional control to identify the input type via creating JS objects,Min-max value control works with input element's min and max attributes and represents the possible range of values,Length control works with input element's minlength and maxlength attributes and represents the possible length of input in terms of characters.The validation method of the library is linked to jtbInput plugin itself. To use it properly, ensure that you haven't manually removed it from your project.
Copyright © 2024 JTBLabs - All rights reserved.