You don’t have a class of yourname in your page at all. You have an ID of yourname but from the comments it looks like you should be looking for the submit button anyway.
The JS won’t work where you have it anyway because the html for the form hasn’t been rendered yet. Put the snippet at the end of the html just before the closing body tag.
e.g.
<script>
// Bind the event handler to the "submit" JavaScript event
$('#yourname').click(function(){
// Get the Login Name value and trim it
var name = $('#yourname').val();
alert('clicked')
// Check if empty of not
if (name.length < 1) {
alert('Text-field is empty.');
return false;
}
});
</script>
</body>
</html>
I suggest you re-read wherever it was you took that snippet from and see if you can see where you went wrong:)
Hi
thank you for help, it is great. I managed another verzion but the second part, to override the default message, is not working. there might be other problems too.
<!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>
.text-label {
color: dodgerblue;
font-weight: bold;
}
.fielderror{
display:none;
}
</style>
<script>
</script>
<!-- https://stackoverflow.com/questions/16556968/jquery-form-submit-to-check-empty-fields -->
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form class="login">
<div class="form-group">
<label for="yourname">Your Name:</label>
<input type="text" class="form-control" id="yourname" placeholder="Enter name" name="name">
<span class="fielderror" >Input-field is empty.</span>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button class="btn btn-success">Submit</button>
</form>
</div>
<script>
// Bind the event handler to the "submit" JavaScript event
$('#yourname').on("click",function(){
// Get the Login Name value and trim it
var name = $('#yourname').val().trim();
// Check if empty of not
if (name.length < 1) {
//alert('Input-field is empty.');
$(".fielderror").show();
$(".fielderror").css("color","red");
// return false;
} else {
$(".fielderror").hide();
$(".fielderror").html("Ok");
$(".fielderror").css("color","green");
}
//if (name == '') { alert('empty character');}
});
</script>
</body>
</body>
</html>
You still seem to be mixing everything up. You had a good working version in your other thread but you now seem to be re-inventing the wheel again. I understand that you may wish to start again to learn how to do this but if all you are doing is copying and pasting from other sites without understanding the code then that’s no different to what you had before.
In the code above you are detecting a click on the input tag but that won’t tell you if the data is correct when you move to the next element. It only knows what’s there when you click it so is no real help in validating. You would be better off using blur and that will test the input when you leave.
e.g.
$('#yourname').on("blur",function(){
Another bug is that in your else section you are hiding the error message.
What is the point of hiding the message and then colouring it and changing the html?
No one will see it and indeed as you have changed the html the error message will now say ‘OK’ although it won’t be seen at that point. However if someone clicks back into the original input and leaves without entering data that will get a red message that says ‘OK’ because you removed the original error message!
You must think your logic through carefully.
Form validation is complicated and best left to the experts. You had a working version in your other thread which should have suited your needs.
If this is a learning exercise then ask a precise question and explain your methodology more clearly:)
Hi
thank you for help. Yes I was thinking of it but I consider this part a programming chalange that I can take farther to check smal and capital letters, numbers, special characters, to eliminate mistakes. thank you. frank
yes this is a learning exercise to learn about validation as much as possible, to get a much better understanding from programming side, to be able to see the problem and the most adecvat solution. the experts became expert because they didn’t give up at the first failure. we have to learn to be stubborn in that way that takes us to the solution and beyond. thank you, frank.
here I present my latest ‘experiment’ , that I still not realy understand, just having an idea, tried different things and I got this option.
<script>
// Bind the event handler to the "submit" JavaScript event
$('#yourname').on("click",function(){
// Get the Login Name value and trim it
var name = $('#yourname').val().trim();
// Check if empty of not
if (name.length < 1) {
//alert('Input-field is empty.');
$(".fielderror").show();
// $(".fielderror").css("color","red");
// return false;
}
if (name.length > 1) {
//$(".fielderror").hide();
$(".fielderror").html("Ok");
$(".fielderror").css("color","green");
} else {
$(".fielderror").html("empty");
$(".fielderror").css("color","red");
}
//if (name == '') { alert('empty character');}
});
</script>
number one thing I don’t understand is that $().html() command should display the desired information as I do it with .fielderror, it doesn’t. the second thing is the condition I applied to get the ‘togglable’ message, than another is I have to click on the field to validate. thank you, frank
I already told you that click was not a good idea and told you to use blur instead. The input is always going to be empty when you first click on a new form so what’s the point of doing that?
Use ‘blur’ which is when the input loses focus so you know it has been focused and interacted with.
You are only showing the fielderror if it is empty so your ok message won’t be seen unless it was first empty and then you go back a second time!
Also you have a default fielderror message in the html but it will never be shown because you change the text to OK or Empty? You could leave the error message blank and empty and then it doesn’t need hiding as such and then you can add the message text as required.
Your logic is flawed so try and write down in English what you want to happen and then work out the logic to do that properly.
e.g.Example of flawed logic:
if (name.length < 1)
…and then
if (name.length > 1)
So you are testing less than 1 and then greater than 1. What happens if the result is actually 1?
Also what happens if the user just submits the form and doesn’t interact with the inputs? You will get no error message. Shouldn’t you be testing on submit also?
Also try to avoid using JS to do the styling when that is the job of CSS. Most times you can just swap a class with JS and then the styling is carried out with CSS and avoids any specificity issues.
e.g.
<!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">
<style>
.text-label {
color: dodgerblue;
font-weight: bold;
}
.warning {
color:red;
}
.ok {
color:green;
}
</style>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form class="login">
<div class="form-group">
<label for="yourname">Your Name:</label>
<input type="text" class="form-control" id="yourname" placeholder="Enter name" name="name">
<span class="fielderror" ></span> </div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember">
Remember me</label>
</div>
<button class="btn btn-success">Submit</button>
</form>
</div>
<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>
// Bind the event handler to the "submit" JavaScript event
$('#yourname').on("blur",function(){
// Get the Login Name value and trim it
var name = $('#yourname').val().trim();
// Check if empty of not
if (name.length > 0) {
$(".fielderror").html("Ok");
$(".fielderror").addClass('ok').removeClass('warning');
} else {
$(".fielderror").html("Empty");
$(".fielderror").addClass('warning').removeClass('ok');
}
});
</script>
</body>
</html>
Once you get one field working you would need to amend the logic to automatically cater for other similar fields without having to explicitly reference them.
Lastly, as mentioned you would also need to take care of what happens if the form is submitted before any input has been interacted with as your approach will not handle that eventuality.
Thank you, this is a lot beter than mine one but still there are a lot to do. as you mentioned the submit button. I tested what if I enter one char. and still is ok that is strange. I entered spaces and that was ok however trim() should cut it out if I am right. could you help me with it? thank you, frank
You are still not giving enough information and not displaying the code you are using. Are you talking about your code or my code?
My code works because I don’t use the checks that you were using. Your code doesn’t work for the reasons I mentioned and although you may think something is working it is not because the message was just there from something that happened before.
Your trim function is only using the result of stripping the space in your tests. It does not change the actual input to remove the spaces. If you wanted to do that then you would need something like this:
var name = $.trim($(this).val());
$('#yourname').val(name);
i.e.
$('#yourname').on("blur",function(){
// Get the Login Name value and trim it
var name = $.trim($(this).val());
$('#yourname').val(name);
// Check if empty of not
if (name.length > 0) {
$(".fielderror").html("Ok");
$(".fielderror").addClass('ok').removeClass('warning');
} else {
$(".fielderror").html("Empty");
$(".fielderror").addClass('warning').removeClass('ok');
}
});
You had code already for testing on submit so you should be able to look back and work that out.
Also you may want to think about whether to change the error message as the input changes (See jquery input event) rather than just waiting until it is blurred. In that way you can update the error message as text is entered rather than waiting until you move to the next.
$('#yourname').on("blur input",function(){
e.g.
<!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">
<style>
.text-label {
color: dodgerblue;
font-weight: bold;
}
.warning {
color:red;
}
.ok {
color:green;
}
</style>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form class="login">
<div class="form-group">
<label for="yourname">Your Name:</label>
<input type="text" class="form-control" id="yourname" placeholder="Enter name" name="name">
<span class="fielderror" ></span> </div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember">
Remember me</label>
</div>
<button class="btn btn-success">Submit</button>
</form>
</div>
<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>
$('#yourname').on("blur input",function(){
console.log('changed');
// Get the Login Name value and trim it
var name = $.trim($(this).val());
$('#yourname').val(name);
// Check if empty of not
if (name.length > 0) {
$(".fielderror").html("OK: Your data has been entered correctly");
$(".fielderror").addClass('ok').removeClass('warning');
} else {
$(".fielderror").html("EMPTY: Please enter data into this input");
$(".fielderror").addClass('warning').removeClass('ok');
}
});
</script>
</body>
</html>
Bear in mind my JS is basic and there may be much better ways to do all this.
Yes that was the start of the function that is called when the form is submitted (i.e. the form has an id of #login).
No that would bee too awkward and not easily maintained. You would need to add a class to each input to add the event listener and then you can find the nearest fielderror to the input that has been interacted with. In that way you avoid the specifics and can expand or contract the code easily when you add or take away inputs.
I’m assuming that you are going to call the routine on a number of inputs.
As I said I’m pretty basic at JS so there is probably a much better way to do this but as a start the following should work.
<!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">
<style>
.text-label {
color: dodgerblue;
font-weight: bold;
}
.warning {
color:red;
}
.ok {
color:green;
}
</style>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form id="login" class="login">
<div class="form-group">
<label for="yourname">Your Name:</label>
<input type="text" class="form-control input-check" id="yourname" placeholder="Enter name" name="name">
<span class="fielderror" ></span> </div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control input-check" id="email" placeholder="Enter email" name="email">
<span class="fielderror" ></span>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control input-check" id="pwd" placeholder="Enter password" name="pwd">
<span class="fielderror" ></span>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember">
Remember me</label>
</div>
<button class="btn btn-success">Submit</button>
</form>
</div>
<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>
$(function() {
var notValid = false;
$('.input-check').on("blur input", function() {
checkMyInput($(this));
});
$("#login").submit(function(event) {
//check all inputs with a class of input-check
notValid = false;
$(".input-check").each(function(index) {
checkMyInput($(this));
if (notValid) event.preventDefault(); //don't submit if error found
});
});
function checkMyInput(inp) {
// Get the Login Name value and trim it
var fielderror = inp.closest('.form-group').find('.fielderror');
var name = $.trim(inp.val());
if (event.type === "blur") {
inp.val(name);
}
// Check if empty of not
if (name.length > 0) {
fielderror.html("OK: Your data has been entered correctly");
fielderror.addClass('ok').removeClass('warning');
} else {
fielderror.html("EMPTY: Please enter data into this input");
fielderror.addClass('warning').removeClass('ok');
notValid = true;
}
}
});
</script>
</body>
</html>
Please notice the ids, classnames and fielderror positioning as they are required for this to work.
It is essentially the same as the previous demo but checks all inputs with a class of input-check. When the submit button is clicked it cycles through all the inputs and calls the same function as before. If a field is invalid then it sets the notValid variable to true and then won’t submit the form or you would never see the error messages.
As I said before it gets complicated very quickly and as yet does not take into account any special requirements for each input type. Also there was a bug in the previous version that didn’t allow for spaces in the middle of the input.
Hi
yes but doing it in js/jquery is a programming chalange, where the gained experience I might be able to use later in other projects, developments, thank you. frank
Hi
I just try to build bs3 form input check with each() function, to get attributs like id or name and $().text() it in but something is not ok. please help me. I don’t understand it. puting together parts from w3schools doesn’t do the same job as they do separately on w3schools site.( each, text, attr).thank you, frank.
