LiveValidation and Chronoforms

I am new to Chronoforms and I am having a terrible time trying to understand how I can use LiveValidation within a Chronoforms Form.

Can anyone help?

Note: I have Preordered the ChronoForms 1.3 for Joomla! site Cookbook [eBook] by Bob Janes hoping it will assist me using Chronoforms and resolve my problem as explained above.

Hi russellw ,

What exactly are you trying to validate?

For the 'built-in; validations it's usually just a question of ticking the box in the Wizard or adding a class to the Form HTML.

Bob

PS Thanks for the book order. Chapter 5 is on "Form Validation and Security".

Bob,
Thanks for the prompt reply.

I am using the built-in Validations for the form that I am creating except that I have two fields that I am using as a "Time Picker".

The first field is for entering an hour value (0 to 23) and I want to validate the number entered and check that it is NOT GREATER than 23 and I am not sure how to do this - (I assume that this would be classified as "Custom Validation").

The second field is for selecting a Minute value from the option box - NO problem here.

Looking forward to receiving my copy of your EBook.

Hi russellw,

Assuming that you have an hour input with the id 'hour:

<input type="text" name="hour" id="hour" />

Use this code in the Code JavaScript box:

var foo = new LiveValidation('hour', { 
  validMessage: 'Hour OK!', 
  wait: 500
});
hour.add(Validate.Numericality, {
  onlyInteger: true, 
  minimum: 1,
  maximum: 24,
  tooHighMessage: 'OOPS!',
  tooLowMessage; 'oops!'
});

Not tested and may need debugging

Bob

Bob,
I am determined to get my head around this validation process, so hopefully you will be tolerant with my replies.

I have created a form to test your code.

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Hour:</label>
    <input class="cf_inputbox required validate-digits" maxlength="2" size="2" title="Between 0 and 23 Only" id="text_0" name="Hour" type="text" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Hour: :: Enter Hour Value</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Send Email" name="button_1" type="submit" /><input type="reset" name="reset" value="Reset"/>
  </div>
  <div class="cfclear"> </div>
</div>

I then inserted your code into the JavaScript box as explained - Did not work - What am I doing wrong?

Hi russelw,

Sorry to be so long in replying.

The immediate problem I see is that your input box has the id='text_0' not id='hour'

Bob