thank you for help. to be honest this is quite new for me, also my problem , I use check as class but looks like it is not recognized by my system, why?
In that particular situation, there is no ".check" class anywhere in the HTML. There shouldn’t be either.
The JS code just needs to use a guard clause to stop the function executing any further when there is no ".check" element.
1 Like
yes, you are right, this is a code to give a feedback for contact, there is no star saying required so it is optional, that is why there is no check class. I thought, each() function will skip it not having .check.
I don’t know if it is the right way to do it.
I would like to ask, the guard close can help to handle the optional part? how to do it? can I get help with it?thank you.
Yes. You use it to check if you have something that you need. When you don’t have something that you need, such as when $(this).find(".check") doesn’t exist, you just return out of the function.
The guard clause article gives full details. But basically, it’s a simple if statement that checks if you don’t have what is needed.
Sure thing. Read the article about using a guard cause to do an early return, give it a go, and let us know how you do with it.
1 Like
thank you for help. I have looked up the guard clause article. as I mentioned I just need to skip the none required parts, so my idea is to use jquery to check avalability of class .check but how make to disregard input or textarea
that doesn’t have it?thank you.
I think the words I have marked in bold are key here toronto2009. Paul is a helpful bloke, but I’m guessing would like to see your attempt first.
yes i’ve read it but i’ve seen “templates” that means I have to find out how does it work in my case. My question is : if I use a jquery function in if statement to check only dose input fields which has .check class the rest of input field will be skipped.is this a working option at least logicaly? that is what I am thinking about.thank you…
Yes it works logically. All of the code in that section is to do with the “.check” input field. The problem occurs when an input group doesn’t have a “.check” input field. When the input group doesn’t have a “`.check” input field, there is nothing that needs to be checked. Going any further results in unwanted errors. Returning early from the function using a guard clause is the most reliable solution to that problem.
The guard clause acts like a the bouncer guy at the entrance to a night club, saying: “This function requires a ".check" element. You can’t go any further without one.”
That’s why it is a guard clause. It really is as simple as that.
1 Like
This is my experiment
$(".input-group")
.each(function () {
var name = $(this)
.find(".check,textarea")
.attr("name");
var value = $(this)
.find(".check")
.val()
.trim();
if (( $("input").hasClass("check"))&&(value === "")) {
$(this)
.next()
.find(".error")
.html(name + " is empty !")
.removeClass("ok")
.addClass("warning");
$(this)
.next()
.find(".feedback")
.removeClass("glyphicon glyphicon-ok")
.addClass("glyphicon glyphicon-remove")
.removeClass("ok")
.addClass("warning");
//$(this).find(".starrq").removeClass("ok").addClass("warning");
}
//alert(name);
});
using jquery hasClass() , I am checking the availability of .check class but it is not doing anything, thameans something is wrong.please have a look.
1 Like
What is wrong is that you are doing it far too late. It should be right at the start of the function, not further down.
It can be as simple as this:
.each(function () {
if (!$(this).find(".check")) {
return;
}
// rest of the function code here
});
Or even this:
.each(function () {
var elementToCheck = $(this).find(".check");
if (!elementToCheck) {
return;
}
// rest of the function code here
});
You can then make use of that elementToCheck variable later on in the function too.
A guard clause is a really simple thing, but it does a very important job.
thank you for help. it looks working but I would like to ask if there is an input field without .check between two input field with .check, skipping will continue the checking or will break the checking?
I have a new experiment to skip not required input
$(".btn1").click(function () {
//console.log(' $(this).find(".check,textarea")
//.attr("name")');
/*
$(".form-group").each(function () {
var elementToCheck = $(this).find(".check");
if (!elementToCheck) {
return;
}
var value = $(this)
.find(".check")
.val()
.trim();
if (value === "") {
$(this)
.find(".starrq")
.removeClass("ok")
.addClass("warning");
}
}); */
$(".form-group")
.each(function () {
var elementToCheck = $(this).find(".check");
/* if (!elementToCheck) {
return;
} else */
if ($(this).find("input,textarea").hasClass("check")) {
var name = $(this)
.find(".check,textarea")
.attr("name");
var value = $(this)
.find(".check,textarea")
.val()
.trim();
if (value === "") {
alert(name);
$(this)
//.next()
.find(".error")
.html(name + " is empty !")
.removeClass("ok")
.addClass("warning");
$(this)
// .next()
.find(".feedback")
.removeClass("glyphicon glyphicon-ok")
.addClass("glyphicon glyphicon-remove")
.removeClass("ok")
.addClass("warning");
$(this)
.find(".starrq")
.removeClass("ok")
.addClass("warning");
//$(this).find(".starrq").removeClass("ok").addClass("warning");
}
}
//alert(name);
});
});
/* document ready end */
});
You have removed the guard clause and instead used deeply nested if statements to achieve something similar, Congratulations, you have now made your code more complicated and harder to work with.
1 Like
I am sorry, I made correction but I think my new code needs more adjustment
$(".form-group").each(function () {
var elementToCheck = $(this).find(".check");
if (!elementToCheck) {
return;
}
/* */
});
Go on.
thank you for help, can you help me in the mater of guard clause? which parts needs guard clause? I was thinking about those parts that are skipped. thank you.
update regitration2
No other parts need the guard clause. When you’ve updated the code we can move on to making further progress from there.
yes I posted the updated code above. also the social buttons needs corrections. I tried something but it is not good. the div is too long but I need to place icon in the input field. would you mind to have a look? thank you.,
The code is not appropriately updated.
Here is your current code:
var elementToCheck = $(this).find(".check");
/* if (!elementToCheck) {
return;
} else */
if ($(this).find("input,textarea").hasClass("check")) {
- The commented out code should not be commented out.
- The else statement should be deleted (but keep the closing brace there).
- Below the else clause, the if line should be deleted, along with the matching closing brace for it.
You have some updates to do.
1 Like