Change form style

bootstrap

#226

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:


#227

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.:slight_smile:

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.

  1. 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>
  1. 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.....

  1. 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 :slight_smile:

  2. 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 :slight_smile:


#228

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


#229

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.


#230

Yes there is a maxlength attribute you can add to the textarea. I’m sure you could have found that yourself :slight_smile:

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

https://www.the-art-of-web.com/javascript/validate-password/


#231

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


#232

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 :slight_smile:

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.


#233

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


#234

the-art-of-web.com looks very powerful and it takes some time to get it.


#235

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


#236

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.


#237

Thank you, I am sorry. my template now works fine. thank you again.