HEADER

Hi,

Caution: I'm no JavaScript expert so there may be errors in this post. If you find any let me know and I'll fix them.

ChronoForms makes it easy to include validation JavaScript with your form but there are some problems in using JavaScript from other sources or existing forms.

Mostly there are two problems:

• ChronoForms changes the form name and the JavaScript doesn't recognise it.
• How to call the JavaScript validation - what code to put where.

I'll describe here a basic method that should fix most of these problems. There are other methods that may work as well or better for you.

The form name

ChronoForms changes the form name you use in the Form Manager. If you enter 'my_form' the ChronoForms form will be called 'ChronoContact_my_form'. This is probably the biggest cause of JavaScript validation problems.

Validation scripts usually start with a line like 'function checkForm()' or 'function checkForm(form)' and these two handle the form name in different ways.

Style 1: 'function checkForm()'

The form is usually addressed with the code 'document.{form_name}' e.g. 'document.my_form'

To use this style with ChronoForms you would need to find and replace each 'document.my_form' with 'document.ChronoContact_my_form'. This is tedious and has to be repeated if you want to use the same validation with another form.

Instead I suggest that you change your JavaScript to the second style of function.

Style 2: 'function checkForm(form)'

This style of function uses the JavaScript variable 'form' to identify the form and the actual form name is passed to the function when it is called.

If your JavaScript has the other style, then change the function header to the 'checkForm(form)' style and replace every occurrence of 'document.{form_name}' with 'form' so that 'document.my_form.some_code' becomes 'form.some_code' etc.

Calling the JavaScript

Once you have edited the JavaScript to use the 'checkForm(form)' you can call it simply by adding this code into the ChronoForms 'Form tag attachment' field:

Code:

onSubmit="return checkForm(this)"

Using 'this' here will mean that the correct form name is automatically passed to the JavaScript. The 'return' means that the form will only be submitted if the JavaScript validation returns 'true' - this is how validation scripts are usually written so is unlikely to be a problem. Here is a very simple example of a validation script written like this, it simply validates that the form field 'name' is not empty :

Code:

function checkForm(form) { if(form.name.value == "") { alert("Please enter your name!"); return false; } return true; }

Bob<br><br>Post edited by: GreyHead, at: 2007/07/20 11:34

Here is my JS code:
Some text is on Croatian
but if I catch some time I'll translate it!

Code:

function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) {alert(alerttxt);return false} } } function checkForm(form) { /* IME */ if(form.name.value == "") { alert("Niste unjeli ime!"); return false; } /* PREZIME */ if(form.subname.value == "") { alert("Niste unjeli prezime!"); return false; } /* MAIL */ with (form) { if (validate_email(email,"Niste unjeli ispravnu mail adresu!")==false) {email.focus();return false} } /* TELEFON */ if(form.tel.value == "") { alert("Niste unjeli broj telefona!"); return false; } /* ADRESA */ if(form.adresa.value == "") { alert("Niste unjeli adresu!"); return false; } /* KUĆNI BROJ */ if(form.kbroj.value == "") { alert("Niste unjeli kućni broj!"); return false; } /* POŠTANSKI BROJ */ if(form.posta.value == "") { alert("Niste unjeli poštanski broj!"); return false; } /* GRAD */ if(form.grad.value == "") { alert("Niste unjeli grad!"); return false; } /* ŽUPANIJA */ if(form.zupanija.value == "21") { alert("Niste izabrali županiju!"); return false; } /* Ovo se izvršava nakon svih provjera! */ return true; }

hi goranbaxy,

do you put the checkform(this) in the right field in Chronoforms? is your form online somewhere ?

Max<br><br>Post edited by: admin, at: 2007/10/26 15:02

In &quot;Form tag attachment:&quot; I have: &quot;enctype='multipart/form-data' onSubmit=&quot;return checkForm(this)&quot;&quot;
everthing is working but it's still not online as it needs some design.
I have put the the html + js code in &quot; Share your forms with others&quot;

Conversation moved here :<br><br>Post edited by: GreyHead, at: 2007/11/06 15:58

On the validating a form thread, can I just press the validate at the bottom of the live form which redirects to a website which shows all line errors, then the choice to use html tidy to fix. This usually helps when using an alternate editor like Dreamweaver. I think I still then have to take out some of the head tags and form tags. Does anyone else do this?