please have a look
modalform
You are using on blur in that example and we have said a number of times that blur only works when youâve finished all your typing in the input and then clicked somewhere else.
In your other âupdatedâ example you are using focusin, focusout and input and not blur.
e.g.
The last demo would need to be something like this (JS gurus to confirm please ;)):
$("body").on("focusin focusout input", ".inputboxmodal1 .input-check", function() {
console.log("something occurred");
YES, IT IS WORKING!!! FINALLY. thank you.
I am sorry but I got another problem. I try to apply this knowledge in my contact form and registration form but running each() (jquery) alert stops at email ,I would expect all fields with star. thank you.
contact
Why do you have code for bootstrap 3.3.7 and 3.2.0, and 3.4.1 loading? Only one of those should be used, surely.
I made some changing
<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.3.7/css/bootstrap.min.css">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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.3.7/js/bootstrap.min.js"></script>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<link href="css/myStyles-1b.css" rel="stylesheet">
but still the cycle stops with alert at email.
Okay, letâs fork this.
With codePen the HTML head and body sections are not used. It is only the content that goes inside the body that you put in the HTML section.
But what to do with CSS links and style scripts from the head? Those go in Settings, where you add them to the external code section.
You had multiple different versions of jQuery loading, so Iâve just gone with the most recent one and removed all the others.
You also have style sheets for main.css and myStyles-1b.css that canât be found. Am I right to believe that those have been pasted in your contact page already?
External CSS
- https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
- https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
External JS
- [s]https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js[/s]
- https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
- https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js
The CSS code currently mixed in with the HTML code should go in the CSS code panel.
The JS code currently mixed in with the HTML code should go in the JS panel.
Then we can use the code panel dropdown to format the HTML, CSS, and JS, and analyze each of them for problems.
The HTML has a problem on this line:
<input type="text" class="form-control check inputbgr_contact fst-name-field"
name="First Name" firstName" placeholder="First Name">
Looking at the other code I can assume that firstName is supposed to be an id attribute instead.
The next problem is: Tag must be paired, missing: [ </div> ], open tag match failed [ <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> ] on line 402.
So another closing </div> tag is needed at the end of the code.
The next problem is: The id value [ row ] must be unique.
<footer id="row" style="z-index:2;">
You have a duplicate identifier? Those are supposed to be unique!
Did you mean to use class="row" instead?
The CSS does nothing with row, and I canât find row in the JS code either, so Iâm going to rename id="row" to class="row" even though I know nothing about what that changes.
The next problem is with break tags: Tag must be paired, no start tag: [ </br> ]
Hereâs one of the problem lines:
<address>Virtual Pizza Restaurant Ltd.</br>
Now good marks for using break tags where they are to be properly used, in addresses and/or poetry. There is no closing break tag though. It should be <br> just by itself.
The next problem is: Tag must be paired, missing: [ </button> ], start tag match failed [ <button type="button" class="btn1 buttonsocial"> ] on line 351.
<li><a href="#"></a>
<button type="button" class="btn1 buttonsocial">
<i class="fa fa-wordpress left" aria-hidden="true"> Wordpress</i>
</li>
Itâs right. The button tag should be properly closed.
The next problem is: Please use space for indentation.
<textarea placeholder="Feedback" class="form-control check textarea_contact feedback-field" id="feedback" name="feedback" rows="12" required></textarea>
Thatâs getting kind of picky, but okay. The content inside of a textarea element is not modified when cleaning up code, so we can just close up with textarea element.
The next problem is: Duplicate of attribute name [ name ] was found.
<input type="text" class="form-control check inputbgr_contact zip-field" name="Zip code" name="Zip Code" id="ZipCode" placeholder="Zip Code">
That one is easy to fix, but is it a lowercase c or an uppercase C that should be used? The Phone Number elsewhere helps to resolve that problem, if things are to remain consistent.
That fixes all of the HTML problems, and leaves us with the fixed HTML code thatâs shown at https://codepen.io/pmw57/pen/MWKLKBM
2 Likes
I can now fork that updated codePen code to have a go at the JS.
The first analysis is confusing: '{a}' is already defined.
I donât know what to do with that, so Iâm putting the code through JSLint which has much clearer messages instead.
The first issues are about telling JSLint that document and $ are expected globals.
The next issue is: `Unexpected âthisâ.
$(".form-group").each(function () {
var inputattr = $(this).find(".check").attr("name");
In this case we can give the function parameters for index and group, and use group instead of this.
The next problem is: Unexpected 'debugger'.
And theyâre right. The debugger is removed.
The next issue is: Undeclared 'alert'.
Typically alert shouldnât be used. Itâs brash and itâs ugly, rude and crude. More importantly though it blocks all other code from working while the alert is active, which can be problematic.
Itâs a potential problem to keep an eye on, but Iâll add it to the list of known globals for now.
The next problem is: Redefinition of 'inputattr' from line 316.
var inputattr = $(group).find(".check").attr("name");
// Get the Login Name value and trim it
var inputstr = $(group).next().find(".fielderror").val().trim();
alert("This input field has lost its focus. " + inputattr + inputstr);
//$("span").text(inpattr)
var inputattr = $(this).find("check").attr("id");
I donât want to have to worry about renaming the second inputattr to something else and worrying about everything else down below that might be affected by it, so I just rename above it the inputattr and inputstr to name and value instead.
The next problem is: Unexpected 'this'.
var inputattr = $(this).find("check").attr("id");
What on earth is this? Looking up to the top of the function I see that group elements are involved, and the function has a group parameter. I can replace this with group and donât need to scan all over the place anymore.
There are a lot more this keywords in this function that get replaced with group too.
The next problem is: Line is longer than 80 characters.
//$(group).next(".fielderror").html(inpattr+" is EMPTY: Please enter data into this input");
Yes, that line is too long. It scrolls all the way off to the right. The html() contents I can break down to a separate line instead, but itâs commented out code, so delete it instead.
Delete all the comments!
The next problem is: Expected '$' at column 4, not column 2.
So Iâll run the code through beautifier.io to clean up all of the formatting problems.
The next problem is: Line is longer than 80 characters.
.html(inputattr + " is EMPTY: Please enter data into this input");
We can drop the html() contents down to the next line to resolve that. But, it is also a reminder that the code is getting too deeply nested.
The next problem is: Expected one space between 'function' and '('.
$(document).ready(function() {
Doing the code formatting has helped us to find other problems. Anonymous functions really end up being a pain in the backside when trying to debug code, so name all of your functions.
This one Iâll name onready
The next problem is: Expected one space between 'function' and '('.
This one is not a repeat. There are just a lot of these problems.
$(".fst-name-glyph").on("mouseenter", function() {
This function Iâll name enterFirstNameGlyph and do similar for all of the other unnamed functions.
There are several events that are duplicated on the same element:
$(".fst-name-glyph").on("mouseenter", function enterFirstNameGlyph() {
$(".fst-name-glyph").css("background-color", "purple");
$(".fst-name-glyph").css("color", "pink");
});
...
$(".fst-name-glyph").on("mouseenter", function enterFirstNameGlyph() {
$(".fst-name-field").css("background-color", "lightblue");
});
so Iâll combine them into just the one function instead.
We now have two functions with exactly the same contents.
$(".fst-name-glyph").on("mouseenter", function enterFirstNameGlyph() {
$(".fst-name-glyph").css("background-color", "purple");
$(".fst-name-glyph").css("color", "pink");
$(".fst-name-field").css("background-color", "lightblue");
});
...
$(".fst-name-field").on("mouseenter", function enterFirstNameField() {
$(".fst-name-glyph").css("background-color", "purple");
$(".fst-name-glyph").css("color", "pink");
$(".fst-name-field").css("background-color", "lightblue");
});
You know what we do there? Make them one function instead by using multiple selectors, which lets us remove the glyph and field from the function name, calling it just enterFirstName instead.
We now have functions that duplicate each others behaviour, just on different elements.
$(".fst-name-glyph, .fst-name-field").on("mouseenter", function enterFirstName() {
$(".fst-name-glyph").css("background-color", "purple");
$(".fst-name-glyph").css("color", "pink");
$(".fst-name-field").css("background-color", "lightblue");
});
...
$(".lst-name-glyph, .lst-name-field").on("mouseenter", function enterLastName() {
$(".lst-name-glyph").css("background-color", "purple");
$(".lst-name-glyph").css("color", "pink");
$(".lst-name-field").css("background-color", "lightblue");
});
We can move that duplicate behaviour out to a separate onEnterField function:
function onEnterField(glyph, field) {
$(glyph).css("background-color", "purple");
$(glyph).css("color", "pink");
$(field).css("background-color", "lightblue");
}
$(".fst-name-glyph, .fst-name-field").on("mouseenter", function enterFirstName() {
onEnterField(".fst-name-glyph", ".fst-name-field");
});
But thatâs not good enough, as separately naming the elements tends to get brittle and fragile. Instead of specific names, the classnames of input-group-addon and form-control can be used instead.
function onEnterField(el) {
var formGroup = $(el).parents(".form-group");
$(".input-group-addon", formGroup).css("background-color", "purple");
$(".input-group-addon", formGroup).css("color", "pink");
$(".form-control", formGroup).css("background-color", "lightblue");
}
...
$(".fst-name-glyph, .fst-name-field").on("mouseenter", function enterFirstName(evt) {
onEnterField(evt.target);
});
And while weâre at it, we can remove the enterFirstName function completely and just use the evt object from the onEnterName function, which is better renamed to be enterFieldHandler.
function enterFieldHandler(evt) {
var formGroup = $(el).parents(".form-group");
$(".input-group-addon", formGroup).css("background-color", "purple");
$(".input-group-addon", formGroup).css("color", "pink");
$(".form-control", formGroup).css("background-color", "lightblue");
}
...
$(".fst-name-glyph, .fst-name-field").on("mouseenter", enterFieldHandler);
$(".fst-name-glyph, .fst-name-field").on("mouseleave", leaveFieldHandler);
And now that we have a large number of fields with almost identical event assignments, we can remove some of that duplication.
So all of the mouseenter and mouseleave code can now be replaced with only the following two lines:
$(".input-group-addon, .form-control").on("mouseenter", enterFieldHandler);
$(".input-group-addon, .form-control").on("mouseleave", leaveFieldHandler);
But enough of that reducing duplication. Letâs go back to fixing up problems reported to us by JSLint.
The next problem is: Expected one space between 'function' and '('.
$(".button1").click(function() {
What is button1? Thatâs a bad name for it. That is the submit button. Instead of using the submit button click event, a much more reliable technique is to use the form submit event instead.
// $(".button1").click(function() {
$("form.contact").submit(function formSubmit() {
The next problem is: Expected one space between 'function' and '('.
$(".form-group").each(function(ignore, group) {
So naming that function validateFormGroup works well.
The next problem is: Unexpected space between ')' and '.'.
$(group)
.next(".fielderror")
.html(
inputattr + " is EMPTY: Please enter data into this input"
);
A separate line for each method is not a good idea as it encourages too much chaining. So they need to go on the same line.
And the code finally gets through without any other problems.
That should give a good starting point from which to start investigating the behaviour that you want to improve on. The updates code is found at https://codepen.io/pmw57/pen/dyGaMoZ
3 Likes
Now the problem as it has been announced, is that the validation stops after the alert comes up for Firstname, Lastname, and Email.
In the browser console I see an error appear after the Email alert.
That problem says: Uncaught TypeError: Cannot read property 'trim' of undefined
A likely candidate for being the cause of that problem is:
var value = $(group).next().find(".fielderror").val().trim();
We might be able to figure out the cause of the problem by breaking up the code to separate variables, so that we can console.log their values.
var nextGroup = $(group).next();
var fieldError = nextGroup.find(".fielderror");
var value = fieldError.val().trim();
However, instead of doing that I can set a debugger breakpoint on that line instead. Because codePen makes it a bit tricky to find the internal code thatâs executing, I can instead add a debugger() statement on the line before, so that on submitting the the browser console debugger shows me the line thatâs about to run. I can resume execution for the firstname, lastname, and email, which lets me investigate things more closely for that which comes afterwards.
When the breakpoint triggers I can hover over the group variable in the Sources panel to find that itâs the phone section, which is right. $(group).next() gives the contact telephone section. I donât think thatâs the desired behaviour, but that is what your code is doing.
It is that next() thatâs causing the problem. When youâre dealing with one group, you shouldnât have code that attempts to look at some other next group.
What now needs to occur is for you to decide on what should be happening instead.
1 Like
thank you for help. I started doing corrections still working on it, I post an updated code.
I use alert to check what is going on. so I would like to check all fields with star. please have a look the new code ,I made a bit shorter and more rational. thank you.
Letâs work through the problem in more detail.
The code in question is this:
$(".form-group").each(function validateFormGroup(ignore, group) {
var name = $(group).find(".check").attr("name");
var value = $(group).next().find(".fielderror").val().trim();
console.log(value);
alert("This input field has lost its focus. " + name + value);
var inputattr = $(group).find("check").attr("id");
if ($(group).find("check").val() === "") {
$(group).next(".fielderror").html(
inputattr + " is EMPTY: Please enter data into this input"
);
$(group).next(".fielderror").addClass("warning").removeClass("ok");
$(group).css("border", "2px solid red");
event.preventDefault();
} else {
$(group).next("span").text(inputattr + " " + " is Ok");
}
});
What is the code trying to achieve?
- If the value is empty, it gives a fielderror warning message
- If the value is not empty, it uses the span to say that things are ok
Letâs move the validateFormGroup function out as a separate function. This makes it easy for us to test what the function does.
function validateFormGroup(ignore, group) {
var name = $(group).find(".check").attr("name");
var value = $(group).next().find(".fielderror").val().trim();
alert("This input field has lost its focus. " + name + value);
var inputattr = $(group).find("check").attr("id");
if ($(group).find("check").val() === "") {
$(group).next(".fielderror").html(
inputattr + " is EMPTY: Please enter data into this input"
);
$(group).next(".fielderror").addClass("warning").removeClass("ok");
$(group).css("border", "2px solid red");
event.preventDefault();
} else {
$(group).next("span").text(inputattr + " " + " is Ok");
}
}
$("form.contact").submit(function formSubmit() {
$(".form-group").each(validateFormGroup);
});
We want the validateFormGroup function to do the following things:
- If the value is empty, it gives a fielderror warning message
- If the value is not empty, it uses the span to say that things are ok
Nice and simple, so letâs use some asserts to ensure that this behaviour properly occurs.
I will use the First name formgroup to do these tests.
So first letâs get the group:
var firstNameField = $("#firstName");
var firstnameGroup = $(firstNameField).parents(".form-group");
console.log(firstnameGroup.get(0));
And now that we have access to the firstnameGroup, I need to ensure that the field error and the input value is empty before we test that the warning occurs.
var firstNameField = $("#firstName");
var firstnameGroup = $(firstNameField).parents(".form-group");
var fielderror = $(firstnameGroup).find(".fielderror");
var fielderrorOriginal = $(firstnameGroup).html();
$(fielderror).text("");
$(firstnameField).val("");
validateFormGroup(0, firstnameGroup);
console.assert($(fielderror).text() === "firstName is EMPTY: Please enter data into this input", "Empty Firstname should show warning");
console.assert($(fielderror).hasClass("warning") === true, "Should look like a warning");
$(fielderror).text(fielderrorOriginal);
If the function was working correctly we should see nothing in the console from those asserts, but we do see them. So letâs remove all of the code from that function and instead put in only whatâs needed to make the test pass.
function validateFormGroup(ignore, group) {
var input = $(group).find("input.check");
var fielderror = $(group).find(".fielderror");
if ($(input).val() === "") {
$(fielderror).html(
input.id + " is EMPTY: Please enter data into this input"
).addClass("warning");
}
}
And those asserts no longer appear, indicating that the function properly gives the error message in the right place.
We now want some asserts to check what happens when there is content in the field value. Iâll keep a modified version of the warning asserts too, to ensure that those behave properly when no warning is needed.
var fielderror = $(firstnameGroup).find(".fielderror").get(0);
$(fielderror).text("");
$(firstnameField).val("some value");
validateFormGroup(0, firstnameGroup);
console.assert($(fielderror).text() === "firstName is OK", "Filled Firstname should show OK");
console.assert($(fielderror).hasClass("warning") === false, "Should not look like a warning");
fielderrorOriginal = $(firstnameGroup).html();
That currently asserts that a filled firstname should not show a warning, so Iâm going to use the start of the validateFormGroup function to remove that warning thing.
function validateFormGroup(ignore, group) {
...
$(fielderror).removeClass("warning");
if ($(input).val() === "") {
...
}
}
And now that the assert that a filled name shouldnât look like a warning has gone away, we can focus on making the filled name show OK, by adding an else clause to the if statement.
if ($(input).val() === "") {
$(fielderror).text(
$(input).prop("id") + " is EMPTY: Please enter data into this input"
).addClass("warning");
} else {
$(fielderror).text($(input).prop("id") + " is OK");
}
We can now move the text string to a msg variable, so that assigning it as text can occur after the if statement.
var msg = "";
if ($(input).val() === "") {
$(fielderror).addClass("warning");
msg = $(input).prop("id") + " is EMPTY: Please enter data into this input";
} else {
msg = $(input).prop("id") + " is OK";
}
$(fielderror).text(msg);
And the validateFormGroup function is now much simpler and seems to achieve everything thatâs needed of it.
Thatâs an example of using console.assert() to help you develop the needed code.
Itâs a bit easier when using a dedicated testing library like Mocha or Jest or Karma, but the idea remains the same:
- write a simple test for what you need
- write the code to make that test pass
- improve the code while keeping passing tests
2 Likes
Oh wow, a whole new set of code, that seems to have most of the same problems as before.
I am NOT repeating all of the above work yet again. Iâve shown the path - someone else can use that info if they like to help you further along with it.
3 Likes
You need to get into the habit of checking your code frequently with the validators. There are multiple issues with the HTML in your most recent code.
HTML validator: https://validator.w3.org
CSS validator: https://jigsaw.w3.org/css-validator/
Before posting further code, you need to correct the HTML and CSS issues. When posting your code in Codepen, please remove all commented-out code and put each section into the correct panel - HTML, CSS or JS. (This applies to any occasion on which you are posting code for help, not just this instance.) You need to make it as easy as possible for those trying to assist, and not require people to search through vast amounts of unused code.
3 Likes
Hi Paul
I try to rebuild my form, but this simplified experiment is not working neither. I hope I can apply all new knowledge you showed me. thank you
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-3" for="firstName">
<span class="glyphicon glyphicon-star"></span> First Name :</label>
<div class="col-sm-9">
<div class="input-group ">
<span class="input-group-addon glyph2 fst-name-glyph">
<i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control check inputbgr_contact fst-name-field"
name="First Name" id="firstName" placeholder="First Name">
</div>
<div id="inputstat1" class="inputstatus">
<span id="erroremail" class="error">Please enter your email</span>
<span id="errorfeedbk1" class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="inputEmail">
<span class="glyphicon glyphicon-star"></span> Email Address :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph2 email-glyph next">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</span>
<input type="text" class="form-control check inputbgr_contact email-field"
name="E-mail" id="inputEmail" placeholder="E-mail">
</div>
<span class="fielderror">Please enter your E-mail.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="firstName">
<span class="glyphicon glyphicon-star"></span> Password :</label>
<div class="col-sm-9">
<div class="input-group ">
<span class="input-group-addon glyph2 fst-name-glyph">
<i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="Passwordd">
</div>
<span class="fielderror" >Please enter your password.</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<script>
$(".form-group").blur(function(){
var attrib = $(this).find('.check').attr("name");
var inp = $(this).val().trim();
alert("This input field has lost its focus. "+attrib+" " +inp);
$(this).find(".error").html(attrib);
});
</script>
</body>
</html>
can I change blur() part to
$(â.form-groupâ).on(focusin focusout input, function(){
console.log(âchangedâ);
}?
Then go back to Paulâs post and work your way through all the examples and comments that he posted. most of your questions are answered in that post. Remember this is supposed to be a learning experience and not us just doing it for you 
Did you try?
If so what went wrong?
(hint: the code is not valid and the original blur event wonât work on a div)
2 Likes
unfortunately nothing works, clicking on form results no effect.
As I said your original wonât work because form group has no blur event.
The new code wonât work because its not valid.
$(".form-group").on(focusin focusout input, function(){
It should be:
$(".form-group").on("focusin focusout input", function(){
You missed the quote marks. By now you should not be making silly errors like that so pay more attention to the code you are using. Otherwise you will just keep tripping yourself up.
You will need to remove the alert and use console.log otherwise the alert will fire almost continuously and crash the page.
You canât keep saying ânothing worksâ without providing the code that doesnât work.
3 Likes
Hi Paul
thank you for help. now the code started working but I need help with text area. it is obviously different from input. this is the code:
<div class="form-group">
<label class="control-label col-sm-3 control-label">
<span class="glyphicon glyphicon-star"></span> Feedback</label>
<div class="col-sm-9">
<textarea placeholder="Feedback" class="form-control check textarea_contact feedback-field" name="Text area" id="feedback" name="feedback" rows="12" required>
</textarea>
<div class="inputstatus">
<span class="error">Please enter your message.</span>
<span class="feedback"></span>
</div>
</div>
</div>
the whole code is
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-3" for="firstName">
<span class="glyphicon glyphicon-star"></span> First Name :</label>
<div class="col-sm-9">
<div class="input-group ">
<span class="input-group-addon glyph2 fst-name-glyph">
<i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control check inputbgr_contact fst-name-field"
name="First Name" id="firstName" placeholder="First Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your email</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="lastName">
<span class="glyphicon glyphicon-star"></span> Last Name :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph2 lst-name-glyph">
<i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control check inputbgr_contact lst-name-field"
name="Last name" id="lastName" placeholder="Last Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your last or family name.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="inputEmail">
<span class="glyphicon glyphicon-star"></span> Email Address :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph2 email-glyph next">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</span>
<input type="text" class="form-control check inputbgr_contact email-field"
name="E-mail" id="inputEmail" placeholder="E-mail">
</div>
<div class="inputstatus">
<span class="error">Please enter your E-mail.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="phoneNumber">
<span class="glyphicon glyphicon-star"></span> Phone Number :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph2 phone-glyph">
<i class="fa fa-phone" aria-hidden="true"></i>
</span>
<input type="tel" class="form-control check inputbgr_contact phone-field"
name="Phone Number" id="phoneNumber" placeholder="Phone Number">
</div>
<div class="inputstatus">
<span class="error">Please enter your phone number.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="msgtype">
<span class="glyphicon glyphicon-star"></span> Nature of message</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph2 msgtype-glyph">Text</span>
<input type="text" class="form-control check inputbgr_contact msgtype-field"
name="Natureof message" id="msgtype" placeholder="Additional Info">
</div>
<div class="inputstatus">
<span class="error">Please enter the nature of your message .</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3 control-label">
<span class="glyphicon glyphicon-star"></span> Feedback</label>
<div class="col-sm-9">
<textarea placeholder="Feedback" class="form-control check textarea_contact feedback-field" name="Text area" id="feedback" name="feedback" rows="12" required>
</textarea>
<div class="inputstatus">
<span class="error">Please enter your message.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<script>
// $(".form-group").blur(function(){
$(".input-group").on("focusin focusout .check", function(){
console.log('changed');
var attrib = $(this).find("input").attr("name");
var attribTextarea = $(this).find("textarea").attr("name");
var inp = $(this).find("input").val().trim();
//alert("This input field has lost its focus. "+attrib+" " +inp);
if (inp != "") {
$(this).next().find(".error").html("ok "+attrib+ ' '+inp).css("color","green");
$(this).next().find(".error").html("ok "+attribTextarea+ ' '+inp).css("color","red");;
} else {
$(this).next().find(".error").html("ok "+attrib+ ' '+inp).css("color","green");;
$(this).next().find(".error").html("ok "+attribTextarea+ ' '+inp).css("color","red");;
}
});
</script>
</body>
</html>
console.log still not working, Iâll try a previous one but still not really understand how does it work. I thing somehow should be connected to the input and related operation.
also suggested $(group) instead $(this) did not work, clicking on form input field did not happen anything. thank you.
adding condition creates new pron=blems
Youâre still mixing up the arguments, the delegation target selector has to be a separate string. It happens to work for your input elements nonetheless because the event now bubbles up to the corresponding .input-group element⌠the textarea however is not a descendant of such an element, so you wonât get any logs here. Why are you trying to use event delegation here anyway?
PS: Thatâs a much better code sample to work with though. :-)
If I am right this code is better
$(".input-group").on("focusin focusout", function(){ }
is there a way check textarea and use this info?
also using condition for checking input, does unexpected thing, doesnât switch conform inpâs status.
I need help with the folowing code too
// $(".form-group").blur(function(){
$(".input-group").on("focusin focusout", function(){
console.log('changed');
// $(".form-group").blur(function(){
$(".input-group").on("focusin focusout", function(){
console.log('changed');
var attrib = $(this).find(".check").attr("name");
var attribTextarea = $(this).find("textarea").attr("name");
var inp = $(this).find("input").val().trim();
// var inptxta = $(this).find("textarea").val().trim();
//alert("This input field has lost its focus. "+attrib+" " +inp);
//if ( (inp != "" || inptxta != "")) {
if ( inp != "" ) {
$(this).next().find(".error").html("Your "+attrib+ ' is OK '+inp).css("color","green");
//$(this).next().find(".error").html("ok "+attribTextarea+ ' '+inptxta).css("color","red");;
} else {
$(this).next().find(".error").html("Your "+attrib+ ' is empty '+inp).css("color","red");;
//$(this).next().find(".error").html("ok "+attribTextarea+ ' '+inptxta).css("color","red");;
}
thank you.
With info you mean name and value? You might get both from the event.target, which is the element where the event got dispatched â so you donât even have to differentiate between textarea and input elements.
And since you textarea doesnât have an .input-group parent youâll also have to adjust the selector accordingly:
$('.input-group, textarea').on('focusin focusout', function (event) {
var name = event.target.name
var value = event.target.value.trim()
var $error = $(this).next().find('.error')
if (value) {
$error.html('ok ' + name + ' ' + value)
} else {
$error.html(name + ' is empty')
}
})