Facing issue in email and password textbox length format while using add event listener

I have been using add event listener function in the login form and suppose to add the following functionality :

  • Put a relevant event using addEventListener.
  • Now write a function that’d be called on that event
  • Check that whether values of both email and password fields are empty or not using the same function
  • If any of the fields is empty, ask use to fill up the fields
  • If both are filled, show an alert saying ‘Logged In Successfully’.
  • Also, check for format of email in the first input field and ensure that password field’s length is not less than 8 character.
    Here’s my code according to the above instructions . please help me to debug it… JavaScript-Problem-Solving-Practice/Event-Listener-Form at main · naima-shk/JavaScript-Problem-Solving-Practice · GitHub

Some thoughts:

  • you’re calling alert('form submitted') on page load, I guess you’d only want to show that alert when the form was actually submitted
  • you’re also reading the values of the email and password inputs on page load. At that point, both are empty strings, so you’d usually assign those variables within your submit handler function
  • you’re not checking whether the password is empty
  • you’re not checking if the email is valid, you’d need a regex for that (although in most cases, you wouldn’t write your own function for that but instead declare the input field as type="email". That way, the browser will handle validation and will prevent that the form is submitted if a non-valid email address is entered)
  • I’d declare the password input with type="password" to avoid having it printed in plain text on the screen
  • I’d get rid of the alerts “email is valid” and “password is valid”

No idea if that solves any of your problems, can you be more specific about what exactly you’re having troubles with?

@jsdisco thank you But have you checked my code’s logic?

Yes, I’ve pointed out in the above post at which points your logic fails. Again, you’d have to ask more specific questions if you want a more specific answer.

@jsdisco Alright. I get your point and used Regex but it’s still not working.
Here is my updated code JavaScript-Problem-Solving-Practice/Event-Listener-Form at main · naima-shk/JavaScript-Problem-Solving-Practice · GitHub

You’re not using the regex correctly in your if-statement, right now you have:

if (regex)

This will always evaluate to true, you need another method .test to test your input values, for example:

if (regex.test(email))

That solves the validity check. To completely meet that list of requirements, I’d also check if the user has entered anything at all into an input field, and then give a different feedback (“Please enter a password” vs “The password you entered is invalid”).