Contact-page - #9
Conversation
Hi team, Sorry for the delay. I finally finished the HTML, CSS, and Javascript files for the contact-page. However, I notice the form validation is not working correctly. I've been trying to troubleshoot, but not much luck there. I figure maybe you can help me here; please feel free to share your comments. Thank you in advance. May
zsoltime
left a comment
zsoltime
left a comment
There was a problem hiding this comment.
Wow, it's definitely longer than I thought. 63 messages 😄 If you have any questions, feel free to ask.
| text = "Please Enter A Valid First Name"; | ||
| errorText.innerHTML = text; | ||
| firstName.focus(); | ||
| return false; |
There was a problem hiding this comment.
Do you want to stop validating if the first field is invalid? You should always check everything on submit and display every error, so users can correct them before they click on submit again.
| firstName.focus(); | ||
| return false; | ||
| } else { | ||
| return true; |
There was a problem hiding this comment.
If the firstname field is valid, the function will stop here with this return and nothing else will be executed.
| function emailValidate(email) { | ||
| var atpos = email.indexOf("@"); | ||
| var dotpos = email.lastIndexOf("."); | ||
| if (email.value == "" || atpos < 1 || (dotpos - atpos < 2)) { | ||
| email.style.border = "1px solid red"; | ||
| text = "Please Enter A Valid Email Address Using The Example Format"; | ||
| errorText.innerHTML = text; | ||
| email.focus(); | ||
| return false; | ||
| } else { | ||
| return true; | ||
| } | ||
| } |
There was a problem hiding this comment.
Same as above. And... Why is this function inside validateForm?
| } | ||
| } | ||
|
|
||
| if (message.value == "" || message.length < 140) { |
There was a problem hiding this comment.
This minimum length is also bad UX.
| function clickSubmitButton() { | ||
| var thankYou = "Thanks for your message, we will be in touch soon. "; | ||
| document.getElementById("submit-btn").innerHTML = showThankYouMsg(thankYou); | ||
| } |
There was a problem hiding this comment.
As I mentioned above, you don't need a different click listener. It doesn't matter if someone clicks the button, hits enter in a field, etc. And you should not add a thank you message inside the button. It should have a separate div somewhere below/above the form.
3 participants
Hi team,
Sorry for the delay.
I finally finished the HTML, CSS, and Javascript files for the contact-page. However, I notice the form validation is not working correctly. I've been trying to troubleshoot, but not much luck there. I figure maybe you can help me here; please feel free to share your comments.
Thank you in advance.
May