the password and email works dont , I think I dfid not get thet part, and after refreshing the site placeholders fall back, please help me, thank you.
the new codepen is this:
I have given you a complete working example so all you need to do was look line by line and find the differences. There would be little knowledge involved.
I have also several times now given you each of these answers but you fail to implement them even though I give you the code as well. I;m not sure what else I can do.
Here are the problems again.
- Your textarea has 2 name attributes (which is invalid) and none match the word ‘message’ that you are using in the JS to trigger the validation. You have written input type=“message” but there is no such thing.
This is your textarea:
`<textarea type="message" class="form-control" rows="4" cols="50" name="comment" id="text" placeholder="" name="pwd" required></textarea>`
This is what it should be:
<div class="form-group ">
<textarea class="form-control emptyTest" rows="4" cols="50" name="message" id="message" placeholder="" required></textarea>
<span class="glyphicon glyphicon-pencil glyph"></span>
<label class="form-control-placeholder" for="message"> Enter Message : </label>
<span class="is-required">*</span>
</div>
- The page does’t work on refresh because you didn’t add the emptyTest class to each formControl as per my demos.
<input type="password" class="form-control emptyTest" etc.....
-
The password seems to be working but again despite me asking you don’t say what it is that doesn’t work? I have no idea what you expect it to do? Was it supposed to do a ‘song and dance’ because it certainly doesn’t do that
-
The validate rules tidied up to match the html.
<script>
$(document).ready(function() {
// check if input is not empty
function testInpValue() {
$('.emptyTest').each(function(i) {
if ($(this).val().length > 0) {
$(this).closest('.form-control').addClass("notEmpty");
}
});
}
testInpValue();
$("#mycontactform").validate({
rules: {/*
name: "required",*/
pwd: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
message : {
minlength:50,
required:true
}
},
messages: {/*
name: "Please enter your full name",*/
pwd: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
message :"Please type your message (min 50 characters)"
}
});
});
</script>
5)The whole working page yet again.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<style>
label{
color:green;
}
<!--
-->
.form-group {
position: relative;
margin: 2rem 0 2.5rem;
}
.form-group .glyph{
position:absolute;
top:14px;
left:6px;
color:darkred;
padding-left: 6px;
}
.form-control-placeholder {
position: absolute;
top: 0;
left: 0;
padding: 12px 0 0 0;
transition: all 200ms;
opacity: 0.5;
}
input.form-control{padding-left:28px}
textarea.form-control{padding-left:28px}
.form-control-placeholder{padding-left:25px}
.form-control-placeholder{left:10px;}
.form-control.error~.form-control-placeholder,
.form-control:focus~.form-control-placeholder,
.form-control.valid~.form-control-placeholder,
.form-control.notEmpty~.form-control-placeholder{
font-size: 75%;
transform: translate3d(0, -100%, 0);
opacity: 1;
}
.form-control.error~.form-control-placeholder {
color: red;
}
.error {
color: red;
}
/* add arrows or crosses */
.form-control.valid~.form-control-placeholder:after,
.form-control.error~.form-control-placeholder:after {
content: " \2714";
color: green;
font-weight: bold;
font-size: 2rem;
}
.form-control.error~.form-control-placeholder:after {
content: " \00D7";
color: red;
position: relative;
top: .15em;
}
.form-control.valid {
border-color: green;
}
.form-control.error {
border-color: red
}
/* required */
.is-required {
position: absolute;
left: -15px;
top: .2em;
color: gold;
font-weight: bold;
font-size: 24px;
}
p.asterisk {
font-style: italic;
color: #666;
font-weight: bold;
font-size: 1.4rem;
margin: 1em 0;
}
.star {
color: gold;
font-size: 24px;
vertical-align: middle;
}
</style>
<script>
$(document).ready(function() {
// check if input is not empty
function testInpValue() {
$('.emptyTest').each(function(i) {
if ($(this).val().length > 0) {
$(this).closest('.form-control').addClass("notEmpty");
}
});
}
testInpValue();
$("#mycontactform").validate({
rules: {/*
name: "required",*/
pwd: {
required: true,
minlength: 5
},
email: {
required: true,
email: true
},
message : {
minlength:50,
required:true
}
},
messages: {/*
name: "Please enter your full name",*/
pwd: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
message :"Please type your message (min 50 characters)"
}
});
});
</script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form id="mycontactform" action="/action_page.php">
<div class="form-group ">
<input type="email" class="form-control emptyTest" id="email" placeholder="" name="email" required>
<span class="glyphicon glyphicon-envelope glyph"></span>
<label class="form-control-placeholder" for="email"> Enter Email :</label>
<span class="is-required">*</span>
</div>
<div class="form-group ">
<input type="password" class="form-control emptyTest" id="pwd" placeholder="" name="pwd" required>
<span class="glyphicon glyphicon-lock glyph"></span>
<label class="form-control-placeholder" for="pwd"> Enter Password : </label>
<span class="is-required">*</span>
</div>
<div class="form-group ">
<textarea class="form-control emptyTest" rows="4" cols="50" name="message" id="message" placeholder="" required></textarea>
<span class="glyphicon glyphicon-pencil glyph"></span>
<label class="form-control-placeholder" for="message"> Enter Message : </label>
<span class="is-required">*</span>
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
You have all the answers you just need to put the pieces together correctly
2 Likes
Thank you for help. everything is working fine, I was tired and I made attention mistakes, I am sorry for inconveniences. I try to push myself but it not allways works, as my teacher Mr Raymond Snare said : Fra nk give yourself a break. Yes I feel it , rested I can notice mistakes that otherwise don’t. I am sorry again, thank you very much, it was realy helpfull, frank
1 Like
Hi
regarding 4d#227, I would like to ask, is there a maxlength option to limit the message size?
also if I want to check password that not just numbers or plain letter string is entered but, a mixture of small , capital letters and numbers are entered.
posibly check text field (name) if not numbers are entered. I guess I need jquery, something similar to “emptitest” example in a modified way.thank you frank.
Yes there is a maxlength attribute you can add to the textarea. I’m sure you could have found that yourself
<textarea maxlength="100" etc....
I believe there is also a setting in the validation plugin that will allow a maxlength to be added.
https://jqueryvalidation.org/?s=maxlength
This SO answer seems to touch on what you want but is beyond my scope.
Be careful though as it can become counterproductive to require too complicated a system.
1 Like
I am sorry to come back again but I’ve got some problems. it Im type messsage:true or required true in message it is not working properely. another thing I don’t understand is that the 150 char maximum is just 125. also If I add a background to the floating placeholder , it is to heigh on th top and short on the bottom. please help me. thank you, frank.
I am sending the codepen also
Where does this ‘message:true’ come from? It’s not part of the jquery validation plugin as far as I can see? Please point me to where you saw it in action?
I’ve given you the right code for the textarea about 5 times now so you must try and find these answers for yourself. The truth is out there
The script rules for the textarea are this:
comment : {
minlength:50,
maxlength:150,
required:true
}
I would also suggest that for the textarea you keep the ids the same as the name attribute to avoid confusion.
<div class="form-group">
<textarea class="form-control emptyTest" rows="4" cols="50" name="comment" id="comment" placeholder="" required></textarea>
<span class="glyphicon glyphicon-pencil glyph"></span>
<label class="form-control-placeholder" for="comment"> Enter Message : </label>
<span class="is-required">*</span>
</div>
No it seems to be 150 as expected as shown from the screenshot of your codepen once the above adjustments have been made.
Look at the padding you have on the placeholder:
.form-control-placeholder {
position: absolute;
top: 0px;
left: 0px;
padding: 11px 0 0 36px;
transition: all 200ms;
/*background:white;*/
color:green;
opacity: 0.5;
}
You have 11px padding top and no padding bottom. Does that make it clearer?
Please test for yourself and see what happens when you have equal padding top and padding-bottom. Note that changing the padding will change the position of the text in relation to the icon so you will then need to see what needs changing in order to line things up again. Please try and work this out for yourself so that you have an idea how to change it later should you not like its current alignment. There is nothing special or difficult about this aspect but its just something you have to practice and become familiar with.
Hi
thank you for help. I am sorry for inconveniences, I just tried to follow the email, but it doesn’t work like that. I think I just need to figure out the mentioned padding matter.
what I noticed if I accidentaly type an empty character that can screw up the email part, unless I delete it and start again. do I need jquery to sort it out?
thank you, frank
Hi
I am soorry to come back again with template matter. building my template, I realized that footer doesn’t appear as it appeared previously on other experiments. I checked may times but I can not see anything. please point my attention to the problem to work out properely.
thank you
here is the codepen
Your first stop should be the w3c validator for your css (and then your html). If you visited thew3c css validator it would tell you the error is here.
<!--.flex-direction: row-reverse;-->
<!-- /* footer start */-->
You have used html comments in your css which is not allowed. I have told you this before. You must use css comments.
/*.flex-direction: row-reverse;*/
/* footer start */
No, if you have made the changes I specified then it works as it should. Spaces are invalid characters in emails and should not be allowed. If you still say it is not working then please provide the updated codepen as I am not very good at second guessing.
Thank you, I am sorry. my template now works fine. thank you again.
Hi
Please helpme. I found a validation tutorial on youtube but I don’t know why , it doesn’t work as I expect and I don’t understand it. error messages disappears fast after clicking the submit button.
Hi,
What was wrong with the working version that we have before which was much more sophisticate than this latest version?
It would help if you pointed to the tutorial so we can see what you missed out. The form is obviously going to submit unless you stop it in some way (usuallay something like event.preventDefault();).
In your password field you have an ID called #pwd yet in your JS you are looking for something called .pwd which doesn’t exist.
However, this question looks more like how to program in JS rather than using a default plugin so I suggest you post in the JS forum for expert advice. This thread has run its course with the original topic so start a new thread in the JS forum if you want to discuss problems with this new validation attempt.
1 Like
Hi
thank you for answer. yes, the previous validation is much more sophisticated, I’ve seen my latest attempt on youtube and I tried to replicate to learn about it to be able to program this feature, but it doesn’t work as it was working in the tutorial. validation messages disappears fast if I don’t put alert(). thank you, frank.
In comments I posted the youtube link to watch it again, thank you, frank.
Hi
I am really sorry to come back with hamburger issue. As I click between the hamburger and the edge of it’s button it is not working and if I click on hamburger it works again so it revert hamburger. It will be cross when closed and hamburger when open. can you help me with this one. It looks crease. thank you, frank
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.inner-icon{
/*
position:absolute;
top:5%;
right:5%;*/
display:flex;
flex-direction: column;
}
.bar1, .bar2, .bar3{
/*
position:relative;*/
top:0px;
height:5px;
width:35px;
margin:3px;
background:red;
transition:0.5s;
}
.rotate45dg {
-webkit-transform: rotate(45deg) translate(-6px, -6px);
-ms-transform: rotate(45deg) translate(8px, 7px); /* IE 9 */
transform:rotate(45deg) translate(8px, 7px);
transition:0.5s;
}
.rotate-45dg {
-webkit-transform: rotate(-45deg) translate(-6px, 6px);
-ms-transform: rotate(-45deg) translate(8px, -8px); /* IE 9 */
transform:rotate(-45deg) translate(8px, -8px);
transition:0.5s;
}
.opacity{
opacity:0;
}
.blue{background:blue;}
</style>
<script>
$(document).ready(function(){
$(".inner-icon").click(function(){
$(".bar1").toggleClass("blue");
$(".bar1").toggleClass("rotate45dg");
$(".bar2").toggleClass("opacity");
$(".bar3").toggleClass("rotate-45dg");
});
});
</script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle icon" data-toggle="collapse" data-target="#myNavbar">
<span class="inner-icon">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
That should be obvious to you if you think about it?
You are applying a click action on the inner-icon yet your are expecting something to happen when the outer button is clicked!
We went through this before and you don’t want to handle two clicks on this element; just work from the button and perform both actions.
i.e.
<script>
$(document).ready(function(){
$(".navbar-toggle").click(function(){
$(".bar1").toggleClass("blue");
$(".bar1").toggleClass("rotate45dg");
$(".bar2").toggleClass("opacity");
$(".bar3").toggleClass("rotate-45dg");
});
});
</script>
I changed inner-icon to navbar-toggle.
$(".navbar-toggle").click(function(){
Thank you and I am sorry, my mistake, I didn’t notice it, I need to get thorough few times on the related matter.to get all relevant, important details. thank you, frank