A javascript framework I wrote

Discussion in 'Programming & Software Development' started by yoink, Oct 20, 2008.

  1. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,484
    Hi Guys,

    I've released a new version! :D Changelog:

    Check the hint (tool-tip) demo here, and the password field validator here :thumbup:
    I didn't have time to make it look like a speech bubble, (CSS is not my strong side), I'd be most grateful if anyone here could do the CSS, and post it here :D

    Also, as usual, download PAX from the download page :)
     
  2. rockuman_ex

    rockuman_ex Member

    Joined:
    Apr 3, 2002
    Messages:
    3,873
    Location:
    Brisbane
    GREAT!!!

    will try the new release! :thumbup::thumbup:
     
  3. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,484
    Release a minor version, changelog:

    24/01/2009 PAX Version 0.89.03 Beta

    Bugs fixed:

    * Display bug with hint in demo page, it was displaying the hint in the overflow, before applying effect

    New features:

    * in the hint system, you now have the ability to use any attribute as the message, from the element, so it is now truly unobtrusive.


    Thanks to MoorKhan for the suggestions :thumbup:
     
  4. rm -rp ./Matt*

    rm -rp ./Matt* Member

    Joined:
    Sep 25, 2008
    Messages:
    621
    Location:
    in the computer
    Hi yoink,
    I'm interested in this PAX software you've designed, I'm looking at realtime(client) form validation the ability to skip certain fields if certain values are entered in others. Can this software handle the latter?

    Also I read that your software is covered under LPGL license. What does this entail? (Edit - seems to be if I edit the source to make it redistributable, is that right?)
     
    Last edited: Aug 18, 2009
  5. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,484
    LGPL = do with it what you want, but if something goes horribly wrong, don't blame me ;)

    Do you mean that you don't want to validate a field if another field is populated already? You can acheive that by creating a custom validator: To add a custom validator, simply define a function in the pax.validate.validators object that takes a field as parameter, and returns true if the value is valid, and false if not. Within this function you can manually call any validations you'd like to perform. See the source in the extended validation example, look for the custom NSW phone validator - simply check the value of your other field in this validator, and return true, if your field is valid, and you don't want to validate any further.
     
    Last edited: Aug 18, 2009
  6. rm -rp ./Matt*

    rm -rp ./Matt* Member

    Joined:
    Sep 25, 2008
    Messages:
    621
    Location:
    in the computer
    Thanks for the help, I think I've got the code written right, but I'm new to javascript/php/html and I'm trying to wrap my head around some of your demo code.

    In the getting started section you embed the javascript in with the html code but in your demo source code you give examples with a .html .js and .php file. I've done the same and put a simple valDict example with a a hint box into a .js file, and then pointed to this file via a <script>... line in the .html file. I'm having no luck with the validation though, are there any other bits I need to add to get these seperate files linked and working?

    Edit- Instead of trying to work out what I'm going on about heres the code:

    HTML
    Code:
    <html>
          <head>
                 <style type='text/css'>@import url( /pax/resource/css/pax_consolidated.css );</style>
                 <script src='/pax/pax_dev.js' type='text/javascript'></script>
          </head>
          <body>
                  <h1>General Information</h1>
             <form name='general_information2' action="general_information2.php" method="post">
                     <label for='reported_age'>Reported Age</label>
                     <input name='reported_age' id='reported_age' type='int' size='2' value='' maxlength="2"/><br/>
                     </br>
                <button type='submit'>Done</button>
             </form>
                 <script src='general_information2.js' type='text/javascript'></script>
          </body>
    </html>
    
    And here's the JS file
    Code:
            pax.validate.validators.age = function( field ) {
                    var validField = true;
                    var age = field
                    if( age < 18 || age > 65)validField = false;
                    return validField;
                    };
    
            valDict = {
                    'reported_age': {
                            mask: [
                                    { mask: 'len', minLen: '2', maxLen: '2' },
                                    { mask: 'age' },
                                    { mask: 'notEmpty' },
                                    { mask: 'numeric' }
                            ],
                            hint: 'Must be between greater or equal to 18 and less than or equal to 65'
                            }
                    };
            pax.load.onloaded( function() {
                    pax.validate.initValidation( 'general_information', valDict );
            } );
    
    So I'm just trying to validate an age field and include a popup telling the user what can be put in the field.
     
    Last edited: Aug 18, 2009
  7. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,484
    Two small problems with your code, you're almost right! try:

    Code:
    	var age = field.value;
    
    and
    Code:
    	pax.validate.initValidation( 'general_information', valDict );
    
    And then it should work :thumbup:
     
  8. rm -rp ./Matt*

    rm -rp ./Matt* Member

    Joined:
    Sep 25, 2008
    Messages:
    621
    Location:
    in the computer
    Bingo! you are da man, and your software is most excellent, time to code.
     
  9. rm -rp ./Matt*

    rm -rp ./Matt* Member

    Joined:
    Sep 25, 2008
    Messages:
    621
    Location:
    in the computer
    hi yoink (or anyone familiar with this pax framework),
    Is there a way to make the default form hints a bit more further to the right? or at least a way to modify each one manually so they are all further to the right? I'm using the simple form style seen here, http://paxjs.com/demo/demo_form.htm Tried putting x and y values in the code but doesn't seem to work.

    And is there a way to make the red "error" form border thicker than it is?
     
  10. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,484
    Post a copy of your code, x and y should work fine.
    For the form fields, override the "invalidField" CSS class.
     
  11. rm -rp ./Matt*

    rm -rp ./Matt* Member

    Joined:
    Sep 25, 2008
    Messages:
    621
    Location:
    in the computer
    Thanks, the red borders worked fine.

    Here are my multiple attempts at moving the hint box, I've tried little changes to each of those two styles to no avail. I also tried changing the default values in pax_dev.js and the hint.widget.js file but it did nothing.

    Code:
    	valDict = 
    		{
    		'v001': {
    	           	mask: [
    				{ mask: 'len', minLen: '15', maxLen: '15' },
    				{ mask: 'notEmpty' },
    				{ mask: 'numeric' }
    		       	],
    			hint: [
    				{hint: 'Must be valid ID Number', x: '20', y: '-70'}
    				],
    			}
              }
    
    Code:
    	valDict = 
    		{
    		'v001': {
    	           	mask: [
    				{ mask: 'len', minLen: '15', maxLen: '15' },
    				{ mask: 'notEmpty' },
    				{ mask: 'numeric' }
    		       	],
    			{hint: 'Must be valid ID Number', x: '20', y: '-70'}
    			}
              }
    
     
  12. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,484
    Aaahhh, they are validation hints! I thought you were using stand alone ones. I will give it a go, and implement the feature, if it doesn't work yet, give me till tomorrow.
     
  13. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,484
    For a quick fix, you could override the "hintMessage" CSS class, simply add this after including pax_consolidated.css:

    HTML:
    <style>.hintMessage { margin-left: 20px; margin-top: -70px }</style>
    Of course this will set the style like that for every hint on the page, which I think you wanted to do anyway?
     
  14. rockuman_ex

    rockuman_ex Member

    Joined:
    Apr 3, 2002
    Messages:
    3,873
    Location:
    Brisbane
    hi yoink, it's been a while since you update pax, any future release with new features (my wishlists)?

    :D

    I've made a few projects based on pax, let me know if you want to see them :D
     
  15. Paul Warren

    Paul Warren Member

    Joined:
    Jul 15, 2002
    Messages:
    2,901
    Location:
    Melbourne, Victoria
    Nice work yoink!

    Want a job? :)
     
  16. rm -rp ./Matt*

    rm -rp ./Matt* Member

    Joined:
    Sep 25, 2008
    Messages:
    621
    Location:
    in the computer
    :D hooray! thanks again yoink!
     
  17. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,484
    Modal, autocomplete, option transfer, CSS selector engine and bug fixes coming up in the next version :)

    Got one already, but always interested in opportunities, PM me if you have any specific ideas.

    No worries, glad to help - send me a link to your work when it's ready :thumbup:

    Edit: also, the hints in validations will be individually configurable in the next version
     
    Last edited: Oct 15, 2009
  18. Paul Warren

    Paul Warren Member

    Joined:
    Jul 15, 2002
    Messages:
    2,901
    Location:
    Melbourne, Victoria
  19. OP
    OP
    yoink

    yoink Member

    Joined:
    Feb 19, 2002
    Messages:
    3,484
    Hi guys,

    Apologies for the late notice - but Im giving a presentation on PAX tonight in Sydney, at the web standards group, at the Australian National Museum (near Hyde park). They do charge $10 for entry, but you get beer and nibblies, plus two presentations, and the chance to chat with interesting people. You must register for the event here: http://webstandardsgroup.org/event/179

    Hope to see you there! - Ill be the dorky guy at the front ;)
     
    Last edited: Nov 11, 2009
  20. n000b

    n000b Member

    Joined:
    Jul 4, 2002
    Messages:
    2,489
    Location:
    Melbourne
    I'm trying to use form validation and I have a number of checkboxes all with the same name (ie "mycheckbox[]"). I need to make sure that at least one option is selected. Just using the notEmpty validation method does not seem to work on checkboxes. Any idea how I can do this?♠
     

Share This Page

Advertisement: