Validation on the Form

[fredrm]

Hi Folks!

How can I Validate a form on the client-side?

But i need to validate something like date, it have to be true.

thnx!

[405hp]

2 ways - there is a validate component or just use a js event and check the things you need with js.

[Dennis445]

I'm working through that myself.

The first part checks for text.

The second part checks for the @ symbol.

this will also color the box red if there is a problem or to let you know this field needs input and green to let you know its correct.

I have this on the onBlur javascript event. I hope this helps.

if (document.getElementById("email").value == "" || document.getElementById("email").value == "Required!") {
findObj('email').style.backgroundColor= '#ffcaca';
document.getElementById("email").value = "Required!"
}
else if (document.getElementById("email").value.indexOf ('@', 0) == -1) {
findObj('email').style.backgroundColor= '#ffcaca';
document.getElementById("email").value = "Not valid!"
}
else {
findObj('email').style.backgroundColor= '#d0ffca';

[405hp]

That is fine Dennis, but you should also stop them from posting which you don't with the blur.

What I do is verify in the post buttons jsonclick event and by returning false the button will not post to the server.

var sendto=vcl.$('Edit5').value;
if ((sendto != null) && (sendto != ""))
  {
  emailRe = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2}|(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$/;
  if (!emailRe.test(sendto.toLowerCase()))
      {
      alert(sendto + ' is an invalid email.');
      return false;
      }
  }
  else
  {
  alert('Email is required');
  return false;
  }

[Dennis445]

Thanks for that formula I will try it out.

I was going to check the form with an on click event on the server side (PHP)what I am doing right now is very much a work in progress I am still trying to get to grips with (PHP, JavaScript, XML, CSS) and how they all work together.

The onblur event is really for the user not for error checking, kind of a visual feed back. This will all be setup as a function soon.

[405hp]

alerts are better... what do you do with a colorblind user?

[Dennis445]

Good point.

[405hp]

and how they all work together

They don't

They all work on their own and you will need to pass everything you need back and forth.