Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times

    Exclamation Detected Form Input Errors Not Populating in List

    Hello all,

    I have no idea why this isn't working after implementing the responsive design. It's not drastically different

    For some reason, this bit of JS is not performing as expected to return errors in the event of an invalid form entry on #submissionform.
    What is intended is that the invalid form errors that are caught by the PHP script (100% working) are returned to the JS which need to be populated into a <ul> tag inside of #errormessage (a div at line 230 in the HTML).
    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 on the landing pages, which is the subject of this question. The form is the e-mail submission at the bottom of the page.
    This is a screenshot of where the list is supposed to appear when it is working. Currently, the only thing displayed on the invalid submission is the top line that says "The following errors occurred with your submission." It highlights the correct fields, so I know the PHP is performing as necessary.

    The script in question (lpemailbox.js beginning at line 92):
    Code:
                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);
    This is the JS segment that performs successfully on the homepage (doesn't work on the landing pages):

    Code:
                for (var i in data.errors){
                    var li = $('<li></li>');
                    li.html(data.errors[i]);
                    $("ul#errormessage").append(li);
                }
    Is this enough info to target the issue, or do you need me to post the full HTML/JS scripts?

    Hopefully, this is a simple solution. Everything else on the form is working nicely.

    Thanks,
    Tyler

  2.  

  3. #2
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    I see nothing much has changed around here. I'll figure it out myself. See you later. No reason to post on these stupid forums anymore.

  4. #3
    Junior Member
    Join Date
    Mar 2016
    Location
    Chicago, IL
    Posts
    24
    Member #
    53671
    Liked
    8 times
    I could be much easier to create the whole HTML structure for displaying the error message and assigning it to the innerHTML property of a <div> instead of inserting single tags into the DOM.

    Example in pure JavaScript:

    document.getElementById('id').innerHTML = '<ul><li>My error message</li><li>Another error mesage.</li></ul>';


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 08:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com