How JustAnswer Works:
  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.
Ask Steve Your Own Question
Steve
Steve, Consultant
Category: Programming
Satisfied Customers: 289
Experience:  Steve is a consultant in the areas of computer software and programming, information management and networking.
47680681
Type Your Programming Question Here...
Steve is online now

I have a problem with displaying error messages with my

Resolved Question:

Hello,
I have a problem with displaying error messages with my javaScript code. After I press the button submit on my html form the error messages display but disappear rapidly within a section.
Many thanks,
Samia
Submitted: 11 months ago.
Category: Programming
Expert:  Steve replied 11 months ago.

Hi Samia, my name is***** you post the HTML and/or JavaScript files here for me to look at? Do you know what the error message says? Which browser are you using the debug your JavaScript program? if you can get me that information, I can help you figure out what's going on and I can give you some tips for how to easily find more information if something like this happens again.

Customer: replied 11 months ago.
Nice to hear from you Steve. I've debugged my JavaScript program and there's no error message. The error messages are not actual error messages. They're message I'm trying to display to my user. For example if my user doesn't enter a name in the html form I want to display "Please enter name" beside it. My code does display this message beside but only for a split second after the user submits the form.I've attached my html form and javaScript code.
Expert:  Steve replied 11 months ago.

Hi Samia.

(1) You need to return false from checkForm() if there's an error on the form. Otherwise the data gets posted and the page reloads and you start over from scratch. For example:

function checkForm(){

var noErrors = true;
document.getElementById("signup").onsubmit = function() {
for (var i=1; i<=4; i++) {
if(document.getElementById("txt"+i).value===""){
showError(i);

noErrors = false;
}
}

return noErrors;
}
}

(2) Also, you can really simplify the showError function if you want with something like this:

function showError(num) {
var field = ["name", "last name", "health number", "email"];
var id="err"+num;
var error = "Please enter " + field[num-1];
document.getElementById(id).innerHTML = error;
}

(3) FYI, you're not checking to see if the phone number if empty, but that's probably by design.

Chat me back if any of this doesn't work and we'll get it running very quickly.

If I've helped you solve your issue, can you please accept my answer and rate me accordingly? I don't get paid anything for helping you unless you accept my answer and rate me at least 3 stars. Thanks!

Customer: replied 11 months ago.
Thank you it worked but I tried your method for another function to validate email and now whenever the message invalid is email displayed by the field email. The message is only displayed for a spilt second.Many thanks,Samiafunction checkForm(){var noErrors = true;
document.getElementById("signup").onsubmit = function() {
for (var i=1; i<=4; i++) {
if(document.getElementById("txt"+i).value===""){
showError(i);
noErrors = false;
}}
if (noErrors==true){
validateEmail();
}return noErrors;
}
}function showError(num) {
var field = ["name", "last name", "health number", "email"];
var id="err"+num;
var error = "Please enter " + field[num-1];
document.getElementById(id).innerHTML = error;
}window.onload=checkForm;function validateEmail(){
var valid=true;
var email = document.getElementById('txt4');
//Regular Expression for checking email
var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
if (!emailRegEx.test(email.value)) {
valid=false;
}if (valid==false){
document.getElementById("err4").innerHTML = "Email invalid ";
}
return valid;
}
Expert:  Steve replied 11 months ago.

You're welcome. Can you please accept my answer and rate me? Otherwise they don't pay me anything for helping you. thanks!

Steve and other Programming Specialists are ready to help you
Expert:  Steve replied 11 months ago.

You can only return a value from one function that's true or false. So do something like this:

function checkForm(){

var noErrors = true;
document.getElementById("signup").onsubmit = function() {
for (var i=1; i<=4; i++) {
var value = document.getElementById("txt"+i).value;
if (value == "") {
showError(i);
noErrors = false;
}
if (i == 4) {
var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;
if (!emailRegEx.test(value)) {
showError(i);
noErrors = false;
}
}
}
});
}

And change the message in showError to "Please enter a valid " + field[num-1];

That message will apply equally to a blank or malformed email address.

Expert:  Steve replied 11 months ago.

Hey Samia,

You should probably clear out the error messages at the start of every check so you don't leave one lingering that doesn't really apply. For example:

function checkForm() {

for (var i=1; i<=4; i++) {

var id = "err" + num;

document.getElementById("err"+num).innerHTML = " ";

}

You need to write out spaces so the spaces write over an error message when it's not an error anymore.

then the rest of the function

Expert:  Steve replied 11 months ago.

When I posted this, the system changed what I put in because it eliminated all the spaces which is crticial! It should read:

<code>

document.getElementById("err" + num).innerHTML = " ";

</code>

Expert:  Steve replied 11 months ago.

Nope, it's still doing it. So inside the quotes, put enough spaces for it to overwrite the error message on a line

Customer: replied 11 months ago.
Thanks very much for your help but i'm afraid you have lost me. Is there any chance you can fix the latest code I sent to you for me...
Expert:  Steve replied 11 months ago.

Yes, and I'll send you a link to a file that's formatted because you lose all the formatting on here.

Send me the code here one more time and I'll go from that copy?

Customer: replied 11 months ago.
Many thanks
Expert:  Steve replied 11 months ago.

Here you go, sorry for the delay. You can download from this link:

https://www.dropbox.com/s/dsdnudsgclt6nw0/newcontactform.zip?dl=0

Customer: replied 11 months ago.
No worries. Thank you I much appreciate your help. I've learnt some new programming techniques from your solution.Have a good day,Samia

Related Programming Questions