Need help with survey form

JavaScript
1

Hi All,

Hope ya’ll doing great today.

Can you help me with getting the validation message right for me survey form?

https://romson.github.io/Art-Gallery-survey-form/

I have added this line in the JS validateForm() function:

document.getElementById(“error”).innerHTML = “Input required”;

If i remove the standard required attribute from the HTML input element, it freezes the whole form. How do i fix this to only display the error message with ID=“error” ?

Code can be found here: https://github.com/Romson/Art-Gallery-survey-form/blob/master/script.js

Thanks Ya’ll for helping.

2

Hello Romero,

You may please give more explanation dear?

This could be great if you could give a version of your code think has error using codepen.

Also please specify what does cause the error, and caused by what action? and what do you expect instead(right move).

Thank you so much.

3

Hey Null_dev,

Thanks for replying.

JS code can be found here:

I basically would like to have the standard validation error not to show. Instead it should show the error message lined out in the JS file on line 54, placed inside the validateForm() function.

Any ideas?

4

Yes I understand, but I cannot understand the freez part you mentioned

You may please explain the freez?!

Please note once you set the value for that error tag, you will never hide or clear it when user added data correctly(no error).

You keep the validity of the form using valid variable, before you return from validate form function, check if form is valid, then hide the error message(or clear it)

5

Sorry man, English is not my first language, lol not even my second or third :smile:

What i meant is that it does not show the error i would like (on line 54 in JS file). Also the highlighted input fields (if input == “”) are not showing anymore after removing that line. It flickers on/off for a m/s and does not show any error message at all. I have now left the required lines to stay in the element because it also throws another error upon testing with:

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

6

You keep the validity of the form using valid variable, before you return from validate form function, check if form is valid, then hide the error message(or clear it)

I think it should have another else if statement there to check but can’t seem to work around the existing lines:

for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      //display error message
      document.getElementById("error").innerHTML = "Input required";
      // and set the current valid status to false:
      valid = false;
    }
  }

Any ideas?

7

I notice that you have put a div with id=“error” below each of your form input elements. I think you mean to use class=“error”. id is meant to be used on only one unique element whereas class is meant to identify one or more similar elements.

1 Like
8

Nice, thanks man. I have now added:

document.getElementsByClassName(“error”).innerHTML = “Input required”;

It does now show the error message “Input required”. Any ideas?

9

It works for me comrade, check:
image
Did you mean this red color error? so it’s working.

11

I have now changed the

<div id="error"></div> to <div class="error"></div>

and now it shows only the standard validation error message: “Please fill out this field” smh…

12

Thank for replying Randell.

As stated above by alhazen1:

id is meant to be used on only one unique element

So now have changed it to a class and added this in JS file (without luck smh):

document.getElementsByClassName("error").innerHTML = "Input required";

13

Too late now but in the future this would have been much easier to diagnose from a codepen

14

Probably not the cleanest way to traverse DOM but it works. You might work out something simpler.

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  //y = x[currentTab].getElementsByTagName("input");
  y = x[currentTab].querySelectorAll("input[required]")
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    let output = '';  //default

    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";  

      //display error message
      output = "Input required" 

      // and set the current valid status to false:
      valid = false;
    }

    // after checking for empty update error div
    let target = y[i].parentNode.getElementsByClassName("error")[0];
    target.innerHTML = output;
    console.log("hit target")

  }

  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

You still have issues with that error field expanding and collapsing so your form jumps some. You might do better to change visibility:hidden with a className change instead of changing innerHTML

1 Like