How to set up "Advanced" validation

My client requires that phone numbers be entered in 10 digit format- no dashes or parens
and that zip codes must be exactly five digits long
Can this be done?
Also, is it possible to require specific formats like (###) ###-####

Hi Mark,

try this code in the form HTML code box:

<?php
        $script = "
        var phone = new LiveValidation('phone');
        phone.add(Validate.Format, { pattern: /\(ddd\) ddd-dddd/i });
        ";
        $script = "
        window.addEvent('domready', function() {
          $script
        });
        ";
        $doc =& JFactory::getDocument();
        $doc->addScriptDeclaration($script);
        ?>

you must have the validation enabled in the validation tab and your phone field must have the name phone and id phone OR change this in my code!

Cheers
Max

Thank you!
Haven't quite got it working. Can you confirm:

A) Where the code goes: I tried it in the Main
FORM CODE
Form HTML:
(may contain PHP code with tags)
at the very bottom of the code
and in the server side validation area, of the Validation Tab
and a few other places labeled form code -- each of these caused the validation process to no longer work at all.

B) This will work with the curl plugin as I am validating code before submission to Salesforce.com

NOTES:
My form code for phone is
<td><input id="phone" maxlength="16" size="40" name="phone" /></td>
"phone" is one of the fields entered in the "Required (not blank)" field in the Validation tab.
my form is here:
http://flexiblepower.net/index.php?option=com_chronocontact&Itemid=24

Thank you!

Hi MarcRobinson,

The place this should go is in the FormCode | Form HTML box - it shouldn't matter where in the box.

I don't understand why this should stop the other validation working though, Max code looks perfectly OK to me. The worst that it might do is to over-write any other validations on 'phone'.

It also shouldn't have any effect on the CURL submission as this validation is all before the form is submitted and the CURL is after submission.

[sendfb][/sendfb]

Bob

Hi Mark,

the code should go any where in the FORM HTML code box and will not affect anything at your form!

please try this:

    <?php
            $script = "
            var phone = new LiveValidation('phone');
            phone.add(Validate.Format, { pattern: /live/i });
            ";
            $script = "
            window.addEvent('domready', function() {
              $script
            });
            ";
            $doc =& JFactory::getDocument();
            $doc->addScriptDeclaration($script);
            ?>

then try to add any text in the phone field and it should always be invalid unless you add the word "live", does it wok ?

Cheers
Max

Thanks Max but, Nope.
As soon as I add the code to the form the validation stops completely.
Bob asked me to send a backup of the form, which I did. Bob, did you receive it?
I'd be be glad to send you the backup as well if you'd like to take a look at it.

Thanks for the ongoing help.
Mark

Hi Max,

This won't work because the LiveValidation script runs after this and will over-write the 'phone' variable. Somehow the basic validations need to be set up first i.e. not in the for body - then you can add scripts snippets to modify them.

Bob

PS I think that my modified chronocontact.html.php for RC4.11 solved this but I haven't had a chance to test it with RC5.0 yet.

So is this a 'no-go'? Is there something I can test out?
Any other suggestions?

Hi Mark,

It's a tricky one without a core hack. The problem is one of sequence. Max has the form LiveValidation setup running in the body of the page after the form (and after the form JavaScript). Basically anything that you enter in the form will be executed before that. And the LiveValidation property is applied to all inputs so you can't get around it by not validating the field.

One slightly obscure workaround would be to put the custom validation code into say the template debug module so that it runs at the end of the page (you can do this with the Jumi module).

The better answer is for Max to change the load sequence so that the main Validations are applied before the form is loaded. That way you can add custom code that will add to it rather than being over-written.

An alternative for now would be some independent (i.e. not using LiveValidation) validation JavaScript just to look at the field format. It feels like over-kill but should work OK.

Bob

Are you suggesting that I put the code (above) into the Form and turn off validation?
Didn't seem to work -- but possibly I don't know exactly what you're suggesting.

Hi Bob,

Thank you, I got that!🙂

Hi Mark, Please hold on till RC5.1, this is a no-go at the moment, or you may use simple alert box JS validation for now!

Regards
Max

Will Hold for RC1 - Think it might be ready in a week? The boss is holding up the project -- asking me to use another forms program -- don't want to.
Any useful link where I can figure out how to: "simple alert box JS validation for now"

Hi markcrobinson,

you can send to me through the contact us page and I will supply you with the latest RC5.1 upgrade pack which will get my code above to work fine!

Cheers
Max

I've installed RC 5.1 and added the code you specified:

window.addEvent('domready', function() {
var phone = new LiveValidation('phone');
phone.add(Validate.Format, { pattern: /\([0-9][0-9][0-9]\) [0-9][0-9][0-9]-[0-9][0-9][0-9][0-9]/i });
});
in the javascript area.

