Forums

Well I've got my first form almost ironed out. Max's JS validate-checkequal code is working for the email and password fields. Auto Server Side Validation is working by preventing any none alphanumeric entries into all the fields other than email. Take that you script-injection ba***rds!
IT WORKS IN ie 🤣
[attachment=0]finished-form.JPG[/attachment]
Just two more things to make it PERFECT!

Where would I look to find some code that would link the Name and User entires to a Custom server side validation of the users in the sites database so as to inform the person that the name or user is taken.

Lastly some JS code to force them to click the I Agree to Terms box before the form is allowed to be submitted.

I love this product!

HI jumla16_gy,

You'll find both code chunks you need in The ChronoForms Book.

The validated checkbox is in the extract here

And the Email checker int his extract. This is an client-side Ajax example but the code you need to do a serverside check is in he Extra Code block.

Bob

HI jumla16_gy,

You'll find both code chunks you need in The ChronoForms Book.

The validated checkbox is in the extract here

And the Email checker int his extract. This is an client-side Ajax example but the code you need to do a serverside check is in he Extra Code block.

Bob

Thanks for the quick reply. One more question though 😶 where in CF4 do I find the Form JavaScript box?

Hi jumla16_guy,

IN CFv4 it's become the Load JS action. Drag it to the OnLoad event box. Then it behaves the same way.

Bob

I think I did something wrong in my implementation of your very detailed "Locking the Submit button until the box is checked"

This is my setting for the forms checkbox:
Field Name: input_checkbox_14

The form code for it turns out as this:

<div class="ccms_form_element cfdiv_checkbox" id="i_agree_to_the_terms_container_div"><input value="1" type="checkbox" class="validate['required'] label_right" name="input_checkbox_14" />
<label class="full_label">I agree to the terms</label><div class="clear"></div>

These are my settings for the form submit button:
Name: input_submit_4
ID: submit
Text: Submit

The form code for it turns out as this:

<div class="ccms_form_element cfdiv_submit" id="input_submit_4_container_div"><input name="input_submit_4" id="submit" class="" value="Submit" type="submit" />
<div class="clear"></div>

This is my form events setup:
[attachment=0]cf4_form-events_setup.JPG[/attachment]

The ONLOAD -> Load JS looks like this:

// stop the code executing 
// until the page is loaded in the browser
window.addEvent('load', function() {
// function to enable and disable the submit button  
	function agree() {
		if ( $('input_checkbox_14').checked == true ) {
			$('submit').disabled = false;
		} else {
			$('submit').disabled = true;
		}
	};
	// disable the submit button on load
	$('submit').disabled = true;
	//execute the function when the checkbox is clicked
	$('input_checkbox_14').addEvent('click', agree);
});

and the Custom Server Side Validation looks like this:

<span class="syntaxdefault"><?php<br />$agree </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> JRequest</span><span class="syntaxkeyword">::</span><span class="syntaxdefault">getString</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'input_checkbox_14'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">'empty'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">'post'</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">if </span><span class="syntaxkeyword">(</span><span class="syntaxdefault"> $agree </span><span class="syntaxkeyword">==</span><span class="syntaxdefault"> </span><span class="syntaxstring">'empty'</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">)</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">  return </span><span class="syntaxstring">'Please check the box to confirm your agreement'</span><span class="syntaxkeyword">;}<br /></span><span class="syntaxdefault">?></span>

The end result of all of this, is that the Submit button is greyed out and clicking the checkbox DOESN'T activate the Submit button.
Also I get this error in Firebugs console panel from /localhost/component/chronoforms/?chronoform=Register:

$("input_checkbox_14") is null

The breakpoint points to the $('submit') line:

// disable the submit button on load
$('submit').disabled = true;

Okay I'm trying to learn JS and Firebugs debugger to sort this out.
What I've got so far, it seems to be stuck on the field name of the checkbox "input_checkbox_14"
[attachment=0]firebug-error-1.JPG[/attachment]

