Forums

placing error messages for custom validation

dnigra 09 Apr, 2012
Hi all,

My form has a radio field asking which type of user you are, and then asks for valid identifying info based on the type of user. User type 1 needs to enter a 5 digit number. User type 2 needs to enter a 2-8 character string.

I can't figure out how to change the custom validation based on the value of the radio field.

I have read polderguy's post on a similar issue in V3.2 (http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=5&t=65334&p=264056&hilit=dynamic+field+validation#p264018) , but I can't seem to make it work.

So I'm wondering if this is an issue with the Chronoform version. Are there significant differences between chronoforms v 3.4 and v4 that would cause polderguy's script not to work? Or is maybe the issue with me? 😟

Thanks, dnigra
dnigra 10 Apr, 2012
Well, I got it to work without LiveValidation. Now I just need to figure out how to get the error messages to show up in the same place as the ones generated by the default CF validation. But that's another thread.......
dnigra 11 Apr, 2012
Hi,

I have a form with custom validation for a user identification field. There are 2 types of users; users select the type they are from a radio input and then have to enter identifying information (either a 5 digit number or a 2-8 char alpha string).

When that data is entered, I check for validity depending on the type of user, and produce an alert if the input is invalid. What I really want to do, though, is have the error show up in the same way that errors show when chronoforms catches one. The form is set up to use tooltips for errors.

It's Joomla 1.5 and CF 4.

How can I write my errors to error tooltips?

Many thanks, dnigra
GreyHead 12 Apr, 2012
Hi dnigra,

You can easily add a Custom validation using a Regular Expression - this could check for the correct structure of the code. If you need to check if the code is already registered/valid then you'd need to add an Ajax lookup on that input to query the database on the server.

What exactly do you need to check?

Bob
GreyHead 12 Apr, 2012
Hi dnigra,

I merged these two threads together as they seem to be asking the same question.

CFv3 used LiveValidation, CFv4 uses the FormCheck library from MooTools.Floor. The two are completely different.

Bob
dnigra 12 Apr, 2012
Thanks, Greyhead. I do have regular expressions that check the validity of the code entered. Right now, it creates an alert if the code is invalid.

What I'd like to do is get the error message for an invalid code to show up in the tooltip for the field, instead of creating an alert. This is a required field also, so if you tab through it without entering anything, the tooltip pops up telling you it is a required field. Is there a way for me to put the error from the reg. exp. validation in the appropriate tooltip field?

Thanks, dnigra
GreyHead 12 Apr, 2012
Hi dnigra,

Here's an example of a Custom validation for CFv4. This one is to validate a date format and is included in a Load JS action:
function checkDate(el){
  if (!el.value.test(/^(?:(0[1-9]|[12][0-9]|3[01])[\- \/.](0[1-9]|1[012])[\- \/.](19|20)[0-9]{2})$/i)) {
    el.errors.push("Vul een geldige datum dd/mm/yyyy");
    return false;
  } else {
    return true;
  }
};
This validation is called by adding validate['%checkDate'] in the input element class box.

You can modify this by changing the the function name, the regex and the error message.

Bob
dnigra 12 Apr, 2012
Thanks again - I looked at the link to FormCheck, it's exactly what I need. I'll let you know when I get it working.

dnigra
dnigra 20 Apr, 2012
I can't get this to work at all. I am losing my mind. First things first, Joomla 1.5.25 and CF 4.0 RC3.11

I created a form through the Wizard. I added a Load JS event On Load. Here is the code; copied (I think exactly) from your reply:

[code]function checkDate(el){
if (!el.value.test(/^(?:(0[1-9]|[12][0-9]|3[01])[\-\/.](0[1-9]|1[012])[\-\/.](19|20)[0-9){2})$/i)) {
el.errors.push("Enter a date in this format: dd/mm/yyyy");
return false;
}
else {
return true;
}
};
[/code]

I edited the form as a custom form to add the call to checkDate. Here is the form code: ( line breaks added for legibility)


<div class="ccms_form_element cfdiv_text" id="date_container_div">
<label for="date">Enter a date</label>
<input id="date" maxlength="150" size="30" class=" validate['%checkDate']" title="" type="text" value="" name="fdate" />
<div class="clear"></div>
<div id="error-message-fdate"></div></div>

<div class="ccms_form_element cfdiv_submit" id="autoID-b8ae80c0bf4aac157dc9c1a40c613e7d_container_div">
<input name="input_submit_1" class="" value="Submit" type="submit" />
<div class="clear"></div>
<div id="error-message-input_submit_1"></div></div>


I can put anything I want in the input box and submit without error. What in the world am I doing wrong?

Thanks for all your help.
dnigra 20 Apr, 2012
I caught one typo in the regexp:

(/^(?:(0[1-9]|[12][0-9]|3[01])[\-\/.](0[1-9]|1[012])[\-\/.](19|20)[color=#FF0000][0-9)[/color]{2})$/i))

so I replaced the ) with ]

but I can still put anything at all in the input field and submit without errors. 😟
GreyHead 21 Apr, 2012
Hi dnigra,

Copy and paste is your friend with regular expressions :-)

Do you see any errors reported in your web browser JavaScript Console?

Bob
dnigra 23 Apr, 2012
Right you are about copy and paste.

In the end, what was biting me was... quotation marks. The code was something like:

if (document.myForm.userType[0].checked) 
   {
     var pattern=/^[0-9]{2,5}$/;
     var warning='Invalid project id';
   }
   else if (document.myForm.userType[1].checked) {
     var pattern=/^[a-zA-Z0-9]{2,8}$/;
     var warning ='Invalid username';
   }

   if (!el.value.test(pattern)) {
     el.errors.push(warning);
   return false;
  }


but all along I had the patterns defined with '' around them, like
var pattern='/^[0-9]{2,5}$/';

Ugh. I won't forget that again.........

Thanks again for your help.
GreyHead 24 Apr, 2012
Hi dnigra,

I sympathise, I've done the same thing several times :-(

Bob
This topic is locked and no more replies can be posted.