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"
}
});
});
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");
}
});
});
Related
I have an HTML page responsible for creating new users on my website.
After creating the user, the website must show a pop-up saying the user was created successfully.
Everything works fine, except that I had to configure an "onsubmit= return false" because I didn't find any other way to display the pop-up without the page redirecting immediately after the submission.
Now the form doesn't save the new users that are being created, so I'm trying to change the form value to true...
How can one do that? returning true after the pop-up closes.
Here is my code so far-
document.getElementById("accountForm").addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup() {
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
document.getElementById("accountForm").setAttribute("onsubmit", "true");
window.location.replace("/login/");
}
/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}
<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" onsubmit="return false" method="post" id="accountForm">
<form onsubmit="return false" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>
You have invalid HTML, nested form tags with duplicate IDs
You need to submit the form, but if you you actually submit the form, why not show the popup when you return
Here is how to stop and submit when the form is closed
const form = document.getElementById("accountForm")
form.addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup(e) {
e.preventDefault(); // stop submission
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.submit();
}
/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}
<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>
Finally, I found a solution.
Used an event listener on the submit button to prevent the default course of action, then showed the pop-up.
Afterward, removed the pop-up and told the form what action needs to be done and to submit.
This is how it looks!
<script>
const form = document.getElementById("accountForm");
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function closePopup(){
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.action = "/create/created_user";
form.submit()
}
document.getElementById("accountForm").addEventListener("submit", function(event){
event.preventDefault();
blur.classList.toggle('active');
popup.classList.add("open-popup");
});
</script>
# POPUP HTML CONFIGURATION
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with the job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
#FORM CONFIGURATION
<form method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
I have a HTML JS form for a contact form on my website, but I want it to redirect to a thank your page after the submit button is clicked. I can do that on it's own, but it happens every time I click the button, but I only want it to happen when the required areas are filled in.
I have tried an action tag on the form btw, it doesn't work for some reason.
Code (full screen it too see the button) :
document.getElementById("submit").onclick = function () {
location.href = "/contactty.html";
};
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: hidden;
}
.contact-cont {
position: absolute;
top: 6%;
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
checkAllInput() is validatind data.
I have selected all inputs and then looping through them and validating if (input.value == null || input.value == "") weather it's empty or not.
document.getElementById("submit").onclick = function() {
if (checkAllInput()) {
location.href = "/contactty.html";
}
};
function checkAllInput() {
const inputs = document.querySelectorAll("input");
inpputs.forEach(input => {
if (input.value == null || input.value == "") {
alert("please enter all data");
return false;
} else {
return true;
}
})
}
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: scroll;
}
.contact-cont {
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
overflow: scroll;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
I hope it's work for you
document.getElementById("submit").onclick = function () {
var count = 0;
var len = document.querySelectorAll('[required]').forEach(current=> {
if(current.value == ''){ count = count + 1;}
});
if(count == 0){
window.location.href = "/contactty.html";
}
};
.cntct-bg {
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
overflow: hidden;
}
.contact-cont {
position: absolute;
top: 6%;
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
form {
background: #ffffff;
display: flex;
flex-direction: column;
padding: 2vw 4vw;
width: 90%;
max-width: 600px;
border-radius: 10px;
z-index: 1;
}
form h1 {
color: #555555;
font-weight: 800;
margin-bottom: 20px;
font-family: var(--black);
z-index: 1;
}
form input,
form textarea {
border: 0;
margin: 10px 0;
padding: 20px;
outline: none;
background: #f5f5f5;
font-size: 16px;
font-family: var(--medium);
z-index: 1;
}
form textarea {
min-width: 93.33%;
max-width: 93.33%;
min-height: 80px;
z-index: 1;
}
form button {
padding: 15px;
background: #ff5361;
color: #ffffff;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 30px;
z-index: 1;
box-shadow: 0px 8px 0px #a83740;
}
.form button:active {
box-shadow: none;
transform: translateY(8px);
}
<body class="cntct-bg">
<div class="contact-cont">
<form action="/contactty.html" id="contact-form">
<h1>Get in touch</h1>
<input type="hidden" name="contact_number">
<input type="text" name="user_name" placeholder="Your Name" required>
<input type="email" name="user_email" placeholder="Your Email" required>
<textarea name="message" placeholder="Whats on your mind?" required></textarea>
<div class="tscheck">
<input type="checkbox" id="tsy" name="tsy" value="agreed" required>
<label for="tsy">Accept the <span>terms of service</var></span></label>
</div>
<button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
</form>
</div>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
I hope using java script function will help you out. For the all kinds of validation we can use JQuery to make it smoother and faster(please find out more from the link
https://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation-script#:~:text=you%20can%20use%20jquery%20validator,form. )
Hope this will help you :-).
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
<form name="myForm" action="action_to_be_taken" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
this code snippet shows an animated password input field. If you click in the input field (onFocus) an toggle eye icon appears to show or hide the password. After you leave the input field focus (onBlur) the eye icon disappers. Now my problem is, that the toggle eye icon is not clickable right now. I don't know how to solve his.
Can anybody help me?
Thanks in advance
function showeye() {
var string = '<i class="glyphicon glyphicon-eye-open form-control-feedback"></i>';
document.getElementById('showhide').innerHTML = string;
}
function hideeye() {
var string = '';
document.getElementById('showhide').innerHTML = string;
}
var $inputItem = $(".js-inputWrapper");
$inputItem.length && $inputItem.each(function () {
var $this = $(this),
$input = $this.find(".formRow--input"),
placeholderTxt = $input.attr("placeholder"),
$placeholder;
$input.after('<span class="placeholder">' + placeholderTxt + "</span>"),
$input.attr("placeholder", ""),
$placeholder = $this.find(".placeholder"),
$input.val().length ? $this.addClass("active") : $this.removeClass("active"),
$input.on("focusout", function () {
$input.val().length ? $this.addClass("active") : $this.removeClass("active");
}).on("focus", function () {
$this.addClass("active");
});
});
// toggle password visibility
$('#password + .glyphicon').on('click', function () {
$(this).toggleClass('glyphicon-eye-close').toggleClass('glyphicon-eye-open'); // toggle our classes for the eye icon
$('#password').togglePassword(); // activate the hideShowPassword plugin
});
<style>#import url('https://fonts.googleapis.com/css?family=Lato');*,*:before,*:after{box-sizing: border-box;}html,body{display:flex;align-items:center;justify-content:center;}.wrapper{width:400px; max-width:80%;}</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<style type="text/css">
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input > input {
padding-right: 0.3em;
}
.clearable-input:hover > [data-clear-input] {
display: block;
}
.clearable-input > [data-clear-input] {
display: none;
position: absolute;
top: 0;
right: 0;
font-weight: bold;
font-size: 1.4em;
padding: 0 0.2em;
line-height: 1em;
cursor: pointer;
}
.clearable-input > input::-ms-clear {
display: none;
}
.formRow {
position: relative;
width: 100%;
}
.formRow--item {
display: block;
width: 100%;
}
.formRow--input {
position: relative;
padding: 15px 20px 11px;
width: 100%;
outline: none;
border: solid 1px #95989a;
border-radius: 4px;
color: #2c3235;
letter-spacing: .2px;
font-weight: 400;
font-size: 16px;
resize: none;
transition: all .2s ease;
}
.formRow--input-wrapper {
position: relative;
display: block;
width: 100%;
}
.formRow--input-wrapper.active .placeholder {
top: -5px;
background-color: #ffffff;
color: #fd999a;
text-transform: uppercase;
letter-spacing: .8px;
font-size: 11px;
line-height: 14px;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.formRow--input-wrapper.active .formRow--input:not(:focus):not(:hover) ~ .placeholder {
color: #fec8c9;
}
.formRow--input-wrapper .formRow--input:focus, .formRow--input-wrapper .formRow--input:hover {
border-color: #fd999a;
}
.formRow .placeholder {
position: absolute;
top: 50%;
left: 10px;
display: block;
padding: 0 10px;
color: #95989a;
white-space: nowrap;
letter-spacing: .2px;
font-weight: normal;
font-size: 16px;
transition: all, .2s;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#password + .glyphicon {
cursor: pointer;
pointer-events: all;
}
#wrapper {
max-width: 500px;
margin: auto;
padding-top: 25vh;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hideshowpassword/2.1.1/hideShowPassword.min.js"></script>
<div class="wrapper">
<fieldset class="formRow">
<div class="formRow--item">
<br /><br /><br /><br />
<label for="password" class="formRow--input-wrapper js-inputWrapper">
<div class="form-group has-feedback">
<input type="password" class="form-control formRow--input js-input" name="password" id="password" placeholder="Password" onFocus="showeye();" onBlur="hideeye();">
<div id="showhide"></div>
</div>
</label>
</div>
</fieldset>
</div>
Change your field-icon css to this
.field-icon {
float: right;
margin-left: -25px;
margin-top: -25px;
position: relative;
z-index: 2;
display: none
}
And add this to your jquery
$("#password-field").focusin(function () {
$(".field-icon").show();
});
$("#password-field").focusout(function () {
$(".field-icon").hide();
});
Well you can do something like this. Check if the icon is visible, if Yes -> hide it, else -> show it. And hide it at first in the CSS.
var pswIcon = $(".toggle-password")
$("#password-field").on('focus blur', function() {
$(pswIcon).is(":visible") ? $(pswIcon).hide() : $(pswIcon).show()
})
$(pswIcon).click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
.field-icon {
float: right;
margin-left: -25px;
margin-top: -25px;
position: relative;
z-index: 2;
}
.container{
padding-top:50px;
margin: auto;
}
.fa.toggle-password {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" method="" action="">
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password-field" type="password" class="form-control" name="password" value="secret">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Check it out once.
/*$(document).ready(function() {
$('.inputcontainer input').click(function() {
$(this).parent('.inputcontainer').addClass('show');
//$('.toggleplaceholder').show();
});
$(document).click(function() {
$('.inputcontainer').removeClass('show');
//$('.toggleplaceholder').hide();
});
});*/
$(document).ready(function(){
$('.inputcontainer').click( function(e) {
e.preventDefault(); // stops link from making page jump to the top
e.stopPropagation(); // when you click the button, it stops the page from seeing it as clicking the body too
$(this).addClass('show');
});
$('.toggleplaceholder').click( function(e) {
e.stopPropagation(); // when you click within the content area, it stops the page from seeing it as clicking the body too
});
$('html').click( function() {
$('.inputcontainer').removeClass('show');
});
});
.toggleplaceholder {
display: none;
}
.show .toggleplaceholder {
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputcontainer">
<input type="password" placeholder="password">
<span class="toggleplaceholder"><i class="fas fa-eye"></i></span>
</div>
Fiddle And Code:
$(document).ready(function(){
$("input").focus(function(){
$(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function(){
if(!$('input').val()) {
$(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color:#ffffff;
padding: 15px 120px 50px 50px;
}
:focus{outline: none;}
.input1div {
display:inline-block; position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color:#8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
As you can see, If I click on 1 input box, then the other one also do the same animation. How can i make only the clicked input box do this animation.
Expected Result:
On click, the fake placeholder will go up (only the clicked one)
The fake placeholder will stay up, if the input box has some value.
Use $(this).next(".fakeplaceholder").
$("input").focus(function() {
$(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
if (!$('input').val()) {
$(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
It will target the next element with the class fakeplaceholder right after the input you focus
$(document).ready(function() {
$("input").focus(function() {
$(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
if (!$(this).val()) {
$(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color: #ffffff;
padding: 15px 120px 50px 50px;
}
:focus {
outline: none;
}
.input1div {
display: inline-block;
position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif;
color: #333;
width: 100%;
box-sizing: border-box;
letter-spacing: 1px;
}
.input1div input {
border: 0;
padding: 7px 0;
border-bottom: 1px solid #ccc;
}
.input1div input~.focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.input1div input:focus~.focus-border {
width: 100%;
transition: 0.4s;
}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color: #8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
$(document).ready(function(){
$("input").focus(function(){
$(this).next().addClass("fakeplaceholdertop");
});
$("input").change(function(){
if($(this).val()==""){
$(this).next().removeClass("fakeplaceholdertop");
}else{
$(this).next().addClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color:#ffffff;
padding: 15px 120px 50px 50px;
}
:focus{outline: none;}
.input1div {
display:inline-block; position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color:#8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
You are applying animation to all matching elements. Use this to target current element to perform the animation. Try using this
$(this).parent().find(".fakeplaceholder").addClass("fakeplaceholdertop");
$(this).parent().find(".fakeplaceholder").removeClass("fakeplaceholdertop");
You just have to add separate ID's to access the different fields.
<span class="fakeplaceholder" id="first">First Name</span>
<span class="fakeplaceholder" id="last">Last Name</span>
Then apply the fakeplaceholdertop class to the specific element.
$(".firstname").focus(function() {
$("#first").addClass("fakeplaceholdertop");
});
$(".lastname").focus(function() {
$("#last").addClass("fakeplaceholdertop");
});
I have a form which currently works fine, only thing I would like it to do is when I fill the text, the placeholder also should show whatever I type in the field.
Lets say if I am filling First Name:
Bob The Builder, the place holder should also show the same 'Bob The Builder' instead of 'First Name'.
Below is the related code to it:
Form-rise-click here for fiddle
HTML:
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool"/>
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool"/>
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool"/>
</div>
</div>
CSS:
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
jQuery:
$('input').on('focusin', function() {
$(this).parent().find('label').addClass('active');
});
$('input').on('focusout', function() {
if (!this.value) {
$(this).parent().find('label').removeClass('active');
}
});
I have just used keyup() of jquery. It is basically an event handler to the keyup of javascript event.
$('input').keyup(function(){
$(this).parent().find('label').text($(this).val())
});
Please check in the JSFiddle for any doubts.
Here is a small suggestion for a better UX.
When the input value is empty you can give a small if condition to show its former placeholder. And we can mange that placeholder with the help of an attribute. for e.g here i'm using name to retrieve the placeholder.
Please check in the JSFiddle for any doubts.
Hope this is helpful. Thank you.
Yes, it is possible. Use the following jQuery code as an example for the rest of your inputs.
$("#fname").keyup(function() {
$("label[for='fname']").html($(this).val());
});
Description: You select the ID input (e.g. #fname) for which you want to change the value of the label that moves to top (e.g. label fname) to the value that you are currently typing.
Check the updated JSFiddle here: https://jsfiddle.net/NikolaosG/tyowcgut/3/
Yes, the keyup event is the best way to handle this. But additionally, you use multiple event handlers for each input -- here's an alternate way to handle that scenario. Not that one is better or preferred, simply an option.
$('input').on({
focusin: function() {
$(this).parent().find('label').addClass('active');
},
focusout: function() {
if (!this.value) {
$(this).parent().find('label')
.removeClass('active');
}
},
keyup: function() {
var newText = $(this).val();
$(this).parent().find('label').text(newText);
}
});
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool" />
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool" />
</div>
</div>