Hi,

Some hints:

1- This error is expected:

$("input_checkbox_14") is null

since your checkbox or whatever doesn't have an ID, and I'm not sure if you can call a function from the event like what you have done here:

$('input_checkbox_14').addEvent('click', agree);

2- I don't think you should use the "Custom server side validation" in the on load ? it should be in the "on submit" as long as you are validating some form value.

Regards,
Max

Thanks Max, I was interpolating the work done by Greyhead for CF3.1 and didn't understand the concept correctly for CF4.
Gave the form checkbox a ID of "checkbox00" and put this in the onLoad JS and now it works perfectly.

I understood your point that I had the Custom Server side in the wrong place then realized I didn't need it all as there is NO WAY to Submit the form client-side without the Agree Terms checkbox clicked, so I don't need to validate for it server-side.

You know I really appreciate yourself and Greyhead answering my "design questions" while realizing your main purpose is to provide support for users that have a "broken" ChronoForms.

Thanks Again,
Dan

HI jumla16_gy,

You'll find both code chunks you need in The ChronoForms Book.

The validated checkbox is in the extract here

With Max's help (I'm Javascript-challenged) this is working perfectly. Thank you.

And the Email checker int his extract. This is an client-side Ajax example but the code you need to do a serverside check is in he Extra Code block.

Bob

Since I'm doing this in CF4, where in CF4 do I find the "Extra Code block" or is this have a different functionality in CF4?

Hi jumla16_guy,

Hmmm . . I need to work this out.

At the bottom of the Events tab is an 'Add Event' link; click this and name the new event ajax

Drag a Custom Code Action into the new On ajax event and add the code into it's code box.

Alter the URL in the JavaScript

var url = 'index.php?option=com_chronocontact
  &chronoformname=form_name&task=extra&format=raw';

to look like

var url = 'index.php?option=com_chronoforms
  &chronoform=form_name&event=ajax&format=raw';

remembering to replace form_name with the name of your form.

Cross your fingers and test.

Bob

PS Max: This should be OK provided that the id is valid.

$('input_checkbox_14').addEvent('click', agree);

Hmmm . . I need to work this out.
Drag a Custom Code Action into the new On ajax event and add the code into it's code box.
Cross your fingers and test.

I guess I didn't cross my fingers hard enough 😶
This is my setup now:
[attachment=0]cf4_form-events_setup.JPG[/attachment]
In the onLoad section, the 3rd Load JS look like this:

window.addEvent('domready', function() {
	// set the url to send the request to
	var url = 'index.php?option=com_chronoforms&chronoform=Register&event=ajax&format=raw';
	var email = $('email');  email.addEvent('blur', function() {
		// clear any background color from the input email.setStyle('background-color', 'white');
		// check that the email address is valid
		regex = /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i;
		var value = email.value.trim();
		if ( value.length > 6 && regex.test(value) ) {
			// if all is well send the JSON request
			var jSonRequest = new Json.Remote(url, {
				onComplete: function(r) {
					// check the result and set the background color
					if ( r.email_ok ) {
						email.setStyle('background-color', 'green');
					} else {
							email.setStyle('background-color', 'red');
						}
				}
			}).send({'email': email.value});
		} else {
			// if this isn't a valid email set background color red
			email.setStyle('background-color', 'red');
			}
		});
});

The Add Event -> "ajax" looks like this:

<?php
// clean up the JSON message
$json = stripslashes($_POST['json']);
$json = json_decode($json);$email = strtolower(trim($json->email));
// check that the email field isn't empty
$response = false;
if ( $email ) {
  // Check the database
  $db =& JFactory::getDBO();
  $query = "
		SELECT COUNT(*)
			FROM `stamp14_users`
			WHERE LOWER(`email`) = ".$db->quote($email).";
	";
	$db->setQuery($query);
	$response = (bool) !$db->loadResult();
}
$response = array('email_ok' => $response );
//send the reply
echo json_encode($response);
// stop the from running
$MyForm->stopRunning = true;
die;
?>

