Heya Folks,
Not exactly a support post, more of a work in progress, and one that possibly other people could use or decide to chip into!
Firstly I have merged an ajax check for username/email, initially from Samoht, in this thread with custom form validations and live validation from this thread
Now the principles all work fine - I have multiple validations including string leangth, must have number in password, fields must match, username is unique etc etc, however I am trying to explore a few extra things:
1) Using a custom function as validation - http://livevalidation.com/documentation - it is supported, on the basis of using a function that will run the ajax piece, and return a true/false argument.
I am wondering if easier to explore turning the ajax query into a function to be called, or perhaps to set a global $varr in the ajax code, and make a very simple function to check the value of the $var ??
The idea here is to be able to control ajax responce so you can see \can't be blank\invalid username\username in use etc all in the same place - or 'valid'.
2) Outputing a graphic / settng css as the result of a function ?
I am wondering how I can (for example) show a tick or cross next to a field - either in place of, or as well as an error message!
3) Controlling the position of the validation output - havent even begun to look at this yet!
Current form code is here (note you will need the ajax form as well from the other post!)
Thanks in advance for any suggestions!
Not exactly a support post, more of a work in progress, and one that possibly other people could use or decide to chip into!
Firstly I have merged an ajax check for username/email, initially from Samoht, in this thread with custom form validations and live validation from this thread
Now the principles all work fine - I have multiple validations including string leangth, must have number in password, fields must match, username is unique etc etc, however I am trying to explore a few extra things:
1) Using a custom function as validation - http://livevalidation.com/documentation - it is supported, on the basis of using a function that will run the ajax piece, and return a true/false argument.
I am wondering if easier to explore turning the ajax query into a function to be called, or perhaps to set a global $varr in the ajax code, and make a very simple function to check the value of the $var ??
The idea here is to be able to control ajax responce so you can see \can't be blank\invalid username\username in use etc all in the same place - or 'valid'.
2) Outputing a graphic / settng css as the result of a function ?
I am wondering how I can (for example) show a tick or cross next to a field - either in place of, or as well as an error message!
3) Controlling the position of the validation output - havent even begun to look at this yet!
Current form code is here (note you will need the ajax form as well from the other post!)
<span class="syntaxhtml"><br /> <span class="syntaxdefault"><?php<br /> $script </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxstring">"window.addEvent('domready', function() {<br /> $('uname').addEvent('blur', function(e) {<br /> e = new Event(e).stop();<br /><br /> // Show the spinning indicator when pressing the submit button... <br /> $('indicator1').setStyle('display','block');<br /><br /> var username = $('uname').value;<br /> if ( username != '' ) {<br /> var url = 'index2.php?option=com_chronocontact&chronoformname=ajax_form&username='+username+'&tmpl=component';<br /><br /> new Ajax(url, {<br /> method: 'get',<br /> onSuccess: parseResult<br /> }).request();<br /> }<br /> function parseResult(request)<br /> {<br /> $('indicator1').setStyle('display','none');<br /><br /> var msg = request.split('##@##');<br /> $('username_msg').setHTML(msg[1]);<br /> }<br /><br /> });<br /> <br /> $('email').addEvent('blur', function(e) {<br /> e = new Event(e).stop();<br /><br /> // Show the spinning indicator when pressing the submit button... <br /> $('indicator2').setStyle('display','block');<br /><br /> var email = $('email').value;<br /> if ( email != '' ) {<br /> var url = 'index2.php?option=com_chronocontact&chronoformname=ajax_form&email='+email+'&tmpl=component';<br /><br /> new Ajax(url, {<br /> method: 'get',<br /> onSuccess: parseResult<br /> }).request();<br /> }<br /> function parseResult(request)<br /> {<br /> $('indicator2').setStyle('display','none');<br /><br /> var msg = request.split('##@##');<br /> $('email_msg').setHTML(msg[1]);<br /> }<br /><br /> });<br /> <br /> });"</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault"> <br /> global $mainframe</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">if </span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$mainframe</span><span class="syntaxkeyword">-></span><span class="syntaxdefault">isSite</span><span class="syntaxkeyword">())<br />{<br /></span><span class="syntaxdefault"> $doc </span><span class="syntaxkeyword">=&</span><span class="syntaxdefault"> JFactory</span><span class="syntaxkeyword">::</span><span class="syntaxdefault">getDocument</span><span class="syntaxkeyword">();<br /></span><span class="syntaxdefault"> $doc</span><span class="syntaxkeyword">-></span><span class="syntaxdefault">addScriptDeclaration</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$script</span><span class="syntaxkeyword">);<br />};<br /><br /><br /><br /></span><span class="syntaxdefault">$script </span><span class="syntaxkeyword">.=</span><span class="syntaxdefault"> </span><span class="syntaxstring">"<br />var uname = new LiveValidation('uname', { <br /> validMessage: 'This is a valid username', <br /> wait: 500<br />});<br />uname.add(Validate.Presence, {<br /> failureMessage: 'Username must not be blank!'<br />});<br />uname.add(Validate.Format, {<br /> pattern: /^[a-zA-Z\-_]{4,16}$/, <br /> failureMessage: 'Username must be between 4 and 16 characters' <br />});<br />"</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">$script </span><span class="syntaxkeyword">.=</span><span class="syntaxdefault"> </span><span class="syntaxstring">"<br />var firstname = new LiveValidation('firstname', { <br /> validMessage: 'This is a valid Name', <br /> wait: 500<br />});<br />firstname.add(Validate.Presence, {<br /> failureMessage: 'Name must not be blank!'<br />});<br />firstname.add(Validate.Format, {<br /> pattern: /^[a-zA-Z\-_]{2,16}$/, <br /> failureMessage: 'We allow between 3 and 16 characters' <br />});<br />"</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">$script </span><span class="syntaxkeyword">.=</span><span class="syntaxdefault"> </span><span class="syntaxstring">"<br />var surname = new LiveValidation('surname', { <br /> validMessage: 'This is a valid Surname', <br /> wait: 500<br />});<br />surname.add(Validate.Presence, {<br /> failureMessage: 'Surname must not be blank!'<br />});<br />surname.add(Validate.Format, {<br /> pattern: /^[a-zA-Z\-_]{2,16}$/, <br /> failureMessage: 'We allow between 3 and 16 characters' <br />});<br />"</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">$script </span><span class="syntaxkeyword">.=</span><span class="syntaxdefault"> </span><span class="syntaxstring">"<br />var email = new LiveValidation('email', { <br /> validMessage: '*enter valid message here*', <br /> wait: 500<br />});<br />email.add(Validate.Presence, {<br /> failureMessage: '*enter failure message here*'<br />});<br />email.add(Validate.Email);<br />"</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">$script </span><span class="syntaxkeyword">.=</span><span class="syntaxdefault"> </span><span class="syntaxstring">"<br />var email_1 = new LiveValidation('email_1', { <br /> validMessage: '*enter valid message here*', <br /> wait: 500<br />});<br />email_1.add(Validate.Presence, {<br /> failureMessage: 'Email must not be blank!'<br />});<br />email_1.add(Validate.Confirmation, {<br /> match: 'email' } );<br />"</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">$script </span><span class="syntaxkeyword">.=</span><span class="syntaxdefault"> </span><span class="syntaxstring">"<br />var password = new LiveValidation('password', { <br /> validMessage: '*enter valid message here*', <br /> wait: 500<br />});<br />password.add(Validate.Presence, {<br /> failureMessage: 'Password must not be blank'<br />});<br />password.add(Validate.Format, {<br /> pattern: /^(?=.*?[a-zA-Z])(?=.*?[0-9]).*$/, <br /> failureMessage: 'Password must be between 8 and 16 characters, with at least one letter and one number' <br />});<br />"</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">$script </span><span class="syntaxkeyword">.=</span><span class="syntaxdefault"> </span><span class="syntaxstring">"<br />var password_1 = new LiveValidation('password_1', { <br /> validMessage: '*The Password is Valid!*', <br /> wait: 500<br />});<br />password_1.add(Validate.Presence, {<br /> failureMessage: 'Password must not be blank!'<br />});<br />password_1.add(Validate.Confirmation, {<br /> match: 'password' } );<br />"</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">$doc </span><span class="syntaxkeyword">=&</span><span class="syntaxdefault"> JFactory</span><span class="syntaxkeyword">::</span><span class="syntaxdefault">getDocument</span><span class="syntaxkeyword">();<br /></span><span class="syntaxdefault">$script </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxstring">"<br />window.addEvent('domready', function() {<br />$script<br />});<br />"</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">$doc</span><span class="syntaxkeyword">-></span><span class="syntaxdefault">addScriptDeclaration</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">$script</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">?></span> <br /> <br /> <br /> <br /> <br /> <!-- Begin Start Background Box --><br /> <div style="background: url(/images/corners/bl2.gif) 0 100% no-repeat #232b00; width: 100%"><br /> <div style="background: url(/images/corners/tl2.gif) 0 0 no-repeat"><br /> <div style="background: url(/images/corners/br2.gif) 100% 100% no-repeat"><br /> <div style="background: url(/images/corners/tr2.gif) 100% 0 no-repeat; padding:10px"><br /> <!-- End Start Background Box --><br /><br /><fieldset><br /><legend>Essential Information</legend><br /><br /><div class="form_item"> <br /><table align="center" border="0" cellpadding="0" cellspacing="0" width="625"><br /><tbody><br /><br /><tr><br /> <td align="right" width="90"><span class="cf_label">Account Name:</span></td><br /> <td width="230"><input style="" rel="" id="uname" name="uname" class="cf_reg_input" title="" value="" type="text"></td><br /> <td colspan="" class="formErr" align="left" valign="middle"><span id="indicator1" style="display: none"><img src="/images/hourglass.gif" alt="checking..." /></span></td><br /> <td colspan="2" class=""><div id='username_msg' ></div></td><br /></tr><br /><br /><tr><br /> <td align="right" width="90"><span class="cf_label">Your Name:</span></td><br /> <td width="230"><input style="" rel="" id="firstname" name="firstname" class="cf_reg_input" title="" value="" type="text"></td><br /> <td colspan="" class="formErr" align="left"></td><br /> <td width="230"><input style="" rel="" id="surname" name="surname" class="cf_reg_input" title="" value="" type="text"></td><br /> <td colspan="" class="formErr" align="left" valign="middle"></span></td><br /></tr><br /><br /><tr><br /> <td align="right" width="90"><span class="cf_label">Account Email:</span></td><br /> <td width="230"><input style="" rel="" id="email" name="email" class="cf_reg_input" title="" value="" type="text"></td><br /> <td colspan="" class="formErr" align="left"><span id="indicator2" style="display: none"><img src="/images/hourglass.gif" alt="checking..." /></td><br /> <td width="230"><input style="" rel="" id="email_1" name="email_1" class="cf_reg_input" title="" value="" type="text"></td><br /> <td colspan="" class="formErr" align="left" valign="middle"></td><br /></tr><br /><br /><tr><br /> <td align="right" width="90"></td><br /> <td colspan="4" class="formErr" align="left" valign="middle"><div id='email_msg' ></td><br /></tr><br /><br /><br /><tr><br /> <td align="right" width="90"><span class="cf_label">Password:</span></td><br /> <td width="230"><input style="" rel="" id="password" name="password" class="cf_reg_input" title="" type="password"></td><br /> <td colspan="" class="formErr" align="left"></td><br /> <td width="230"><input style="" rel="" id="password_1" name="password_1" class="cf_reg_input" title="" type="password"></td><br /> <td colspan="" class="formErr" align="left"></td><br /></tr><br /><br /><tr><br /> <td align="right" width="90"></td><br /> <td colspan="4" class="formErr" align="left" valign="middle"></td><br /></tr><br /><br /></tbody><br /></table><br /></fieldset><br /><br /><!-- Begin Close Background Box --><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div style="font-size: 1px; height: 1px"> </div><br /><!-- End Close Background Box --><br /></span>
Thanks in advance for any suggestions!