elclanrs / jq-idealforms-old Goto Github PK

View Code? Open in Web Editor NEW

665.0 665.0 95.0 6.24 MB

The ultimate framework for building and validating responsive HTML5 forms.

JavaScript 70.63% Shell 0.11% CSS 29.18% PHP 0.07%

jq-idealforms-old's People

Contributors

Stargazers

Watchers

Forkers

esteban973 first-developer jonahbailey chaimh vjo stevenblack xuanvu kevan dogfood moaxey gspandy devluis bhorsey philod pleunv davide-teamddm dcampbell85 azkie fnarp netconstructor open-source-gis kummerer94 juancarloscruzd korvinszanto aoj cocus-es andreazaupa ca98am79 ramnathv nvdnkpr smillea tadurham aqdct-deploy jasonbogovich srsgores asdi heesienooi tommyent crazyfrogz superspe ronoco subtraktive smartpill mcarv63 zaric gerhobbelt hero76 gijs bigrats johnwaite dennisplucinik xuzhikethinker waldekc is00hcw devgcjayzee bhavik6842 lauren-hu yomigits onsvil marcus-kov tarikcayir msthomaz pramod1988 chu888chu888 zhjsll thomassander alvarogarcia7 pbermejo halison99 komalbandi johnalvn acehlor rbnquintero pegweb sirithink luysx punitvj nickisix amarkanala shaan360 psychodramatic chambita gorhack minghe arrolin arkadiuszsz bpbhat77 iulyus yuxiaojian01 bryant1410 eduardodc-ufcspa jason-cooke forky-mcforkface

jq-idealforms-old's Issues

HTML5 Validation runs on Submit

I noticed a problem yesterday where the Browsers (Chrome) default HTML5 Validation was being run when a button with type='submit' was clicked. Should the <form novalidate> attribute be set by idealforms to prevent this?

-Neville

Don't work correctly e-mail validation

Please try:
[email protected]
my@email.рф

I cant submit the form by post method

I need to submit the form by POST method but the guide doesn't say anything about how i can do that.
I try to add the method param to the form but it still not work:

it looks like submit by GET method.

Making this plugin AMD compliant ?

Hi,

This plugin is awesome, but not that cool when it is question of async loading.

Can you make it AMD compliant ?

Server support

I didn't see a way to invoke errors on external validation, such as server side validation. This would be nice.

stop submitting if error occurs in $.ajax

Hello again elclanrs!

Today I worked on a tricky problem:

I want to send my form data to PayPal but before sending all to the external site, I want to save the hole data in my database like a backup or dummy.

Therefor I tried to use onSuccess with an $.ajax request... but I think onSuccess only checks if the form is valid?
So that doesn't work...

I had the idea to send the form manually if my ajax reqest was successful.
How can i do this?

Thanks for your Time!

Single Field <select> in Popup Menu

Is there a way to allow a single field menu to sit within a small popup window without the responsive functions and extra white space on the right? Also would like to adjust the with of the select menu.

License Type?

Android support (2.2 / 2.4)

Input fields will not validate using Android (2.2 / 2.4)

support for validation by class

This is great. Seems more straightforward than most I've come across.

The one thing it seems to lack which I've been looking for is support for validating fields based on their 'class' instead of the 'name'.

Maybe this is for a good reason, but what I'm trying to put together is a validation function that I can have available site-wide and simple call on a form without knowing the individual field names, which sometimes may be created dynamically. The thing we do have control over is the classes, so we can easily know if an input has class="required email". But it seems that the ideal-forms would not evaluate that where as the previous quickValidate may have.

Do you have any insight or direction?

date datatype not functioning

I am using the date datatype validation and it doesn't appear to be validating as expected.

You can visit: http://prestigedancedfw.com/working_folder/registration.html to see the page and here is the code:

        function addStudent() {
            var newFields = [         
              {
                  name: 'studentDoB',
                  title: 'Date of Birth',
                  filters: 'required date',
                  placeholder: 'mm/dd/yyyy',
                  type: 'text'
              },
              {
                name: 'studentLastName',
                title: 'Last Name',
                filters: 'required name',
                type: 'text'
              },
              {
                name: 'studentFirstName',
                title: 'First Name',
                filters: 'required name',
                type: 'text',
              }
            ]
            $preRegistration.addFields(newFields);          
            return true;
        }

Clicking on the Add Student button produces the expected fields, but the datatype date isn't validated.

Can I validate input from client and then onsuccess validate from server inputs ?

I want first validate inputs from client . after all inputs value OK (onsuccess:) , all input value for check again send to server by ajax .
if problem in values in any field show me error .
I see :
elclanrs/jq-idealforms#33
and
http://jsfiddle.net/elclanrs/BUAHH/

but i want if field on server has invalid , server send name of field and ideal forms show custom error whit flag .

I want do this after submit form and in ' onsuccess ' .

Can i do it ?

Thank you

3 things to perfect plugin

Hi elclanrs,

first of all, it's a great plugin you have here, it looks fantastic!
But for me, there a three things missing so that I can use the plugin on our project on my company and I hope you can do this in one of your next releases.

Your select box looks great, but it have not so much functionality.
We only use this one: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

Because you can filter, multiselect and have groups, so it would be great if I can somehow say your plugin, please leave selectboxes out and I apply the above plugin on selectboxes, but with your validation on it (Icons on the right side and so on)

