thank you for help and I appologize for inconveniences. now I understand the instructions related codepen.
my new problem is related registration form. I don’t understand why, until email field is disabled or commented out the rest of fields works fine, as I disable the comment out first name, last name, the checkings stops, doesn’t happens, I don’t understand why. can I get help with it?
<script>
$('.input-group').on('focusin focusout input', function () {
console.log('cnanged');
var name = $(this).find(".check").attr("name");
var value = $(this).find(".check").val().trim();
var fakeReg = /(.)\1{2,}/;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
/* */
var $form = $("form.register");
var inputs = $form[0].elements;
/* first name */
if ( value === "") {
$(this).next().find(".error").html("Your "+name+" field 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");
} else {
//$(this).next().find(".error").html("Your "+name+" field is OK !").removeClass("warning").addClass("ok");
//$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
/* first name */
if (name === "First Name") {
if (value.length > 19) {
// condition for more than 19 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter no more than 19 char ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
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 {
if (/^([a-zA-Z]{2,16})+$/.test(value) === true) {
$(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");
} else {
if (/^([a-zA-Z]{1,16})+$/.test(value) === true) {
// condition for less than 2 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter 2 upper case or lower case at least ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
// condition for non a to z
$(this).next().find(".error").html(name + " is Incorrect: Please enter upper case and lower case only ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
//if (value.length > 16) {
// $(this).next().find(".error").html(name + " is Incorrect: Please enter no more then 16 char ");
// }
}
}
}
}
/* last name */
if (name === "Last Name") {
if (value.length > 19) {
// condition for more than 19 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter no more than 19 char ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
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 {
if (/^([a-zA-Z]{2,16})+$/.test(value) === true) {
$(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");
} else {
if (/^([a-zA-Z]{1,16})+$/.test(value) === true) {
// condition for less than 2 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter 2 upper case or lower case at least ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
// condition for non a to z
$(this).next().find(".error").html(name + " is Incorrect: Please enter upper case and lower case only ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
//if (value.length > 16) {
// $(this).next().find(".error").html(name + " is Incorrect: Please enter no more then 16 char ");
// }
}
}
}
}
}
/* Phone number */
var inputstr = value;
if (name === "Phone Number") {
if (inputstr.length > 0) {
//var inputstr = $(this).val();
var phoneReg =/\(?([0-9]{4})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/;
if(!phoneReg.test(inputstr) ) {
// email
$(this).next().find(".error").html(name + " is Incorrect: Please enter Phone Number correctly ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name + " is Ok : Your Phone number 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");
//$(this).css("border","2px solid green");
}
} else{
$(this).next().find(".error").html(name+" is EMPTY: Please enter data into this input");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
}
/* email */
//var emailName = (email) => E-mail.split("@")[0];
//console.log("name at E-mai:", name);
//alert(inputattr+inputstr);
/*
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");
}
/* address */
if (name === "Postal Address") {
if (value.length > 0) {
//var value = $(this).val();
// var AddressReg = /^[#.0-9a-zA-Z\s,-]+$/ ;
var AddressReg = /^\d+\s[A-z]+\s[A-z]+/g;
if(!AddressReg.test(value) ) {
// address
$(this).next().find(".error").html(name + " is Incorrect: Please enter Address correctly ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(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");
}
}
}
/* postcode */
if (name === "zip code") {
if (value.length > 0) {
//var inputstr = $(this).val();
//var PostcodeReg = /^[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}+$/g;
var PostcodeReg = /^[a-zA-Z]{1,2}([0-9]{1,2}|[0-9][a-zA-Z])\s*[0-9][a-zA-Z]{2}$/;
if(!PostcodeReg.test(value) ) {
//post-code
$(this).next().find(".error").html(name + " is Incorrect: Please enter Post-code correctly ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(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");
}
}
}
/* city */
if (name === "Your City") {
if ( value === "") {
$(this).next().find(".error").html("Your "+name+" field 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");
} else {
$(this).next().find(".error").html("Your "+name+" field is OK !").removeClass("warning").addClass("ok");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
}
}
/* } */
if (name === "Password") {
var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
if (value.length > 0) {
/*
var inputstr = $(this).val();
var pswstr = $(this).val();
var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
*/
// fake text
//var inputstr = $(this).val();
//var fakeReg = /(.)\1{2,}/;
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 {
//check if password and last-name is the same
if (value === inputs["Your City"].value) {
$(this).next().find(".error").html(name + " is Incorrect: Password shouldn't match city name");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
if (value === inputs["Last Name"].value) {
$(this).next().find(".error").html(name + " is Incorrect: Password shouldn't match last-name ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
//check if password and first-name is the same
if (value === inputs["First Name"].value) {
$(this).next().find(".error").html(name + " is Incorrect: Password shouldn't match fist-name ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
if (!pswReglow.test(value)) {
$(this).next().find(".error").html(name + " is Incorrect: Please enter at lest 6 character ");
$(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 {
if (!pswRegheigh.test(value)) {
// condition to check if length is bigger than 12 char
$(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 no more than 12 character "+inputstr);
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
}
//$(this).next(".fielderror").html(inputattr+" is OK: Your data has been entered correctly "+inputstr);
//$(this).next(".fielderror").addClass('ok').removeClass('warning');
}
}
}
/* */
}
}else{
$(this).next().find(".error").html(inputattr+" is EMPTY: Please enter data into this input");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
}
}
/* retype password */
if (name === "Retype Password") {
if (value.length > 0) {
if (inputstr !== inputs.Password.value) {
$(this).next().find(".error").html(name + " is Incorrect: Password doesn't match retyped pwd ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name+" is OK: Your data has been entered correctly "+inputstr);
$(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");
}
// var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
// var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
}else{
$(this).next().find(".error").html(name+" is EMPTY: Please enter data into this input");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
}
//alert(name);
});
$(".btn1").click(function(){
$(".input-group").each(function(){
var name = $(this).find(".check,textarea").attr("name");
var value = $(this).find(".check").val().trim();
if ( 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);
});
});
</script>