However on test when I enter a used email address there are no warnings whatsoever. It's only after Submit the Auto Server Side validation has an error message that the email is already in use😟
Should I be trying this on a live test site rather than WAMP?

PS Max: This should be OK provided that the id is valid.

$('input_checkbox_14').addEvent('click', agree);

My bad here, in reading your CF 3.1 example, I got it in my mind that I had to be using the input name rather than the input ID. I gave the checkbox input ID a value of "checkbox00" (arbritatry name) and it all worked.

Hi jumla16_guy,

You actually need to create a new event box. See the image below. When you Click Add Event you will be able to create the On ajax event.

Bob

Hi Bob,
Thanks for sticking with me. When you come out with your Chronoforms Cookbook for v4 I'll buy you as many Rickard Red's as you wish
So I'm confused by the difference of my event in the previous graphic and your event:
[attachment=2]on-ajax-2.jpg[/attachment]
Running my form in Firebug it seems the onLoad JS runs fine but the ajax event isn't being triggered. As soon as I blur out of the email entry box there is no further action in the debugger.
I've put a string in the ajax code

$inJSON = 'we are in JSON';

[attachment=1]on-ajax-code-window.JPG[/attachment]
I've put a watch on this in Firebug but it never triggers:
[attachment=0]firebug-debugger-1.JPG[/attachment]

Hi jumla16_boy,

Apologies - I didn't read your post carefuly enough and missed that you'd added the event correctly :-(

I'll try re-building the code in Joomla! 1.6 and see if I spot any other differences.

Bob

Thanks Bob, I'm actually using Joomla 1.5.23
Listen, would it be better if I put this up in a dev site and gave you access?

Hi jumla16_guy,

Please see this post

Bob

AWESOME Bob!
My travels with the new info. Changed the file as specified but still wouldn't invoke JSON on my local WAMP server. So I uploaded my chronoforms folder to a live test server and the MySQL and lo & behold it worked!!!
So tinkering a bit I got this layout:
[attachment=0]form-liveserver-FF3.JPG[/attachment]
I still have one niggling and one major issue to resolve, with hopefully your help.
1. When an already used email is entered the JSON returns the result, my JS code pops up a Windows box to display that result. Could you point me to some code so I could duplicate the message in the drawer position as some of your other validation and result messages do?

2. I truly don't understand what MS is thinking??? They roll out Windows7 (which I love) and have $8 billion to buy Skype but I think they hired a class of 5th graders to write the code for Internet Explorer 🙄
In FF, the form loads and the Submit button is disabled. So I have the JS code from you that monitors my Terms checkbox. Click and the Submit button is enables. All as it should be.

So lets take a look what happens with the 5th graders browser, IE8. The form loads and the Submit button is disabled. Click the Terms checkbox and Submit buttons status doesn't change.
So click the Terms checkbox again (which means you're now unchecking it) and the Submit button enables.

Keep doing this and you realize that the two are out of step with each other, ARRGGHHHH!
Any suggestions.
Also since this is now on a live site, if you wish I can send you the Super Admin log info.

Thanks Dan

Hi Dan,

By all means send me the admin but I won't get to look until tomorrow morning.

Bob

Thanks Bob, PM sent.

Hi jumla16_guy,

The IE8 bug you are seeing is a side effect of the RocketTheme input styling. I've turned it off on your test site and you can see that the code now works correctly.

The problem appears to be that the nput styling effectively changes the id of the active checkbox :-(

Bob

Hi Dan,

I also updated the email checker script. The extra line you need is

$('error-message-input_text_3').setText("This isn't a valid email");

This displays the message but the CSS probably needs tweaking.

Bob

PS You've updated the 'id's in your Form to have 'friendly' values but have left the names unchanged. Hence 'error-message-input_text_3' rather than 'error-message-email'. I usually try to keep both in sync.