Can you provide themes for the default jQuery UI themes, because of business rules (I like your style) ;(

An option to use your plugin on a single form without hole tab thing.

And a question, have you tested your plugin in a jQuery dialog that contains an iFrame and in that iFrame is form with your plugin and the validation icons are on the right side of the iFrame so that your fancy tooltips would usealy go outside the iFrame and the dialog, what happens than, because we have so much problems with plugins (tooltip plugins also) use in iFrames.

So, thats all :)

Best regards

Great library

I've been reading about and trying out various validation libraries the past few weeks and they are all over the place. Many older ones appear popular but really are dated in their approach. I've been wavering between trying to use HTML5 validation in markup or specifying the rules etc. in Javascript. I found what looks like a good HTML5 validation shim at https://github.com/dsheiko/HTML5-Form-Shim, which is needed to support mobile browsers as well as older browsers. Then I read about your code on DJS and I'll probably flip and use it.

I'm impressed by the responsive ui implementation as well as the overall level of feedback the user gets, all fairly unobtrusive.

I've only had a quick look so far but have a few questions.

Can we add custom validations.
Is Internationalization support for messages.
The overall validation callback (submit) doesn't appear to include any info on the fields that are invalid. Is that correct.

When testing on my iPad I was unable to click (touch) any checkbox's or radio buttons, which was surprising.

Finally I am a fan of Twitter Bootstrap and it would be nice if the error tips used similar UI styling. No doubt I could do this if I really wanted to, but I admit I find doing lots of CSS hard work.

Anyway great job,
Neville

Dynamic <select>

Hi,

thanks for this wonderful package. I have a question:

I am adding/removing select options dynamically via jQuery based on the selected option of another select input.
Unfortunately the changes do not apply when using jq-idealforms :(

 var selectedOptionOfSelect1 = $("#Select1").val();
    if(selectedOptionOfSelect1 == "foo") {
          $('.bar').remove();
    }

<select id="Select1">
  <option>foo</option>
</select>

<select id="Select2">
  <option class="bar">option to be removed on foo</option>
</select>

Any suggestions?

Customizing IdealForms

I'm a little confused as to how to customize the forms.
I read on your site to edit the basic.less file, which i've tried, but nothing seems to change no matter what i change the default values to. Is there some step i'm missing? This is probably a really simple issue but i cant figure it out.
Thanks

Could you add recaptcha?

Could you add recaptcha?
http://www.google.com/recaptcha

min, max dates

Beyond simple filters, have you thought about adding a min/max value for the date picker object? Right now, I've got the following code (which, of course, doesn't work).

var numStudents = 0;                    
var paymentAmount = 0;
var minDate = new Date();
var maxDate = new Date();

        $newStudent = $('#newStudent').idealforms({
            inputs: {
                'studentFirstName': {
                    filters: 'required name'
                },
                'studentLastName': {
                    filters: 'required name'
                },
                'studentDoB': {
                    filters: 'required date min max',
                    data: {
                        min: minDate.setDate( minDate.getDate() - 730 ),
                        max: maxDate.setDate( maxDate.getDate() + 32850 )
                    }
                },
                'studentNew': {
                    filters: 'required exclude',
                    data: {
                        exclude: ['defaultValue']
                    },
                    errors: {
                        exclude: 'Choose whether your child is new or a returning student.' // Custom error
                    }
                },
                'studentHours': {
                    filters: 'required exclude',
                    data: {
                        exclude: ['defaultValue']
                    },
                    errors: {
                        exclude: 'Choose the number of training hours your child will take.' // Custom error
                    }
                }
            }
        });

<section> breadcrumb removal

Is there a way to remove the breadcrumbs that are attached to the

names?

Inability to use <fieldset> tags

fieldset Tags seem to really mess with the display/formatting of a form. It would be incredibly handy to have the ability to use them to effectively separate forms inside different