Works in perfectly Firefox – No validation at all in IE 7 -- as if it the validation is off.

Plus: Would prefer to say, instead of “Not Valid!”, “Enter (999) 999-9999”
Thanks
Mark
You can see the form here:
http://flexiblepower.net/index.php?option=com_chronocontact&Itemid=24

Hi markcrobinson,

Could be becasue you are loading two copies of the MooTools library - one from the template and the other from Joomla. Kill the template one and see if that fixes the problem please.

Bob

Not altogether sure how to "Kill the template one."
Could you give me a clue?

Hi markcrobinson,

There's probably a line in the template index.php that is loading MooTools - comment it out.

Bob

Nope.
Commented out this line:

// <script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/js/mootools-release-1.11.js"></script>

No effect.
In FF, when you put your cursor in the Name field, leave it blank, and hit Tab, "Name is Required" appears. in IE, Nothing... allows you to submit. There is an "Error on page" line 60 char 102 Object doesn't support this property or method....reported by ie:

window.addEvent('domready', function() {
$ES('input', $('ChronoContact_contactus')).each(function(field){
--> This is line 60,
if((field.getProperty('type') != 'submit')&&(field.getProperty('type') != 'reset')&&(field.getProperty('type') != 'button')&&(field.getProperty('type') != 'hidden')){

if((field.getProperty('type') != 'radio')&&(field.getProperty('type') != 'checkbox')){
eval("var cfvalidate_"+field.getProperty('name').replace('[]', '')+" = new LiveValidation(field, { validMessage: '', wait: 500, onlyOnBlur:true, onlyOnSubmit:false });");


Form is here
http://flexiblepower.net/index.php?option=com_chronocontact&Itemid=24

Hi markcrobinson,

That's the line but it looks as though you need html comments <!-- . . . -->

Bob

Sometimes you feel like a nut....

For anyone else coming across this thread - the problem was solved by commenting out this line in index.php

<!--
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/js/mootools-release-1.11.js"></script>
-->

THANK YOU!
It's working -- but I would like to know more about the options and characters I use to create specific masks. Is there a place I can get a full list of the options?
For example I want to allow a few different ways of entering and I want to change the Not Valid Message.

Hi Mark,

The Live Validation docs are here

Bob

I know it goes a lot into detail as to how i should do this...
but...

I am wanting to create a minimum amount of characters for one of my fields. I got confused trying to follow how to do it using the post. Do i need to edit a file in the components/com_chronocontact folder or can i add everything i need in the form HTML side of things?

I checked out the LiveValidation website and i have to use Validate.Length( 'telephone', { minimum: 8, maximum: 20 } );

But i am not sure how i use this???

some help would be great, thanks

Hi joelseneque,

Here's the code for a little test form that is validating for length.

<?php
$script = "
var text_0_val = new LiveValidation('text_0', { 
  validMessage: 'That length is OK' 
});
text_0_val.add(Validate.Length, {
  minimum: 8,
  maximum: 20,
  tooLongMessage: 'Must be fewer than {maximum} digits',
  tooShortMessage: 'Must be more than {minimum} digits'
});
";

jimport('joomla.environment.browser'); 
$browser = JBrowser::getInstance(); 
if ( $browser->getBrowser() == 'msie' ) {
  $loader = 'load';
} else { 
  $loader = 'domready';
}  
$doc =& JFactory::getDocument();
$script = "window.addEvent('$loader', function() { $script });";
$doc->addScriptDeclaration($script);
?>


<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Type something to test</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_0" name="text_0" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_1" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

This version has an added browser test so that it uses 'onLoad' for IE and 'domReady' for FireFox to get round a problem that dmsflash pointed out in another thread.

I ran quick tests on this in IE6, 7 & 8, FF3, Safari & Chromium and it seems OK in all of them. Opera 9 adds some odd 'Stacktrace' messages in the errors but I haven't tried to run down the cause.

Thanks Bob,

I appreciate your quick reply

This im sure is good. I have added the script to my Form HTML though it isnt working.

Am i supposed to add something else somewhere else?

Hi joelseneque,

Do you have Load ChronoForms JavaSCript/CSS set to Yes in the Form General tab? You need MooTools to be loaded for this code to work.

Have you replaced 'text_0' with the id of your text input?

Have you tried adding &tmpl=component to the form url to make sure that other JavaScript on the page isn't getting in the way?

Bob

I have done all these things.
Though i have got Validation turned on.. is this ok?

Hi joelseneque,

Validation on shouldn't make any difference. Please can you post a link to the form.

Bob

From the code outlined above, I included it at the very top of my Form Code and I have Validation turned On.
It worked perfectly!
A great addition to the validation options available... Well Done.