Forums

I have a form with 2 date pickers & I want to do some additional validation:

1. Check date selected is not in past.
2. Check that the leaving date is after the arrival date.

I am sure I can use the advanced wizard events and actions section but no idea how I do this.

Also is there any way to:
1. allow digits and spaces in a validated field (digits & numbers force no spaces in fact seem identical in validation)
2. commas as well as text in a validated field (alpha numeric forces no commas etc).

Any help gratefully received.

Hi olaeblue,

I don't know how to do this in ChronoForms v4.

When I have some time I'll try to work it out :-(

Bob

Hi Greyhead,

Thanks for the response.
I had hoped there was some simple php or JS code I could use/copy to get this to work in Joomla. Maybe I'll just have to experiment myself.🙂

Hi,

I would go with custom validations, it should not that hard, you will just need the correct regex to check that.

Regards,
Max

Max

Sorry my knowledge is limited here. How would I write such a custom validation? what language should I use & where should I put the code? Is it 'custom code - before email' and php or something else?

Ok did a bit more playing and googling and have now solved this I think. Need to clean up the code a little but this works.

1. Add Custom Server Side Validation action as 1st On Submit Action
2. Add following code

<?php
$error_count = 0;
$f_date = $form->data['from_date'];
$t_date = $form->data['to_date'];
$todays_date = date("Y-m-d");

$today = strtotime($todays_date);
$from_date = strtotime($f_date);
$to_date = strtotime($t_date);

if (($from_date > $today) && ($to_date > $today))  {
     if ($to_date < $from_date) {
         $error_count++;
         $form->validation_errors['to_date'] = "Leaving before you arrive.";
         }
} else {
     $error_count++;
     $form->validation_errors['to_date'] = "Date in the past.";
     $form->validation_errors['from_date'] = "Date in the past.";
}
if ( $error_count ) {
  return false;
}
?>

This needs neatening for the error reporting, and it would be nice to have the dialogue boxes that a normal validation failure shows rather than red text below, but does the job which is the main thing.

I want javascript to check at client side when I click the submit button of the chronoform:
Please help me check my it doesn't not work on joomla 1.7.1 + chronoform 4 RC 2.0

The below code has been added to Events::Onload::Load JS

/* my fdate(from date) and tdate(to date)date formats like dd-mm-yyyy eg. 23-12-2011 set my datepicker */

function validater(thisForm) {

if(thisForm.fdate.value == '') {
alert('Vous devez indiquer votre arriv\u00E9e');
thisForm.fdate.focus();
return false;
}

var adate=thisForm.fdate.value;
var ddate=thisForm.tdate.value;
var adate=parseInt(adate.substr(6,4).concat(adate.substr(3,2),adate.substr(0,2)));
var ddate=parseInt(ddate.substr(6,4).concat(ddate.substr(3,2),ddate.substr(0,2)));

var todate = new Date();
var dd = todate.getDate();
var mm = todate.getMonth()+1;//January is 0!
var yyyy = todate.getFullYear();
if(dd<10){dd='0'+dd;}
if(mm<10){mm='0'+mm;}
var todate = parseInt(yyyy.toString().concat(mm.toString(),dd.toString()));
if(adate<todate){
alert("Arriv\u00E9e ne peut pas \u00EAtre avant Aujourd\'hui"); 
thisForm.fdate.focus();
return false;
	}

if(thisForm.tdate.value == '') {
alert('Vous devez indiquer votre D\u00E9part');
thisForm.tdate.focus();
return false;
}


if(adate>ddate){
alert('D\u00E9part doit \u00EAtre apr\u00E8s Arriv\u00E9e'); 
thisForm.tdate.focus();
return false;
	}

return true;
} 	

Form Tag Attachment: onSubmit="return validater(document.reservationform)"

HTML Custom Code as follow:

  	<label for="fdate">arrivée*</label>
<input id="fdate" maxlength="150" size="16" class="txtbox cf_date_picker" label_over="0" hide_label="0" type="text" value="" name="fdate" />
<label for="tdate">départ*</label>
<input id="tdate" maxlength="150" size="16" class="txtbox cf_date_picker" label_over="0" hide_label="0" type="text" value="" name="tdate" />

