Okay, let’s try and improve this code.
First, jquery is only needed once. Remove the duplicate:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
Then, move the scripts down to the end of the body.
<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
...
</script>-->
</head>
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
...
</script>
</body>
Because the scripts are now properly at the end of the body, there’s no need now for the document ready part.
// $(document).ready(function(){
$(".form-control").on( "focusin .box input", function( ){
...
});
$(".form-control").on( "focusout .box input", function( ){
...
});
// });
Now that the code is in a tidier state, we can look through what you want and put together a todo list.
- required caused problems
- wants placeholders to fade out
- when empty field, the background color should be pink, if not lightgreen
- as I start typing it should change bacground
As the existing code is confusing and causing troubles, this is now when we remove all of the scripting code and start over.
// $(".form-control").on( "focusin .box input", function( ){
// console.log('changed');
// ...
// });
// $(".form-control").on( "focusout .box input", function( ){
// console.log('changed');
// ...
// });
color the fields
You were wanting the field to be pink when not filled, and otherwise lightgreen.
Because you’re using bootstrap, I can’t use the input selector to color the fields:
input { /* doesn't work with bootstrap */
background: pink;
}
Instead of that, the bootstrap form-control selector can be updated.
form-control {
background: pink;
}
And all of the form fields are colored pink.
valid fields
How do we color them green when things are okay? We can add green to the :valid selector
.form-control:valid {
background-color: lightgreen;
}
All the fields go green, because they are currently optional and don’t need to be entered. Let’s fix that.
required fields
We can add required to the fields that must be entered. Let’s add required to the email field:
<input type="email" required class="form-control" id="email" placeholder="Enter email" name="email">
And also add required to the password field:
<input type="password" required class="form-control" id="pwd" placeholder="Enter password" name="pwd">
And now, the form starts with the fields pink, and stays pink while the field is not valid.
When a valid email address is entered, the field goes green. Nice.
- required caused problems
- wants placeholders to fade out
- when empty field, the background color should be pink, if not lightgreen
- as I start typing it should change bacground
fading out placeholders
The fading out of placeholders is achieved with the following CSS code:
input.form-control::placeholder {
color: red;
font-weight: bold;
text-indent: 100px;
transition: all 1s ease;
}
input.form-control:focus::placeholder {
color: rgba(255,255,255,0);
}
Remove scripting code
As all of this was dealt with without needing any scripting, the jquery library and the bootstrap javascript library and the scripting code, can all be removed.
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
// $(".form-control").on( "focusin .box input", function( ){
// ...
// });
</script> -->
The code
Here is the bootstrap form page with much better and more reliable presentation and form validation.
<!DOCTYPE html>
<html>
<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.1/css/bootstrap.min.css">
<style>
.form-control {
background-color: pink;
}
.form-control:valid {
background-color: lightgreen;
}
input.form-control::placeholder {
color: red;
font-weight: bold;
text-indent: 100px;
transition: all 1s ease;
}
input.form-control:focus::placeholder {
color: rgba(255,255,255,0);
}
</style>
</head>
<body>
<p>Click this paragraph.</p>
<h2>Vertical (basic) form</h2>
<form>
<div class="form-group">
<div class="box">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" required>
</div>
</div>
<div class="form-group">
<div class="box">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" required>
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default btn1">Submit</button>
</form>
</body>
</html>
summary
We have now taken care of the whole todo list, with no JavaScript being needed at all.
- required caused problems
- wants placeholders to fade out
- when empty field, the background color should be pink, if not lightgreen
- as I start typing it should change bacground
When you attempt to submit an invalid form, you are given large error messages telling you what needs to be done. Those error messages also appear when you hover on invalid fields.
Is there anything more that needs to be done?
