Form validation, javascript and CSS styling

HTML-CSS
1

I am struggling with how to display error messages underneath form elements. I have a simple HTML, CSS form and form validation using javascript.

I have written some js to generate an error msg if the user doesnt enter text which seems to work ok. However i need to be able to display each error message under each form field and style it. Anyone who can help with this would be great. Its my first time trying to incorporate js into a web page. Here is my repo.

2

Hey @gemma2301, every input in your form has to be an object with validate() method, which is going to trigger message() method in no-valid case. Then on submit you would run validate() for each input and if every() respond with true - proceed :wink:

3

Thanks for your response. Can you show an example? or a link to one?

5

Ok so he hasnt actually aswered the question I believe. The problem is the positioning of the text not the validation. I have not used the validation method he has suggested but there is nothing wrong with my approach i believe. Also I would like to know what is the problem is with asking for an example? It is a learning platform after all.

7

As per the original message, I am struggling to display form validation error messages underneath form elements. A simple and common task. I just havent done it before hence i asked for help. I can provide a code example.

8

But i already posted a link to the repo…

9

Hey @gemma2301, the problem with your code that you have one array of messages and if you want to display each message under corresponding input field that’s obviously not enough. Conceptually, error message should be a matter of input rather than parent form (even though some people might disagree).
Plus, pushing message looks like unnecessary step to me, you can just display message on that step.

So, example:

function appendMsg(element, msg) {
  const parent = element.parentElement;
  
  const p = document.createElement('p');
  p.classList.add('input-msg');
  p.textContent = msg;

  parent.appendChild(p);
  return true;
}

function removeMsg(element) {
  const parent = element.parentElement;
  const msg = element.closest('.input-msg');
  if (msg.parentElement !== parent) return false;
  
  parent.removeChild(msg);
  return true;
}

...

if (firstname.value === '' || firstname.value == null) {
  appendMsg(firstname, 'Firstname cannot be empty');
}
1 Like
10

thats helpful. That makes sense that is a different approach than i had thought. I will have a go at implementing this.

11

@gemma2301 I think your js solution is fine. I think what you need is to add in the identifier like this in the js file.

const firstErr = document.querySelector('#first__err')

and this in the html file
<p class="err-msg" id="first__err">First Name cannot be empty</p>

that will allow you to style and position it.

1 Like
12

yes this answers my actual question!! thanks for reading and responding.

Pro. :slight_smile:

13

no worries, I find reading the question helps answer it. First rule of learning to code surely :grin: