I am not a javascript expert in anyway, but I have found it to be very easy to add cool javascript validation to your forms using "real easy validation". This is how I have done it - if it doesn't work for you - sorry, can try to help but best bet would be to go to the real easy validation www site below [list=1] first down load and install the following on your servera) download the scriptaculous library (for effects) from http://script.aculo.usb) download prototype (make sure you get a version which works with the scriptaculous you downloaded above) from http://www.prototypejs.orgc) download validation.js from http://www.tetlaw.id.au/view/javascript/really-easy-field-validationthen make the following HACKS!!! to chronocontact.html.phpa) add the following just above the form opening tag b) add an id attribute to form tag name; ?>" id="name; ?>" enctype="multipart/form-data" method="formmethod; ?>" action="" attformtag; ?>> c) add the following just after the form closing tag function formCallback(result, form) { window.status = "valiation callback for form '" + form.id + "': result = " + result; } var valid = new Validation('name; ?>', {immediate : true, onFormValidate : formCallback}); then in your forms follow the instructions to add class="required" as needed. For example: Registration I agree to the above terms of usage: I don't agree. I agree. Your name : (Required) Your Institution: (Required) Your email address: (Required) Should look like this[/list:o] Post edited by: bouton, at: 2007/08/02 16:00 Post edited by: bouton, at: 2007/08/02 16:01 Post edited by: bouton, at: 2007/08/02 16:02 Post edited by: bouton, at: 2007/08/02 16:04 Post edited by: bouton, at: 2007/08/02 16:37Post edited by: bouton, at: 2007/08/02 16:39

Real Easy Validation - Hack

bo

bouton 02 Aug, 2007

I am not a javascript expert in anyway, but I have found it to be very easy to add cool javascript validation to your forms using "real easy validation". This is how I have done it - if it doesn't work for you - sorry, can try to help but best bet would be to go to the real easy validation www site below
[list=1]

first down load and install the following on your server
a) download the scriptaculous library (for effects) from http://script.aculo.us
b) download prototype (make sure you get a version which works with the scriptaculous you downloaded above) from http://www.prototypejs.org
c) download validation.js from http://www.tetlaw.id.au/view/javascript/really-easy-field-validation

then make the following HACKS!!! to chronocontact.html.php

a) add the following just above the form opening tag

<script src="/your/path/to/prototype.js" type="text/javascript"></script>
<script src="/your/path/to/effects.js" type="text/javascript"></script>
<script src="/your/path/to/validation.js" type="text/javascript"></script>

b) add an id attribute to form tag


<form name="<?php echo "ChronoContact_".$rows[0]->name; ?>" id="<?php echo "ChronoContact_".$rows[0]->name; ?>" enctype="multipart/form-data" method="<?php echo $paramsvalues->formmethod; ?>" action="<?php echo $actionurl; ?>" <?php echo $rows[0]->attformtag; ?>>

c) add the following just after the form closing tag


<script type="text/javascript">
function formCallback(result, form) {
	window.status = "valiation callback for form '" + form.id + "': result = " + result;
}
	var valid = new Validation('<?php echo "ChronoContact_".$rows[0]->name; ?>', {immediate : true, onFormValidate : formCallback});
</script>

then in your forms follow the instructions to add class="required" as needed. For example:


<div class="reg_form">
 <fieldset>
 <legend>Registration</legend>
  <div class="form-row">
   <div class="field-label-wide">
    <label for="agree">I agree to the above terms of usage:</label>
   </div>
   <div class="field-label">
    <input type="radio" name="agree" value="0" />  I don't agree.<br/>
    <input type="radio" name="agree" value="1" title="You must agree in order to register" class="required validate-one-required" />  I agree.
   </div>
  </div>

  <div id="agree_license" class="form-row">
   <div class="form-row">
    <div class="field-label">
     <label for="name">Your name </label>:
    </div>
    <div class="field-widget">
     <input name="name" id="name" title="Please Enter your name" class="required"/>  (Required)
    </div>
   </div>

   <div class="form-row">
    <div class="field-label">
     <label for="institution">Your Institution</label>:
    </div>
    <div class="field-widget">
     <input name="institution" id="institution" title="Please enter your Institution" class="required"/>  (Required)
    </div>
   </div>

   <div class="form-row">
    <div class="field-label">
     <label for="email_address">Your email address</label>:
    </div>
    <div class="field-widget">
     <input name="email_address" id="email_address" title="Please enter your email address" class="required validate-email"/>  (Required)
    </div>
   </div>

   <div class="form-row">
    <input name="submit" value="Click here to proceed" type="submit" />
   </div>
  </div>
 </fieldset>
</div>

Should look like this

[/list:o]

Post edited by: bouton, at: 2007/08/02 16:00

Post edited by: bouton, at: 2007/08/02 16:01

Post edited by: bouton, at: 2007/08/02 16:02

Post edited by: bouton, at: 2007/08/02 16:04

Post edited by: bouton, at: 2007/08/02 16:37<br><br>Post edited by: bouton, at: 2007/08/02 16:39

Max_admin 02 Aug, 2007

Thanks Bouton🙂

Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

bo

bouton 02 Aug, 2007

Welcome.
This is a great componentto work with.
Let me/us know if this method of validation works for you or not.
Katherine

Max_admin 03 Aug, 2007

Thank you, but this script will only validate for "non empty" field, right ? or what about validation based on some rule or regular expression ?

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

bo

bouton 03 Aug, 2007

their web site says


    * required (not blank)
    * validate-number (a valid number)
    * validate-digits (digits only)
    * validate-alpha (letters only)
    * validate-alphanum (only letters and numbers)
    * validate-date (a valid date value)
    * validate-email (a valid email address)
    * validate-url (a valid URL)
    * validate-date-au (a date formatted as; dd/mm/yyyy)
    * validate-currency-dollar (a valid dollar value)
    * validate-selection (first option e.g. 'Select one...' is not selected option)
    * validate-one-required (At least one textbox/radio element must be selected in a group - see below*)

or you can do a custom one for example


Validation.addAllThese('validate-password', 'Your password must be more than 6 characters and not be 'password' or the same as your name', {
    minLength : 7,
    notOneOf : ['password','PASSWORD','1234567','0123456'],
    notEqualToField : 'username'
});

see http://www.tetlaw.id.au/view/javascript/really-easy-field-validation for more

dw

dwayne 03 Aug, 2007

I have this working on my site but after someone enters validated data they get a blank page. How do I redirect to a home page or thank you page?

Gr

GreyHead 03 Aug, 2007

Hi dwayne,

The blank page is the default ChronoForms response. What happens next is up to you - this FAQ gives a couple of ways of showing your user a 'Thank You' page, or any other page.

Bob<br><br>Post edited by: GreyHead, at: 2007/08/03 09:37

Forums

Real Easy Validation - Hack