this is the new code
I think the commented part on the beginning should be deleted.
$(".btn1").click(function () {
//console.log(' $(this).find(".check,textarea")
//.attr("name")');
/* */ /*
$(".form-group").each(function () {
var elementToCheck = $(this).find(".check");
if (!elementToCheck) {
return;
} */
/* */
$(".form-group")
.each(function () {
var elementToCheck = $(this).find(".check");
/* guard clause*/
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 incorrectly commented out the closing brace on the else line.
Do not comment out that closing brace. Just get rid of the else keyword.
yes that is a mistake. I think the return part results to skip the input without .check.
the new code
$(".btn1").click(function () {
//console.log(' $(this).find(".check,textarea")
//.attr("name")');
/* */ /*
$(".form-group").each(function () {
var elementToCheck = $(this).find(".check");
if (!elementToCheck) {
return;
} */
/* */
$(".form-group")
.each(function () {
var elementToCheck = $(this).find(".check");
/* guard clause*/
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);
});
});
Here is a cleaned up version of that code, mostly achieved by removing garbage.
$(".btn1").click(function() {
$(".form-group").each(function() {
var elementToCheck = $(this).find(".check");
if (!elementToCheck) {
return;
}
var name = elementToCheck.attr("name");
var value = elementToCheck.val().trim();
if (value == "") {
$(this).find(".error").html(name + " is empty !").removeClass("ok").addClass("warning");
$(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).find(".starrq").removeClass("ok").addClass("warning");
}
}
});
});
thank you, it is lovely. can you help me with please with the social buttons? I tried to sort out the first item but div is to long and I am not sure about the code.
<li>
<!--<button type="button" class="btn btn-lg btn-fb">-->
<!--<button type="button" class="btn1 buttonsocial" href="#"></button>-->
<div class="" style="border: 2px solid red;">
<i class="fa fa-facebook left icon"> </i>
<input type="button" class="btncustom buttonsocial" value="Facebook" onclick="msg()">
</div>
</li>
That is not my department.
Please see someone in the HTML & CSS forum for assistance with that.
ok thank you
can we sort out the email part? it is conflicting with first and last name.thank you.
If email is commented out first and last name works if I remove comment signs email start working partially only, not comparing against first name, first and last name validation stop working.
var emailName = (email) => E-mail.split("@")[0];
if (value != "") {
$(this).next().find(".error").html(name+' is ok').removeClass("warning").addClass("ok");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
if(fakeReg.test(value)) {
$(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
/* E-mail*/
/*
if (name === "E-mail") {
if(emailReg.test(value)) {
$(this).next().find(".error").html(name + " is Ok : Your data has been entered correctly ");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
} else {
$(this).next().find(".error").html(name + " is Incorrect: Please enter it correctly ").removeClass('ok').addClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).find(".error");
//$(this).css("border","2px solid red");
if (emailName === "First Name") {
$(this).next().find(".error").html(name + " is Incorrect: E-mail should not match first namr ").removeClass('ok').addClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
} else {
if (emailName === "Last Name") {
$(this).next().find(".error").html(name + " is Incorrect: E-mai should not match last namr ").removeClass('ok').addClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
}
}
}
}
}
} else {
$(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");
}
It’s really difficult to understand which parts of the code need to be commented and which parts of it need to be uncommented to experience the problem.
I will help you on one condition. You need to update the codePen code so that it has the email problem that you need fixed.
You can use “Fork” on the bottom right of the page to make a separate copy of the code, and update that separate copy so that it has the email problem.
I updated the code
update register2
validation in first and last name doesn’t work, and phone number neither. if you try the last update, email looks working but not comparing against first name, first and last name doesn’t validate: min a nd max length, numbers. fake text works, phone num. allows letters that not suposed to.
I am at the https://codepen.io/cfrank2000/pen/WNwxwwd page.
I don’t know how to experience your email problem.
What instructions must I follow, so that I experience the problem with the email?
email: comparison against first name not working,
first last name min and max length not checking number check not happens.
phone: allows letters that not supposed to.
thank you
Let’s start with the first one.
I don’t see that warning on my screen.
When an email is invalid I see “E-mail is Incorrect: Please enter it correctly” in red.
When it is valid I see “E-mail is Ok : Your data has been entered correctly” in green.
You need to let me know how to experience the problem.
Meanwhile, I’m off to sleep. See you in the morning.
1 Like
I understand that, thank you for help. now I’ve done correction and the checking is not working:
var emailName = (email) => email.split("@")[0];
tomorrow please have a look.thank you.
the other problem s that checking on submit button pressing does check until contact tel and stops.
$(".btn1").click(function () {
//console.log(' $(this).find(".check,textarea")
//.attr("name")');
/* */ /* */ /* */
$(".form-group").each(function() {
var elementToCheck = $(this).find(".check");
if (!elementToCheck) {
return;
}
var name = elementToCheck.attr("name");
var value = elementToCheck.val().trim();
if (value == "") {
$(this).find(".error").html(name + " is empty !").removeClass("ok").addClass("warning");
$(this).find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).find(".starrq").removeClass("ok").addClass("warning");
}
});
});
We can get to those other issues later on. It important that we focus on only one thing at a time, and get them properly dealt with. That way progress is made instead of spiraling out of control.
Let’s focus on the email matter first. When I put an email into the email field, the message below the field looks to be working well.
Right now I don’t know how to experience your problem, and there is nothing to fix. Job done.
It is quite clear though that you are experiencing a problem, I just don’t know what it is.
I cannot start helping until I can experience your problem. Please supply detailed instructions about how to experience your problem with the email.
1 Like
let try like this: I type frank0 in first name, than frank0@example.com and nothing filtered. frank0 should result fault message to correct it. thank you.
Is that because you don’t want the first name to contain any numbers?
one thing is that first name not supposed to contain number and letter repetition. that works. I try to filter out first and lastname in email name part.
Can you please give further details about that? My email address for example has both my first name and last name in it, for example. Other email addresses have nothing to do with a persons first or last name,