Hi Paul
thank you for help and patience. unfortunately I found another problem. I thought I can build the form checking as I learned but the following example doesn’t work as I expect, doing things like empty check depending on first field that is nonsense
<!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.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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".form-control").on( "blur input", function( ){
console.log('changed');
var vr = $(this).attr('name');
var inp = $('.form-control').val().trim();
if ( inp === "" ){
alert(vr + ' can not be left blank');
$(this).next().html(vr + " is empy ");
event.preventDefault();
}
else {
$(this).next().html(vr + " is ok ");
}
});
$(".btn1").click(function(){
$( ".form-control" ).each(function() {
var vr = $(this).attr('name');
if ($('input').val().trim() === ""){
alert(vr + ' can not be left blank');
$(this).next().html(vr + " is empy ");
event.preventDefault();
} else {
$(this).next().html(vr + " is ok ");
}
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form >
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<span>email</span>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
<span>password</span>
</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>
</div>
</body>
</html>
JS isn’t my thing but I’m guessing you wanted $(this) in the above code rather than $('.form-control') because .form-control is many elements not just one of them!
Doesn’t bootstrap have its own validation plugin rather than writing your own?
As @coothead said above the required attribute is a lot less fuss than all this js lark
yes, this is he problem. I’ve got something but I don’t understand it. please help me to get it right, thank you, Frank
ps.: as you can see , the code does something but I feel is not the right thing.
yes the placeholder looks not right. I try to move right 118px, also I try to ad glyph icons from my previous experiments… thank you, frank.
ps,: I try to make placeholder to become transparent or “white” gradualy with animation meanwhile floating label floats up on clicking on a chosen input.
As I said only a subset of css properties are valid for the placeholder although browsers may support others.
You can probably move the placeholder with text-indent but I haven’t tested.
You can’t however address pseudo elements like the ::placeholder in JS because they are not part of the DOM.
Instead you dynamically add a class to a parent of the control and then use that class in css to make changes to your elements including any placeholders.
Generally avoid directly styling things with js but more easily add and remove classes with the js and then handle the styling from css where it belongs.
I don’t think you can do that as the placeholder disappears as soon as you type and is handled automatically by the browser.
If you want that feature you will probably have to write your own placeholder. You can probably just add it to your current floating label as a nested span and treat it as a placeholder with css. Position the element next to the floating text but don’t move it up with the rest and then fade it out wit css in the usual way
