Problem with validation in registration form

JavaScript
,
1

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>
1 Like
2

Please give us a link to the HTML code that is used with this JavaScript code. A link to the codePen page that you mentioned would do nicely.

2 Likes
3

I think some re-factoring is needed in that code, there is a lot of repetition and in-turn a lot more chance of errors and a lot more code to sift through. Breaking it down into smaller functions might be the way forward and easier to debug/maintain.

With regards the regular expressions, you can implement those in the form of a pattern in your HTML

e.g.

<!-- Only match letters, apostraphe and a dash  -->
    <input type='text' name='name' id='name' pattern="[a-zA-Z'-]+">

I only learnt this recently, but the input element has a validity property which has a read-only property ‘valid’ e.g. validity.valid

MDN - ValidityState

The read-only property matches against the pattern you specify in your HTML.

A simple test and example

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Form Test</title>
</head>
<body>
  <form id='test-form' action=''>
    <label for='name'>Name:</label>
    <!-- Only match letters, apostraphe and a dash  -->
    <input type='text' name='name' id='name' pattern="[a-zA-Z'-]+">
    <button type='submit'>Submit</button>
  </form>
<script>
  document.addEventListener('DOMContentLoaded', function(event) {
    const testForm = document.querySelector('#test-form')

    const formHandler = function(event) {
      event.preventDefault()

      const elem = event.target

      if (elem.nodeName && elem.nodeName === 'INPUT') {
        console.log(elem.validity.valid) // does it match 'pattern'
      }
    }

    testForm.addEventListener('keyup', formHandler, false)
  })
</script>
</body>
</html>

Might be helpful?

1 Like
4

thank you for help. I am sorry, I tried to reproduce the last working link from sitepoint from memory but I need to learn it, I couldn’t the last working example, so I did my best , still not good enough.
registration2

5

to be honest it is a bit advanced. what I don’t understand, I have an other form where I don’t have this problem : email disables first and last name field. it is a nonsense. I can handle jquery but I am at very beginning of javascript. thank you.
and a bit of success: I managed to ad correctly the functional parts of the registration form so investigation can be done easier.
registration2
pleasehave a look, email disables first and last name it is nonsense. thank you…

6

How does this page differ from the one we set up in the other thread and which was working?

Let me get this straight.

The JS you just posted is working apart from the email field?

When you uncomment the email field js the form stops working?

How is that when I uncomment your email field all three fields are working?

Screen Shot 2020-08-16 at 13.59.09
Screen Shot 2020-08-16 at 13.59.091151×258 16.8 KB

The fields may not be doing what you expect but they are basically working. I’ve no idea what you were doing with things like this but I guess its something you were working on previously.

if (emailName === "Last Name") {

Why would someone enter the text ‘Last Name’ as an email address?

(Also note that you should have posted the code you were having trouble with rather than some other code that is not the code you are having trouble with. I’m guessing you just missed out a comment somewhere.)

In the html why does the first and last name fields have a ‘type’ attribute of ‘email’ instead of ‘text’ yet your email field has a `type="text’`` attribute ?

7

the problem is the following: If the email is commented out first name and last name is working : number is filtered , fake text is filtered, min length and max length is working. if email is active, comment removed, first and last name filtering are not doing anything. I don’t understand. the rest of fields looks working. also filtering out first and last name from emails name part is not working, not filtering. filtering out first and last name is good thing for safety. thank you,

8

Did you test the codepen I forked?

What is not working in the codepen I forked?

9

If I understand you properly, commenting out the email section at HTML lines 134-152 from https://codepen.io/cfrank2000/pen/OJNNowR results in the other fields not working.

That cannot be investigated right now because the JS code must first be working before the HTML code is commented out. Currently the JS code has an unrecoverable error that needs to be fixed first.

The browser console says that the }); section is causing the problem. You have a structural problem, and your indenting is a complete mess, so you need to clean up your JS code.

Using the beautifier.io site to clean up the formatting of your code, we can see at the end of the code that the indenting hasn’t occurred. That’s because you have too many set of closing tags.

$(".btn1").click(function() {
$(".input-group").each(function() {
    ...
});
});
});

After removing one of those sets of closing tags, beautifying the code again results in a correct amount of indenting for all of the code.

Please do that, and update codePen with the fixed JS code, and we can make further progress from there.

If any of this is confusing for you, please don’t hesitate to let us know what you’re having trouble with. We’ll try to explain it more clearly and in more detail.

3 Likes
10

the first set of closing brackets is for document ready on the beginning of js, the second is for click, third is for each function.
yes email part causing other field not validating but the js part, not the html one. I try to sort out indentation for readability. thank you

11

If it’s intended to close document.ready, then a mistake has definitely occurred because line 341 of the JS code instead closes the document document.ready.

Please put the JS code through beautifier.io and double-check me about that. You have an extra set of closing tags somewhere causing the error. When the extra set of closing tags have been removed, all of the code can then be properly indented.

1 Like
12

I’ve got the following error, I don’t understand

Application Error.

CODE: 200

One of the URLs in your External Resources is in an invalid format. Use the format https://domain/path.js

I copy and pasted

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
13

How can I investigate that? Please supply a link to the code that produces that error.

14

Ive done the beautifier end placed them in regtration2 pen. adding css and jquery , Ive got the shown error I don’t understand. I’ll give the code too.

 $('.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");
                        }
                    }
                }
});

I needed to down size the code because of length problem.

15

Okay, you are refusing to supply a link to code that has the problem, so I’ll try and make sense of what you posted instead.

When I put that code through Beautifier, you no longer have too many closing tags.
Instead, you have too few!

1 Like
16

My new code is#
registration2
html , css, js was in beautifier.
the posted code is not full but a shortened version, the full code was longer then 32000 character, sorry.

17

Thank you. There is an error with the trim method that occurs, when you submit a form.
Uncaught TypeError: Cannot read property 'trim' of undefined

Here is the code that causes the problem, on JS line 1324:

                $(".input-group")
                    .each(function () {
                        var name = $(this)
                            .find(".check,textarea")
                            .attr("name");
                        var value = $(this)
                            .find(".check")
                            .val()
                            .trim();

Why does that problem occur? We can console.log the this keyword, to find out.

Line 342 is the input-group that causes the problem:

<div class="input-group">
  <label class="container"> Phone
    <input type="checkbox" checked="checked">
    <span class="checkmark"></span>
  </label>

  <label class="container"> E-mail
    <input type="checkbox">
    <span class="checkmark"></span>
  </label>

  <label class="container"> Post
    <input type="checkbox">
    <span class="checkmark"></span>
  </label>
</div>

Those are the sections of code that are responsible for the trim error.

I recommend an early return from the function when ".check" cannot be found.

18

I don’t understand, it should work.
this is what I that I tried:

 $(".btn1").click(function () {
console.log(' $(this)
                            .find(".check,textarea")
                            .attr("name")');
                $(".input-group")
                    .each(function () { ...}
19

this is the print screen

Screenshot (2)
Screenshot (2)1366×768 153 KB

pressing submit, this is the result what the screenshoot shoves.
can you help me with ‘early return’? I not realy understand it.

20

Why would it work when there is no ".check" element to be found? When no element is found, there is no trim method, and error occurs.

When I speak of an early return, you might have also heard of it as a guard clause

That is where you use an if statement to check if something doesn’t exist. If it doesn’t, there’s no good reason to continue so you return out of the function.

1 Like