Detected Errors Not Populating in List

This should be pretty novice, but I’m still stumped after working on this for a while. :confounded:

For some reason, this bit of JS is not performing as expected to return errors in the event of an invalid form entry. The structure of this form is strongly similar to the home page form that handles the errors properly. The only thing that’s different is the design.

This is one of the landing pages that contains the form is not handling the errors properly.

To view the form that is not working, one must submit an e-mail address into the first form, #emailbox, at the bottom of the page design. #submissionform will then appear, which is the one that is not listing the errors that are detected. Upon an invalid submission, the error message text is shown (“The following errors were detected…”), but then nothing is shown below it.

This is a snippet from lpemailbox.js:
} else {
/var fragment = document.createDocumentFragment();
$.each(data[‘errors’], function (i, e) {
var item = document.createElement(‘li’);
if (typeof item.textContent === “string”) {
item.textContent = e;
} else {
item.innerText = e;
}
fragment.appendChild(item);
});
$(“#errormessage ul”).empty().append(fragment.childNodes);
/

        $("#errormessage").slideDown(600);
        
        for (var i in data.errors){
            var li = $('<li></li>');
            li.html(data.errors[i]);
            $("ul#errormessage").append(li);
        }
        
        highlightErrors(data.errors);
    }

Well, here’s the whole thing:
// Emailbox and form handler script
$(“#go”).focus(function(){
if ($(“#go”).val() == $(“#go”).prop(‘defaultValue’)){
$(“#go”).val(‘’);
}
});

$("#go").on('focus blur', function(e) {
  var v = $(this).val()
  if (e.type == "focus"){
	v = (v == "your e-mail")? "" : v;
  } else {
	v = (v == "")? "your e-mail" : v;
  }
  $(this).val(v);
});

function highlightErrors(errors) {
	if (errors.indexOf("E-mail addresses don't match.") != -1) {
		$("input#confirmemail").addClass("errorfield").click(function() {
			$(this).removeClass("errorfield");
			$("#errormessage").slideUp(800, function() {
				$("#errormessage ul").empty();
			});
		});
	}
	
	if (errors.indexOf("No name entered.") != -1) {
		$("input#name").addClass("errorfield").click(function() {
			$(this).removeClass("errorfield");
			$("#errormessage").slideUp(800, function() {
				$("#errormessage ul").empty();
			});
		});
	}
	
	if (errors.indexOf("Name can only have letters.") != -1) {
		$("input#name").addClass("errorfield").click(function () {
			$(this).removeClass("errorfield");
			$("#errormessage").slideUp(800, function() {
				$("#errormessage ul").empty();
			});
		});
	}
	
	if (errors.indexOf("No location selected.") != -1) {
		$("#country").addClass("errorfield").click(function () {
			$(this).removeClass("errorfield");
			$("#errormessage").slideUp(800, function() {
				$("#errormessage ul").empty();
			});
		});
	}
	
	if (errors.indexOf("Math answer incorrect.") != -1) {
		$("input#addition").addClass("errorfield").click(function () {
			$(this).removeClass("errorfield");
			$("#errormessage").slideUp(800, function() {
				$("#errormessage ul").empty();
			});
		});
	}
}
  
  //this is the function called by the success value of the first .ajax() call
  function testFirstResults(response){
    if (response.indexOf("Submission Successful") != -1){
	  $("#blackoverlay, #submissionform").fadeIn(400);
    } else if (response.indexOf("Invalid E-mail") != -1){
	  $("#invalidemail").fadeIn(1200).delay(1700).fadeOut(1800);
	}
  }
  
  function testSecondResults(data){
	if (data['validation'] == "pass"){
		$("#submissionform").css("display", "none");
		$("#person").append(data['name']);
		$("#email").append(data['email']);
		$("#successfulsubmit").css("display", "block");
		$("#blackoverlay, #successfulsubmit").delay(5600).fadeOut(800);
		setTimeout(function(){
		  $(".exit").delay(2800).append("Click to Exit");
	      $("#blackoverlay, #successfulsubmit").click(function(e){
		  $("#blackoverlay, #successfulsubmit").remove();
	    });
	    }, 2800);
		$("#emailbox input").each(function(){
            $(this).prop("disabled", "disabled");
        });
		$("#emailbox :submit").val('Thanks!');
	} else {
		/*var fragment = document.createDocumentFragment();
		$.each(data['errors'], function (i, e) {
			var item = document.createElement('li');
			if (typeof item.textContent === "string") {
				item.textContent = e;
			} else {
				item.innerText = e;
			}
			fragment.appendChild(item);
		});
		$("#errormessage ul").empty().append(fragment.childNodes);*/
		
		$("#errormessage").slideDown(600);
		$("#errormessage").css("display", "table");
		
		for (var i in data.errors){
			var li = $('<li></li>');
			li.html(data.errors[i]);
			$("ul#errormessage").append(li);
		}
		
		highlightErrors(data.errors);
	}
}
  
  var mathAnswer = 0;
  var startTime = 0;
  var endTime = 0;
  var submissionTime;
  
  function generateEquation(){
  	var num1 = Math.floor(Math.random() * 5) + 1;
	var num2 = Math.floor(Math.random() * 5) + 1;
	mathAnswer = num1 + num2;
	$("#math").append("What is " + num1 + " + " + num2 + "?");
  }
  
  $(document).ready(function(){
	  
	generateEquation();
	
    $("#emailbox").submit(function(e){
	  startTime = jQuery.now();
	  var email = $("#go").val();
      e.preventDefault();
      $.ajax({
        type: $(this).attr('method'),
        dataType: 'html',
        cache: false,
        url: "../Scripts/emailtester.php",
        data: {email:email},
        success: function(data){
          testFirstResults(data);
		}
      });
    });
	
	$("#submissionform").submit(function(e){
		var origEmail = $("#go").val();
		var confirmEmail = $("#confirmemail").val();
		var name = $("#name").val();
		var age = $("#age").val();
		var gender = $("#gender").val();
		var country = $("#country").val();
		var catcher = $("#aicatcher").val();
		var addition = $("#addition").val();
		endTime = jQuery.now();
		submissionTime = endTime - startTime;
		
		e.preventDefault();
	
		$.ajax({
		  type: "POST",
		  dataType: 'json',
		  cache: false,
		  url: "../Scripts/confirmform.php",
		  data: { 
			  origEmail: origEmail,
			  confirmEmail: confirmEmail,
			  name: name,
			  age: age,
			  gender: gender,
			  country: country,
			  catcher: catcher,
			  addition: addition,
			  mathAnswer: mathAnswer,
			  submissionTime: submissionTime 
		  },
		  success: function(data) {
			testSecondResults(data);
		  }
		});
	});
	
	$("#cancel").click(function(){
		$("#blackoverlay").fadeOut(300);
		$("#errormessage ul").css("display", "none").empty();
		$("#submissionform").fadeOut(300);
		$("#go").val("your e-mail");
		$("input").removeClass("errorfield");
		$("select").removeClass("errorfield");
		$("#math").empty();
		generateEquation();
	});
  });

The PHP seems to be working just fine as the erroneous fields are highlighted. It’s obviously able to detect the errors, but the JS I have is not displaying a message to the user.

Hopefully this is a quick one. :cookie:

Happy holidays to all, and I’m very thankful for the opportunity to post in the Sitepoint community.

-Tyler :guitar:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.