Forums

Livevalidation framework - thoughts custom validations!

Mizpah 12 Oct, 2009
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!)

<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!
This topic is locked and no more replies can be posted.