Change form style

That’s because (and this is for the third time of saying) that you haven’t added the code I gave you (properly).

You did add some code but you omitted pieces that I’d given you and changed other pieces that you shouldn’t.

  1. I told you to place the icon class on the button which you didn’t. You need the click associated with the button itself.

. <button type="button" class="navbar-toggle icon" data-toggle="collapse" data-target="#myNavbar">

  1. I told you to change the div to a span and to add the class of inner-icon. You only did this half right. You left it as a div.
   <span class="inner-icon">
			<span class="bar1"></span>
			<span class="bar2"></span>
			<span class="bar3"></span>
		</span>
  1. I did not say change the js to point to .inner-icon because that puts you back exactly where you were and targeting inner button elements. Leave the JS pointing to .icon which is the actual button (a button cannot have two click actions associated with it).

$(".icon").click(function()
etc…

  1. Adjust the translate measurements to position your arrow better.

Here is the full working code.

<!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;
    }

    .rotate45dg {
      transform: ;
      -ms-transform: rotate(45deg);
      /* IE 9 */
      transform: rotate(45deg) translate(8px, 7px);

    }

    .shift {}

    .rotate-45dg {
      -ms-transform: rotate(45deg);
      /* IE 9 */
      transform: rotate(-45deg) translate(8px, -8px);
    }

    .opacity {
      opacity: 0;
    }

    .blue {
      background: blue;
    }
  </style>
  <script>
    $(document).ready(function() {
      $(".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>
1 Like

Thank you, and I am sorry for inconveniencesn now I have a better understanding, it works fine.
the second question is back to the floating placeholder. it works, but I made some changing. replace name with first name and last name and added icons as I experimented previously but I think I made mistake 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/jquery.validation/1.16.0/jquery.validate.min.js"></script>
  <style>
  .form-group {
	  position: relative;
	  margin-bottom: 1.5rem;
	}

  .form-control-placeholder {
	  position: absolute;
	  top: 0;
	  padding: 7px 0 0 13px;
	  transition: all 200ms;
	  color:green;
	  opacity: 0.5;
	}
	.form-control.error ~ .form-control-placeholder,
	.form-control:focus ~ .form-control-placeholder,
	.form-control.valid ~ .form-control-placeholder {
	  font-size: 75%;
	  transform: translate3d(0, -100%, 0);
	  opacity: 1;
	}
	 .form-control.error ~ .form-control-placeholder {
	color:red;
	}
	.error {
		color:red;
	}
  </style>
  
<script>
$(document).ready(function() {
    $("#myform").validate({
        rules: {
            fname: "required",
			lname: "required",
            password: {
                required: true,
                minlength: 5
            },

            email: {
                required: true,
                email: true
            },

        },
        messages: {
            lname: "Please enter your first name",
			fname: "Please enter your last name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },

            email: "Please enter a valid email address"
        }
    });

});	
</script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  
  <form id="myform" action="/action_page.php">
    <div class="form-group">
      <input type="text" id="lname" class="form-control" name="lname" required>
      <span class="glyphicon glyphicon-user"></span>
	  <label class="form-control-placeholder" for="lname">First Name</label>
    </div>
	<div class="form-group">
      <input type="text" id="fname" class="form-control" name="fname" required>
      <span class="glyphicon glyphicon-user"></span>
	  <label class="form-control-placeholder" for="lname">Last Name</label>
    </div>
    <div class="form-group">
      <input type="text" id="email" class="form-control"  name="email" required>
      <!-- placeholder="Enter email"-->
	  <span class="glyphicon glyphicon-envelope"></span>
      <label class="form-control-placeholder"  for="email">Email:</label>
    </div>
    <div class="form-group">
      <input type="password" id="password" class="form-control" name="password" required>
      <label class="form-control-placeholder" for="password">Password</label>
    </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>

I am sorry, it supposed to be the codepen

Please refer to my previous demos when you make changes as we have handled these things before :slight_smile:

If you want the glyphicon inside the input then place it there absolutely.

e.g.

    .form-group .glyphicon{
      position:absolute;
      top:10px;
      left:6px;
    }

You will then need to pad the left of the input and the placeholder to make room. You also need the left position on the placeholder or it will just appear at its place in the normal flow when you have differing content alongside.

Integrate the following changes into your existing rules.

     input.form-control{padding-left:25px}
    .form-control-placeholder{padding-left:25px}
    .form-control-placeholder{left:0;}

Thank you, it works fine, it is lovely. I would like to ask, I’ve seen red star showing that on the form those fields are required. also some forms shoves icons or signs if the field is filled up correctly or x if not. do I need jquery or css will do the job. thank you, frank.
I go now to work, I’ll be back later arroun 9pm, thank you, frank

That’s exactly what I have shown in my codepen.

form-valid

It’s not usually red because that usually signifies an error but ‘required’ form fields often have a star next to them (although most people don’t have a clue what the star means unless there is a label below the form telling them that it means required fields).

You can add a span and place it in the same way that I placed your icons.

See my codepen for an example.

Hi
Thank you for help. It works just I expected. I might be wrong but after filling up the fields correctly and relod the page the content in the field stays, and the placeholders fall back on the top of the content. is there any solution for that?
I would have two more question: first If I save a modified version to create a contact form, works i the same way as the input fields? or I need some special rules.
The second question that I have a login/reset password bs3 modal with jquery, that means two forms. Do I need twice the code I have or is there a shortcut.
thank you, frank

Yes as I said at the start don’t ‘bu$$er’ about with the labels :slight_smile:

The problem with these fancy effects is that they go against a lot of default behaviours built into forms.

However to address your problem you have a couple of choices.

  1. You can add the autocomplete=“off” attribute to the input and this will stop it trying to be helpful and offering choices and remembering data.

    <input autocomplete="off" … etc…

Of course if your user refreshes the page accidentally they lose all the data they have added which for a long form could be annoying. On a short form it doesn’t really matter. I;m not a big fan of autocomplete anyway as it always seems to suggest the wrong fields anyway.

  1. You can write a script that looks as the inputs in question and if they are not empty then add a new class to the input. You can then use that new class in your css and move the label out of the way.

I have updated my codepen to show this in action.

The key points are that first I manually add a class to all the inputs that I am concerned with. I called the emptyTest.

<input type="text" id="name" class="form-control emptyTest" name="name" required>

Do that for all the inputs you want to check.

Next add the following script to check if the input is not empty.

 $(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();

    $("#myform").validate({
        rules: {
            name: "required",
            password: {
                required: true,
                minlength: 5
            },
            email: {
                required: true,
                email: true
            },
        },
        messages: {
            name: "Please enter your full name",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            email: "Please enter a valid email address"
        }
    });
});

The above script will add a class to the input of .notEmpty which we then use in the css and added to our existing label rule.

.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;
}

Check my demo if you can’t get it working.

Yes it work fine, as I expected it but password becomes empty. I guess it normal, thank you. frank

Yes :slight_smile:

I made another experiment to make a contact form, using the knowledge I learned but it doesn’t work. I checked all my possible mistakes I’ve done before but I couldn’t find anything, please help me, thank yoy, 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>
<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 {
      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() {
      $("#mycontactform").validate({
        rules: {/*
          name: "required",*/
          password: {
            required: true,
            minlength: 5
          },
          email: {
            required: true,
            email: true
          },
		  message : {
			minlength:50,
			required:true,
			message:true
		  }
        },
        messages: {/*
          name: "Please enter your full name",*/
          password: {
            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"
        }
      });
    });
  </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" 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" 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 type="message" class="form-control" rows="4" cols="50" name="comment" id="text" placeholder="" name="pwd" required></textarea>
      <span class="glyphicon glyphicon-pencil glyph"></span>
	  <label class="form-control-placeholder" for="text"> 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>

Did you mean to leave out the link to the validate plugin?

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>

You also have two name attributes on your textarea which is invalid.

No, I just tried to make an experiment that didn’t work and I don’t understand why? applying all I’ve learned in validation matter ( to be honest is not much but something) I was hoping I’ll make a new version but it did not work, even I check a number of time I didn’t find anything. that is why I am asking your help. thank you, frank

I keep telling you that you need to make yourself clearer when asking to solve a problem.

What does not work and what is the problem you want solved in your last demo.

As far as I can tell if you add the link to the plugin the demo is working as it should.

What do you see is not working and please show the updated demo with the validate plugin link in place. The page won’t work without it as it requires the valid class to be added to keep the labels out of the way.

In my last demo I just pasted, the validation doesn’t work. as I enter data doesn’t happen amything. if you try you will see it. thank you, frank

How do I know that you have made the changes properly that I told you to do unless you supply the updated code? You could have placed the link to the js in the wrong place and not updated the name and id attributes for the textarea. You also have rules for an element called ‘message’ in the validate plugin but there is no such element in the html.

If I try it it with the additions I already suggested it works straight away.

Here is the working result.

<!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 {
 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() {
      $("#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",*/
          password: {
            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 (minimum 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" 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" 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" 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>

It’s not up to me to find out what you mean when you say something doesn’t work and you can’t just say “I’ve tried that” without showing the updated code of what you tried :slight_smile:

1 Like

Yes , I think I’ve got the problem partially. I needed to copy the mentioned link for validation. but having for message, can I modify the code following the input analogies?thank you.

I can see email works, password and message don’t . that means if I type wrong email, I get error message, if I type less the 5 character in password I get ok, same way message: less then 50 char I get ok however I shoud get eror message. thank you, frank

Post your code!! I don’t know how many times I can keep saying the same thing.

Did you match the name attributes on the inputs to the ones used in the validation routines?

  pwd: {
            required: true,
            minlength: 5
          },
1 Like

I am sorry, the code is 7h 221, it is scrollable. I tried to match as you mentioned but most likely I made mistake, that is why I need help. thank you