tags. For instance, with multi-step registration processes (what I'm working on now), I'm looking to add next buttons with a coda slider to show each section of the form once it's been validated by the ideal forms Jquery object.

BTW, fantastic work on this!

datepicker bug?

When i don't use an input with class="datepicker' my submit buttons text dissapears in Internet Explorer 9.

Is this a bug? For the moment im using a hidden field with class="datepicker" to solve the problem

equalto method problems

I cannot seem to get the equalto method to function properly. I've tried both items below and neither seems to work properly:

Markup:

<form id="pre-registration" method="post" href="scripts/preregistration.php">
            <div class="heading">New User Information</div>
            <div><label>Email Address:</label><input name="username" type="text" /></div>
            <div><label>Password:</label><input name="password" type="password" /></div>
            <div><label>Verify Password:</label><input name="verifyPassword" type="password" /></div>
            <br>

inputs: {
                'username': {
                    filters: 'required email'
                },
                'password': {
                    filters: 'required strongpass'
                },
                'verifyPassword': {
                    filters: 'equalto',
                    data: {
                        equalto: 'password'
                    }
                },

inputs: {
                'username': {
                    filters: 'required email'
                },
                'password': {
                    filters: 'required strongpass'
                },
                'verifyPassword': {
                    filters: 'required equalto',
                    data: {
                        equalto: '#password'
                    }
                },

Input Select Option

Would it be possible to create a select menu with IdealForms that would allow for an input field. I am trying to do something like Pinterest's pinning select menu. Where there is an option to create a new board from the board select menu.

Go to Pinterest, hover over an item and select PinIt. Scroll to the bottom of the select menu to see what I mean.

Thanks

http / https bugs

The url regex doesn't handle 2 letter suffix in the hostname. ex. .us Or more fully: http://canjs.us

Further it doesn't handle components after the hostname such as port: http://canjs.us:8082 and paths, bookmark or query strings: ex. https://github.com/elclanrs/jq-idealforms/issues/new.

This is a good reference: http://en.wikipedia.org/wiki/URI_scheme#Generic_syntax

I've updated it from: regex: /^(?:(ftp|http|https):\/\/)?(?:[\w\-]+\.)+[a-z]{3,6}$/i,
to: regex: /^(?:(ftp|http|https):\/\/)?(?:[\w\-]+\.)+[a-z]{2,6}([\:\/?#].*)?$/i,

to resolve these issue.

-Neville

right to left

when I try using this very nice JS
i have a big problem - i use dir=RTL
the problems are :

the lables are going in the wrong order (thay need to start from the right of the input fields)
the hidden ones for select are showen
please help :)

Using public methods

Hi!

This might be a total noob question... sorry :p

I´m struggling to get access to the public methods. I´m trying to use isValid().
Getting the following error: "Cannot call method 'isValid' of undefined"

Im using jquery a jquery UI dialog button to submit the form (form is loaded in a dialog):

buttons: {
        "Send Form": function() {
        if ($myform.isValid()) { 
            document.form.submit();
            }
        else {
            window.alert('There are errors in the form!');
            } 
        },

made idealforms a variable:

var $myform = $('form').idealforms({
        inputs: { etc...

Also im getting the following error everytime idealforms loads: "Object [object Object] has no method 'updateCounter'"
This disappears when I remove the

markup in the form (which messes up the style).
Have no idea if these errors are related at all, and I´m not suppressed if I messed up somewhere. I´m a totally lost with jquery, but in these times people expect fancy things so I have no choice :)

Any help/tips is much appreciated! Thanks!

File Upload Size

Does it support checking the size or dimensions of media (i.e. 400px x 400px, or 20kb)?

Merge more than one optionsset

Hi elclanrs,

in my work with your plugin there was another feature I miss, this is to merge more than one optionsset, that would be a great help for me.
My scenerio, on one place I automaticly generate an optionSet like this out of C# classes:

var options = {
    inputs: {
     'password': {
       filters: 'required'
     },
     'username': {
        filters: 'required username',
      },
}

Then I can do this and everything is fine:

var $form = $('#my-form');
var $idealform = $form.idealforms(options);

But like I said, the above code is somewhere auto generated and I don't have any possibility to manipulate it later in the process.

Now it would be great if I can somewhere in my page declare manualy:

var options2 = {
    inputs: {
    'date': {
        filters: 'date'
      },
     'username': {
        filters: 'exclude',
        data: {
          exclude: users
        }
      },
}

Do again:

var $form = $('#my-form');
var $idealform = $form.idealforms(options2);

And internaly your plugin is clever enough to handle this, in same way if I had done this:

var options = {
    inputs: {
     'date': {
        filters: 'date'
      },
     'password': {
       filters: 'required'
     },
     'username': {
        filters: 'required username exclude',
        data: {
          exclude: users
        }
      },
}

var $form = $('#my-form');
var $idealform = $form.idealforms(options);

I hope I could explain good enough what I mean.

Best regards

Populate a selectbox on a .change event of another selectbox

Hi elclanrs,

I try to populate a selectbox on a .change event of another selectbox:

$box1 = $("select[name='box1']"); // Selectbox 1
$box2 = $("select[name='box2']"); // Selectbox 2

$box1.change(function() {
$("select[name='box2'] option").remove();
$('John Smith').appendTo($box2);
$('Marry Jones').appendTo($box2);
});

This works fine with 'normal' select boxes but box1 will not populate in idealforms.

But...

When I click on box2 after I clicked on box1 (after populate), the 'required' filter returns ok so there must be a value selected.

I hope you can help.

Thanks!

Richard Hoek

E-mail validation issue

There is a small problem with the e-mail validation Regexp. For example: [email protected] is not invalid and it should be. HTML5 validation flags it as invalid.

Bug with <input type="url" | "email"> elements.

HTML such as:
<input type="url"> and <input type="email">
doesn't currently work.

the fix is to change:
$text = $inputs.filter(':text, :password, textarea'),
to: $text = $inputs.filter(':text, :password, textarea, [type="email"], [type="url"]'),

in: FormInputs = (function () {...

-Neville

IE7

Do you have any guidance/advice for those of us who endeavor to make key features of your library work with IE7 (other than Modernizr)? in particular, the drop-down box hides behind subsequent elements and the text elements won't accept a cursor at all.

Thanks in advance for your time and thanks for this great library, the boss and I really like it.

Pete

Reset Specific Elements Method

This is a feature request for a method to call specific elements within the form to reset them, for instance:

$myForm['myElementName'].reset();

This would be incredible helpful versus using jQuery or javascript to search and find elements.

Is it possible to validate onSubmit only and not onFocus?

Stopping it from validating until the user clicks the submit button would be great. I'm having a lot of fun with your plugin. You have a great eye for details.

Radio button set - JQuery UI, trying to disable?

Hi elclanrs, Im hoping to use this, but looking to leave out the radio button configuration as I'd like to use a JQuery UI style set which fits with the rest of my site.

I have this piece of code for a 3x radio group which is causing an error in firebug a dumping the UI styling of the whole page:

<div class="formRowCont fieldcenter twk" id="jn">
                                            <div id="memstat">
                                                <input type="radio" id="radio1" name="memstat"  checked="checked" />
                                                <label for="radio1">Join as a Fan</label>
                                                <input type="radio" id="radio2" name="memstat" />
                                                <label for="radio2">Partner</label>
                                                <input type="radio" id="radio3" name="memstat" />
                                                <label for="radio3">Property Owner</label>
                                            </div>
                                        </div>

with a typical JQuery UI initialiser for the radio group:
$( "#memstat" ).buttonset();

I presume this is where your option setting "disableCustom" comes in so that I can use the JQuery UI styling?

I have tried it at the following, but is it in the wrong place?

var options = {
        disableCustom: 'radiocheck',
        inputs: {
        'password': {
        filters: 'required pass'
        },
        'username': {
        filters: 'min max required username exclude',
        data: {
        exclude: users,
        min: 5,
        max: 16
        },
        errors: {
        min: 'Create a username with at least <strong>5</strong> characters.',
        max: 'No more than <strong>16</strong> characters allowed.'
        },
        'user_email': {
        filters: 'required email'
        },
        }
        }
        };


        //

        var $joinform = $('#join').idealforms( options );
        $joinform.focusFirst();

The firebug error reads:
TypeError: d is undefined in JQueryUI _1.8.21

and if I comment out the radio group OR the Jquery UI initialisation on the radio set, it works fine.?

There's no simple demo.

I've tried following the directions in the documentation at least 10 times and can't get this plugin to work. Is it possible to add a couple demo.html files to the project to show how to do a simple and complex implementation?

addField() Method with Sections

I know the section elements are new, so you might not have gotten to this yet, but let me put a "bug in your ear". I'm attempting to add another element using the addField() method in the second section. In other words, it would keep adding elements in the array for the seconds step in a process. The problem is when you use the addField() method, it automatically generates the markup put at the end of all sections without the ability to put it in a particular section.

            <section name="Student Information">
            <div>
                <h2>New Student</h2>
                <p>Click Here to add a new Student.</p>
            </div>
            <div><label>&nbsp;</label><button id="addStudentButton" onClick="addStudent();" type="button">Add Student</button>
                <button id="secondStepButton" onClick="secondStep();" type="button">Next Step</button>
            </div>
            </section>
            <section name="Submit Form">
            <div>
                <h2>Thank You</h2>
                <p>You will now be redirected to PayPal for payment.</p>
            </div>
            </section>

function addStudent() {
            var newFields = [
              {
                name: 'studentFirstName',
                title: 'First Name',
                filters: 'required name',
                type: 'text'
              },
              {
                name: 'studentLastName',
                title: 'Last Name',
                filters: 'required name',
                type: 'text'
              }
            ]
            $preRegistration.addFields(newFields);

            return true;
        }

        function secondStep() {

        };

New line in textarea when pressing enter

Hi elclanrs,

Thanks for this excellent plugin!

I have a problem with the textarea.
When I press enter, the cursor will not go to the next line.
If I put an 'alert' in the keyDown event of the textarea, the cursor moves to the next line after pressing 'Ok'.
Is this a bug or is there a standard solution to solve this?
I've searched Google but could not find anything.

thanks

Invalid fields on page load

Can fields marked as required not be marked as invalid until after they've been blurred out of and left empty or the form is submitted before they're filled in? Because at the moment, on first page load the form looks like it has errors before the person has even done anything with it.

I think the visual indicators are great, I just think it would be more friendly for the visitor if the form was a blank slate to start with (except for maybe an indicator on required items).

Show icon when I use "email" without "required".

I'd like to check for a valid email address, but not indicate that it's also required... since indicating it must be a valid email format also infers the field is required. I'm able to remove required and get the desired workflow, but the icon is not being shown.

Items incorrectly show as "fail"

I have a number of elements showing fail, even though, based upon documentation, they should be getting a green checkbox. Instead, they get an exclamation point. The items that get the check are: password, communication, address, address2, city, and state. Any item using the data type "name" or "username" get the exclamation point. Below is my code and markup:

<form id="pre-registration" method="post" href="scripts/preregistration.php">
            <div class="heading">New User Information</div>
            <div><label>User Name:</label><input name="username" type="text" /></div>
            <div><label>Password:</label><input name="password" type="password" /></div>
            <br>
            <div class="heading">Parent Contact Information</div>
            <div><label>First Name:</label><input name="firstname" type="text" /></div>
            <div><label>Last Name:</label><input name="lastname" type="text" /></div>
            <div><label>Address:</label><input name="address" type="text"/></div>
            <div><label>Address 2:</label><input name="address2" type="text" /></div>
            <div><label>City:</label><input name="city" type="text" /></div>
            <div>
                <label>State:</label>
                <select name="state">
                    <option value="Choose a State">Choose a State</option>
                    <option value='AL'>Alabama</option>
                    <option value='AK'>Alaska</option>
                    <option value='AZ'>Arizona</option>
                    <option value='AR'>Arkansas</option>
                </select>
            </div>

            <div><label>Zip Code:</label><input name="zip" type="text" /></div>
            <div><label>Daytime Phone:</label><input name="dayphone" type="text" /></div>
            <div><label>Evening Phone:</label><input name"evephone" type="text" /></div>
            <div>
                <label>Communication:</label>
                <select name="optOut">
                    <option value="1">OK To Email Me</option>
                    <option value="0">Do Not Email Me</option>
                </select>
            </div>
            <!-- Buttons -->
            <!-- Empty label to align with all the other inputs -->
            <div><label>&nbsp;</label><input type="hidden" value="submit" hidden="true"/></div>
            <div><label>&nbsp;</label><button>Submit</button></div> 
        </form>

<script src="js/jquery.idealforms.js"></script>
    <script>
        /* jq-idealforms */
        $preRegistration = $('#pre-registration').idealforms({

            // For consistency all keys
            // must be in quotes
            inputs: {
                'username': {
                    filters: 'required username email'
                },
                'password': {
                    filters: 'required strongpass'
                },
                'firstname': {
                    filters: 'name required'
                },
                'lastname': {
                    filters: 'required name'
                },
                'address': {
                    filters: 'required',
                    data: {
                        min: 4,
                        max: 200
                    }
                },
                'address2': {
                    data: {
                        max: 200
                    }
                },
                'city': {
                    filters: 'required',
                    data: {
                        min: 3,
                        max: 200
                    }
                },
                'state': {
                    filters: 'required exclude',
                    data: {
                        exclude: ['Choose a State']
                    },
                    errors: {
                        exclude: 'Choose a State from the list.' // Custom error
                    }
                },
                'zip': {
                    filters: 'required zip'
                },
                'dayphone': {
                    filters: 'required phone'
                },
                'evephone': {
                    filters: 'required phone'
                },
                'optOut': {
                }
            }
        });

        $preRegistration.focusFirst();


  </script>

JQ-Idealforms with AJAX?

So, I'm currently working on the first of many pages and I've got a listener on my $('username)` object. In my keyup listener, I'm trying to do a query that will call a PHP function to look up the username in the database real time.

What I need to do is to either modify my username object with custom errors or to use the CSS (yet unknown) to modify the field and show it incorrect. Ideally, I can put a custom error in username that would allow me to simply mark it somehow.

Any thoughts?

BTW, here's the javascript for the keyup function:

$userCreation = $('#userCreation').idealforms({
            inputs: {
                'username': {
                    filters: 'required email'
                },
                'password': {
                    filters: 'required strongpass'
                },
                'verifyPassword': {
                    filters: 'equalto required',
                    data: {
                        equalto: '#password'
                    },
                    errors: {
                        equalto: 'Your Passwords Do Not Match.'
                    }
                }
            }
        });

$('#username').keyup( username_check );

        function username_check(){

            var username = $('#username').val();

            if( username == "" || username.length < 4){
// if need be, mark it as bad until the jq-idealforms has said it's "good"
            } else {
                jQuery.ajax({
                   type: 'POST',
                   url: 'scripts/check_user.php',
                   data: 'username='+ username,
                   cache: false,
                   success: function( response ) {
                        if(response == 1){
// code for marking the username object as bad
                        } else {
// code for marking the username object good
                            }
                        }
                });
            }

Add fields after intialization?

Is it possible to add fields after idealforms initailization?

I am adding some checkboxes through ajax. And if they click the checkbox i wanted to add a file input.

<select> information reporting data one value "off" from array

This is interesting. When submitting a form:

<div>
                <label>State:</label>
                <select id="parentState" name="parentState">
                    <option value="Choose a State">Choose a State</option>
                    <option value='AL'>Alabama</option>
                    <option value='AK'>Alaska</option>
                    <option value='AZ'>Arizona</option>
                    <option value='AR'>Arkansas</option>
                    <option value='CA'>California</option>
                    <option value='CO'>Colorado</option>
                    <option value='CT'>Connecticut</option>
                    <option value='DE'>Deleware</option>
                    <option value='DC'>District of Columbia</option>
                    <option value='FL'>Florida</option>
                    <option value='GA'>Georgia</option>
                    <option value='HI'>Hawaii</option>
                    <option value='ID'>Idaho</option>
                    <option value='IL'>Illinois</option>
                    <option value='IN'>Indiana</option>
                    <option value='IA'>Iowa</option>
                    <option value='KS'>Kansas</option>
                    <option value='KY'>Kentucky</option>
                    <option value='LA'>Louisiana</option>
                    <option value='ME'>Maine</option>
                    <option value='MD'>Maryland</option>
                    <option value='MA'>Massachusetts</option>
                    <option value='MI'>Michigan</option>
                    <option value='MN'>Minnesota</option>
                    <option value='MS'>Mississippi</option>
                    <option value='MO'>Missouri</option>
                    <option value='MT'>Montana</option>
                    <option value='NE'>Nebraska</option>
                    <option value='NV'>Nevada</option>
                    <option value='NH'>New Hampshire</option>
                    <option value='NJ'>New Jersey</option>
                    <option value='NM'>New Mexico</option>
                    <option value='NY'>New York</option>
                    <option value='NC'>North Carolina</option>
                    <option value='ND'>North Dakota</option>
                    <option value='OH'>Ohio</option>
                    <option value='OK'>Oklahoma</option>
                    <option value='OR'>Oregon</option>
                    <option value='PA'>Pennsylvania</option>
                    <option value='RI'>Rhode Island</option>
                    <option value='SC'>South Carolina</option>
                    <option value='SD'>South Dakota</option>
                    <option value='TN'>Tennessee</option>
                    <option value='TX'>Texas</option>
                    <option value='UT'>Utah</option>
                    <option value='VT'>Vermont</option>
                    <option value='VA'>Virginia</option>
                    <option value='WA'>Washington</option>
                    <option value='WV'>West Virginia</option>
                    <option value='WI'>Wisconsin</option>
                    <option value='WY'>Wyoming</option>
                </select>
            </div>

I get a value for <option value='TX'>Texas</option coming through as 'UT' in the $_POST['parentState]' field. Any thoughts?

hidden inputs

Hello elclanrs,

jq-idealforms is such a great plugin!

But I have a question:
Is there a possibility to create a hidden field with the add Fields function ?

Is is possible to nest form elements?

Hi, I have a two part question:

Is it possible to nest form input elements such that multiple input elements get bundled into a row as well as validate together?

A good example would be a row where a user is asked for their "city", " state", and "zip". The corresponding validation message would correspond to the entire row and not just individual elements. (e.g. "City, State, and Zip are required")

Is it possible to nest checkboxes?

An example would be having a checkbox that expands to show nested checkboxes when clicked, it would also check all or uncheck all when clicked.

This is an awesome plugin, and I know these are some rather unique use-cases but just curious if you handle that or if its on the roadmap to handle it.

Thanks!

Limit to Number of forms on a page?

I've reconsidered the way that I was processing these forms. It's proven too cumbersome to use the <section> capability. Instead, I'll use multiple forms on a page and submit the information directly to my database in small chunks through AJAX.

In doing that, there are at least 4 distinct forms that I'll need to put on a page:
user creation
parent information
student information
billing information

Given that, I've got a bit of code that absolutely will not process and I'm curious if there's an arbitrary number that I'm running into the limits on.

Here's what I've got:

    <div class="grid_12">
        <form id="userCreation" method="post" href="scripts/add_user.php">
            <div>
                <h2>New User Information</h2>
                <p>If you are a new user, please enter your email address, and a password.</p>
            </div>
            <div><label>Email Address:</label><input id="username" name="username" type="text" /></div>
            <div><label>Password:</label><input id="password" name="password" type="password" /></div>
            <div><label>Verify Password:</label><input id="verifyPassword" name="verifyPassword" type="password" /></div>
            <div><label>&nbsp;</label><button id="nextButton" onClick="userCreation();" type="button">Submit New User</button></div>
        </form>
    </div>
    <div class="clear"></div>
    <div class="grid_12">
        <form id="parentInformation" method="post" href="scripts/add_parent.php">
            <div>
                <h2>Parent/Guardian Information</h2>
                <p>This will be used as the contact information for the students.</p>
            </div>
            <div><label>First Name:</label><input id="parentFirstName" name="parentFirstName" type="text" /></div>
            <div><label>Last Name:</label><input id="parentLastName" name="parentLastName" type="text" /></div>
            <div><label>Address:</label><input id="parentAddress" name="parentAddress" type="text"/></div>
            <div><label>Address 2:</label><input id="parentAddress2" name="parentAddress2" type="text" /></div>
            <div><label>City:</label><input id="parentCity" name="parentCity" type="text" /></div>
            <div>
                <label>State:</label>
                <select id="parentState" name="parentState">
                    <option value="Choose a State">Choose a State</option>
                    <option value='AL'>Alabama</option>
                    <option value='AK'>Alaska</option>
                    <option value='AZ'>Arizona</option>
                    <option value='AR'>Arkansas</option>
                    <option value='CA'>California</option>
                    <option value='CO'>Colorado</option>
                    <option value='CT'>Connecticut</option>
                    <option value='DE'>Deleware</option>
                    <option value='DC'>District of Columbia</option>
                    <option value='FL'>Florida</option>
                    <option value='GA'>Georgia</option>
                    <option value='HI'>Hawaii</option>
                    <option value='ID'>Idaho</option>
                    <option value='IL'>Illinois</option>
                    <option value='IN'>Indiana</option>
                    <option value='IA'>Iowa</option>
                    <option value='KS'>Kansas</option>
                    <option value='KY'>Kentucky</option>
                    <option value='LA'>Louisiana</option>
                    <option value='ME'>Maine</option>
                    <option value='MD'>Maryland</option>
                    <option value='MA'>Massachusetts</option>
                    <option value='MI'>Michigan</option>
                    <option value='MN'>Minnesota</option>
                    <option value='MS'>Mississippi</option>
                    <option value='MO'>Missouri</option>
                    <option value='MT'>Montana</option>
                    <option value='NE'>Nebraska</option>
                    <option value='NV'>Nevada</option>
                    <option value='NH'>New Hampshire</option>
                    <option value='NJ'>New Jersey</option>
                    <option value='NM'>New Mexico</option>
                    <option value='NY'>New York</option>
                    <option value='NC'>North Carolina</option>
                    <option value='ND'>North Dakota</option>
                    <option value='OH'>Ohio</option>
                    <option value='OK'>Oklahoma</option>
                    <option value='OR'>Oregon</option>
                    <option value='PA'>Pennsylvania</option>
                    <option value='RI'>Rhode Island</option>
                    <option value='SC'>South Carolina</option>
                    <option value='SD'>South Dakota</option>
                    <option value='TN'>Tennessee</option>
                    <option value='TX'>Texas</option>
                    <option value='UT'>Utah</option>
                    <option value='VT'>Vermont</option>
                    <option value='VA'>Virginia</option>
                    <option value='WA'>Washington</option>
                    <option value='WV'>West Virginia</option>
                    <option value='WI'>Wisconsin</option>
                    <option value='WY'>Wyoming</option>
                </select>
            </div>            
            <div><label>Zip Code:</label><input id="parentZip" name="parentZip" type="text" /></div>
            <div><label>Daytime Phone:</label><input id="parentDayPhone" name="parentDayPhone" type="text" /></div>
            <div><label>Evening Phone:</label><input id="parentEvePhone" name"parentEvePhone" type="text" /></div>
            <div>
                <label>Communication:</label>
                <select name="optOut">
                    <option value="1">OK To Email Me</option>
                    <option value="0">Do Not Email Me</option>
                </select>
            </div>
            <div><label>&nbsp;</label><button id="nextButton" onClick="firstStep();" type="button">Next Step</button></div>
        </form>
    </div> <!-- end grid_12 -->
    <div class="clear"></div>
    <div class="grid_12">
        <form id="newStudent" method="post" href="scripts/billing.php">
            <div>
                <h2>New Student</h2>
                <p>Click Here to add a new Student.</p>
            </div>
            <div>
                <label>&nbsp;</label>
                <button id="addStudentButton" onClick="addStudent();" type="button">Add Student</button>
                <button id="resetButton" onClick="resetStudent();" type="button">Reset</button>
                <button id="submitStudentButton" onClick="submitStudent();" type="button">Submit Student</button>
                <button id="secondStepButton" onClick="secondStep();" type="button">Next Step</button>
            </div>
            <div id="studentFirstNameDiv"><label>First Name:</label><input id="studentFirstName" name="studentFirstName" type="text" /></div>
            <div id="studentLastNameDiv"><label>Last Name:</label><input id="studentLastName" name="studentLastName" type="text" /></div>
            <div id="studentDoBDiv"><label>Date of Birth:</label><input id="studentDoB" name="studentDoB" placeholder="mm/dd/yyyy" type="text" /></div>
            <div id="studentNewDiv">
                <label>New Student:</label>
                <select id="studentNew" name="studentNew">
                    <option value="defaultValue">Choose New or Returning</option>
                    <option value="1">Yes, I'm New</option>
                    <option value="0">No, I'm Returning</option>
                </select>
            </div>
            <div id="studentHoursDiv">
                <label>Training Hours:</label>
                <select id="studentHours" name="studentHours">
                    <option value="defaultValue">Choose Number of Hours</option>
                    <option value="1">1 hrs. of Instruction - $70</option>
                    <option value="2">2 hrs. of Instruction - $105</option>
                    <option value="3">3 hrs. of Instruction - $125</option>
                    <option value="4">4 hrs. of Instruction - $145</option>
                    <option value="5">5 hrs. of Instruction - $165</option>
                    <option value="6">6 hrs. of Instruction - $185</option>
                    <option value="7">7 hrs. of Instruction - $210</option>
                    <option value="8">8+ hrs. of Instruction - $240</option>
                </select>
            </div>
        </form>
    </div>
    <div class="clear"></div>
    <div class="grid_12"> 
        <form id="billingInformation">
            <div>
                <h2>Billing Information</h2>
                <p>When you are complete, please click submit to send your information to PayPal for processing.</p>
            </div>
            <div><label>First Name:</label><input id="billingFirstName" name="billingFirstName" type="text" /></div>
            <div><label>Last Name:</label><input id="billingLastName" name="billingLastName" type="text" /></div>
            <div><label>Address:</label><input id="billingAddress" name="billingAddress" type="text"/></div>
            <div><label>Address 2:</label><input id="billingAddress2" name="billingAddress2" type="text" /></div>
            <div><label>City:</label><input id="billingCity" name="billingCity" type="text" /></div>
            <div>
                <label>State:</label>
                <select id="billingState" name="billingState">
                    <option value="Choose a State">Choose a State</option>
                    <option value='AL'>Alabama</option>
                    <option value='AK'>Alaska</option>
                    <option value='AZ'>Arizona</option>
                    <option value='AR'>Arkansas</option>
                    <option value='CA'>California</option>
                    <option value='CO'>Colorado</option>
                    <option value='CT'>Connecticut</option>
                    <option value='DE'>Deleware</option>
                    <option value='DC'>District of Columbia</option>
                    <option value='FL'>Florida</option>
                    <option value='GA'>Georgia</option>
                    <option value='HI'>Hawaii</option>
                    <option value='ID'>Idaho</option>
                    <option value='IL'>Illinois</option>
                    <option value='IN'>Indiana</option>
                    <option value='IA'>Iowa</option>
                    <option value='KS'>Kansas</option>
                    <option value='KY'>Kentucky</option>
                    <option value='LA'>Louisiana</option>
                    <option value='ME'>Maine</option>
                    <option value='MD'>Maryland</option>
                    <option value='MA'>Massachusetts</option>
                    <option value='MI'>Michigan</option>
                    <option value='MN'>Minnesota</option>
                    <option value='MS'>Mississippi</option>
                    <option value='MO'>Missouri</option>
                    <option value='MT'>Montana</option>
                    <option value='NE'>Nebraska</option>
                    <option value='NV'>Nevada</option>
                    <option value='NH'>New Hampshire</option>
                    <option value='NJ'>New Jersey</option>
                    <option value='NM'>New Mexico</option>
                    <option value='NY'>New York</option>
                    <option value='NC'>North Carolina</option>
                    <option value='ND'>North Dakota</option>
                    <option value='OH'>Ohio</option>
                    <option value='OK'>Oklahoma</option>
                    <option value='OR'>Oregon</option>
                    <option value='PA'>Pennsylvania</option>
                    <option value='RI'>Rhode Island</option>
                    <option value='SC'>South Carolina</option>
                    <option value='SD'>South Dakota</option>
                    <option value='TN'>Tennessee</option>
                    <option value='TX'>Texas</option>
                    <option value='UT'>Utah</option>
                    <option value='VT'>Vermont</option>
                    <option value='VA'>Virginia</option>
                    <option value='WA'>Washington</option>
                    <option value='WV'>West Virginia</option>
                    <option value='WI'>Wisconsin</option>
                    <option value='WY'>Wyoming</option>
                </select>
            </div>            
            <div><label>Zip Code:</label><input id="billingZip" name="billingZip" type="text" /></div>
            <div><label>Billing Phone:</label><input id="billingPhone" name="billingPhone" type="text" /></div>
            <div>
                <h2>Thank You</h2>
                <p>Once you click Submit, you will be redirected to PayPal for payment.</p>
                <br>
                <input type='image' name='submit' src='https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif' border='0' align='top' alt='Check out with PayPal'/>
            </div>
        </form>
    </div>

        $userCreation = $('#userCreation').idealforms({
            // For consistency all keys
            // must be in quotes
            inputs: {
                'username': {
                    filters: 'required email'
                },
                'password': {
                    filters: 'required strongpass'
                },
                'verifyPassword': {
                    filters: 'equalto required',
                    data: {
                        equalto: '#password'
                    },
                    errors: {
                        equalto: 'Your Passwords Do Not Match.'
                    }
                }
            }
        });

        $parentInformation = $('#parentInformation').idealforms({
            inputs: {
                'parentFirstName': {
                    filters: 'required name'
                },
                'parentLastName': {
                    filters: 'required name'
                },
                'parentAddress': {
                    filters: 'required',
                    data: {
                        min: 4,
                        max: 200
                    }
                },
                'parentAddress2': {
                    data: {
                        max: 200
                    }
                },
                'parentCity': {
                    filters: 'required',
                    data: {
                        min: 3,
                        max: 200
                    }
                },
                'parentState': {
                    filters: 'required exclude',
                    data: {
                        exclude: ['Choose a State']
                    },
                    errors: {
                        exclude: 'Choose a State from the list.' // Custom error
                    }
                },
                'parentZip': {
                    filters: 'required zip'
                },
                'parentDayPhone': {
                    filters: 'required phone'
                },
                'parentEvePhone': {
                    filters: 'phone'
                },
                'optOut': {
                }
            }
        });

        $billingInformation = $('#billingInformation').idealforms({
            inputs: {
                'billingFirstName': {
                    filters: 'required name'
                },
                'billingLastName': {
                    filters: 'required name'
                },
                'billingAddress': {
                    filters: 'required',
                    data: {
                        min: 4,
                        max: 200
                    }
                },
                'billingAddress2': {
                    data: {
                        max: 200
                    }
                },
                'billingCity': {
                    filters: 'required',
                    data: {
                        min: 3,
                        max: 200
                    }
                },
                'billingState': {
                    filters: 'required exclude',
                    data: {
                        exclude: ['Choose a State']
                    },
                    errors: {
                        exclude: 'Choose a State from the list.' // Custom error
                    }
                },
                'billingZip': {
                    filters: 'required zip'
                },
                'billingPhone': {
                    filters: 'required phone'
                }
            }
        });

        $newStudent = $('#newStudent').idealforms({
            inputs: {
                'studentFirstName': {
                    filters: 'required name'
                },
                'studentLastName': {
                    filters: 'required name'
                },
                'studentDoB': {
                    filters: 'required date'
                },
                'studentNew': {
                    filters: 'required digit exclude',
                    data: {
                        exclude: ['defaultValue']
                    },
                    errors: {
                        exclude: 'Choose whether your child is new or a returning student.' // Custom error
                    }
                },
                'studentHours': {
                    filters: 'required digit exclude',
                    data: {
                        exclude: ['defaultValue']
                    },
                    errors: {
                        exclude: 'Choose the number of training hours your child will take.' // Custom error
                    }
                }
            }
        });

For some reason, the $newStudent information won't process if I put it at the end of my `<script>and if I move it up ahead of the$billingInformation``it will process, but``$billingInformation`` won't. That leads me to believe either I've got a bug I can't find or there's an arbitrary limitation buried somewhere in jQuery, jq-idealforms, or css.

Any help would be greatly appreciated. PS, you can see it here

When I hide icons, unexpected things happen.

If I don't want to use icons I can hide them, but then the validation information bubbles no longer work. In other words, just because I'm hiding the icons doesn't mean I don't want to validate the form.

Also, the space reserved for the icon still exists, and when I type in the correct data format a checkmark appears in the empty area (I would expect if I hide icons, that would include checkmarks).

iPad/mobile support

Great library!

Checkboxes and radios don't respond on iPad. Everything else seems perfect, even the scrolling within dropdown menus. Maybe revert back to default if the iPad user agent crops up?

User-Agent: Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3

radiocheck & ajax

when i load a form via ajax the check and radio don't load the style
and when i make $("input[type=checkbox]).idealradiocheck();
the style make 1 new check over the one exists...

elclanrs / jq-idealforms-old Goto Github PK

jq-idealforms-old's People

Contributors

Stargazers

Watchers

Forkers

jq-idealforms-old's Issues

Recommend Projects

Recommend Topics

Recommend Org