<input name="submit" id="submitid" class="submitbtn" value="Validez" type="submit" />

Hi hengsovann,

You have a few problems here.

a) The form id you've got in the Form Tag Attachment box is different from the name of the form.

b) The MooTools datepicker places a substitute input box with a different id in place of the one in the form HTML so the code still throws an error after the form name has been corrected.

Time for some serious JavaScript debugging I'm afraid :-(

Bob

Hello,

#1- You can use the code in this post to set a minDate for the "arrive" date so that it should never be before the same day:
http://chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=26&t=22627#p105914

#2- use the same custom datepicker action above to set "allow empty" to "no", so that there is always a date value there.

#3- do the same with a 2nd custom date picker action for the "depart" date field.

#4- add a custom class for the depart field:

validate['%checkDate']

#5- add a "Load JS" action before the 2 custom date picker actions and use a function to check that the depart date is after the arrive one:

function customCheck(el){
	if ($('depart_field_id').value <= $('arrive_field_id').value) {
		el.errors.push("Depart date should be AFTER the arrive date.");
			return false;
		} else {
			return true;
		}
}

The function would not be simple like the one above, you need the logic to parse the dates, maybe convert them to UNIX time stamps and compare, I see that you already have some logic in your code which you can use🙂

Regards,
Max

Hi Max,

Im using ChronoForms 4.0 RC3.11 and I have use the way as it is in above post, but i found out when using validate['%checkDate'] this won't work. it'll automatically send the form without any validation. Could you please let me whats wrong?????

Hi Laki,

It should work, but it depends on the fields values, first try to change the function so that it always pushes the error and return false, if it works then try to change the logic so that it returns true when you need.

Regards,
Max

Hi Max,

Here is my code,

Load JS

function customCheck(el){
   if ($('input_datetime_2').value <= $('input_datetime_1').value) {
      el.errors.push("Depart date should be AFTER the arrive date.");
         return false;
      } else {
         return true;
      }
}

HTML

<div class="ccms_form_element cfdiv_radio" id="autoID-177b00d0a6ac372d50b5e3d8b36bf87e_container_div"><label>Label Text</label><input type="hidden" name="input_radio_0" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="input_radio_0" id="input_radio_0_no" title="" value="No" class="validate['required']" />
<label for="input_radio_0_no">No</label>
<input type="radio" name="input_radio_0" id="input_radio_0_yes" title="" value="Yes" class="validate['required']" />
<label for="input_radio_0_yes">Yes</label>
</div><div class="clear"></div><div id="error-message-input_radio_0"></div></div><div class="ccms_form_element cfdiv_datetime" id="autoID-0ffca9abf3c83f5bf891ea5fbb6572ef_container_div"><label>check in</label><input maxlength="150" size="16" class=" validate['required','target:input_datetime_1_clone_id'] cf_date_picker" title="" type="text" value="" name="input_datetime_1" id="input_datetime_1"/>
<div class="clear"></div><div id="error-message-input_datetime_1"></div></div><div class="ccms_form_element cfdiv_datetime" id="autoID-5abed3ff116731c425a874f507a33e99_container_div"><label>check out</label><input maxlength="150" size="16" class=" validate['required','target:input_datetime_2_clone_id','%checkDate'] cf_date_picker" title="" type="text" value="" name="input_datetime_2" id="input_datetime_2" />
<div class="clear"></div><div id="error-message-input_datetime_2"></div></div><div class="ccms_form_element cfdiv_text" id="autoID-990626358019c2463dc23c19831bbf3c_container_div"><label>Enter the code</label><input maxlength="5" size="5" class="chrono_captcha_input validate['required']" title="" type="text" value="" name="chrono_verification" />
{chronocaptcha_img}<div class="clear"></div><div id="error-message-chrono_verification"></div></div><div class="ccms_form_element cfdiv_submit" id="autoID-7490ecbb9b4c8b16a0bc20ab5a06df96_container_div"><input name="input_submit_4" class="" value="Submit" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_4"></div></div>

Could you please let me know whats wrong in here??

I believe %checkDate throw an error, without validating the dates it automatically send an email in here.

thx

Regards,
Lsk