Problem with jQuery Steps and the text input styling

Resolved morialkar
(@morialkar)

8 years, 3 months ago

Hey there, I’ve built a multi-step form using your material design plugin, and it looks awesome but when I add jQuery Steps, the effect on click in a text input disappears, so the label stays right behind the text entered… Can you help me out? Thanks!

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author

(@gusruss89)

Could you please try turning off the “Mask form fields” plugin? Let me know if that fixes your issue or not. If it does, I will look into making my plugin compatible with that one. If it doesn’t, can you confirm that it’s definitely the jQuery steps plugin that is causing the issue?

Also, it looks like you’ve got a stylesheet that is copying all the plugin’s styles, but the plugin styles are still loading. Is this intentional?

You also have 2 different CF7 multi-step forms plugins installed, both of which are loading scripts.

Thanks,
Angus

Thread Starter

morialkar

(@morialkar)

8 years, 3 months ago

Yeah, your plugin works perfectly on a secondary form we built with those plugins. Everything worked with the form input plugin too, it only stoped working once I try removing the multi-step plugin from the code (whilst not removing the plugin itself while I was transferring visuals etc) and switching to a jQuery steps solution. It was working perfectly with the rest of the setup as is until I added jQuery Step to the mix, which is why I say it’s the main culprit.

Plugin Author

GusRuss89

(@gusruss89)

8 years, 3 months ago

I’ve taken a look at the jQuery steps plugin. It looks like the examples on their site are also using the jQuery.validate library. Are you using that as well?

Can you show me your form code?

Thanks,
Angus

Thread Starter

morialkar

(@morialkar)

8 years, 3 months ago

I’m not using the validate plugin, I’m simply building the form as usual with [md-form][/md-form] then simply using the jQuery step for it to show nice, once I arrive at the end, I have a submit button hidden that I click via jQuery when you send the form via the jQuery steps button itself (It’s created by the plugin outside the form so I need this in order for it to work out with the CF7 Ajax sending)

<div id="questionnaire_medical" class="form-question">
    <h1>Renseignements personnels</h1>
    <div class="row">
        <div class="columns small-12 medium-10 small-centered form-question">
            [md-form]
                <p>Lors d’une première visite, il est important de remplir un formulaire nous fournissant l’ensemble des renseignements relatifs à votre état de santé. Pour accélérer le processus, nous vous invitons à remplir le formulaire à la maison:</p>

                [md-radio label="Sexe"]
                    [radio sexe default:1 "M" "F"]
                [/md-radio]

                <div class="row">
                    <div class="columns small-12 medium-6">
                        [md-text label="Prénom"]
                            [text* prenom]
                        [/md-text]
                    </div>

                    <div class="columns small-12 medium-6">
                        [md-text label="Nom"]
                            [text* nom]
                        [/md-text]
                    </div>
                </div>

                [md-text label="Courriel"]
                    [email* courriel]
                [/md-text]

                [md-text label="Adresse complète"]
                    [text* complete-address]
                [/md-text]

                <h4>Téléphone</h4>

                [md-text label="Domicile (123 456-7890)"]
                    [text telephone-domicile class:tel]
                [/md-text]

                [md-text label="Travail (123 456-7890)"]
                    [text telephone-travail class:tel]
                [/md-text]

                [md-text label="Cellulaire (123 456-7890)"]
                    [text telephone-cellulaire class:tel]
                [/md-text]

                [md-text label="Date de naissance"]
                    [date* date-de-naissance class:naissance]
                [/md-text]

                <div class="row">
                    <div class="columns small-12 medium-7">
                        [md-text label="Numéro assurance maladie (AAAA 1234 5678)"]
                            [text* numero-assurance-maladie class:assmal]
                        [/md-text]
                    </div>

                    <div class="columns small-12 medium-5">
                        [md-text label="Date d'expiration (MM/AAAA)"]
                            [text* assurance-maladie-date-expiration class:expass]
                        [/md-text]
                    </div>
                </div>

                [md-text label="Numéro assurance sociale"]
                    [text numero-assurance-social class:asssoc]
                [/md-text]

                [md-checkbox]
                    [checkbox si-vous-avez-moins-de-18-ans class:optional "Avez-vous moins de 18 ans"]
                [/md-checkbox]
                
                [group group-60]
                    <div style="background: #F0EFF5;">
                        <h4>Parent ou Tuteur Légal</h4>
                        <div class="row">
                            <div class="columns small-12 medium-6">
                                [md-text label="Nom du parent ou du tuteur"]
                                    [text* moins-de-18ans-parent-tuteur]
                                [/md-text]
                            </div>

                            <div class="columns small-12 medium-6">
                                [md-text label="Téléphone du parent ou du tuteur"]
                                    [text* telephone-domicile-tuteur class:tel]
                                [/md-text]
                            </div>
                        </div>
                        <h4>En cas d'urgence</h4>
                        <div class="row">
                            <div class="columns small-12 medium-6">
                                [md-text label="Nom de la personne contact"]
                                    [text* urgence-contact-nom]
                                [/md-text]
                            </div>
                            <div class="columns small-12 medium-6">
                                [md-text label="Lien avec le patient"]
                                    [text* urgence-contact-lien]
                                [/md-text]
                            </div>
                            <div class="columns small-12 medium-6">
                                [md-text label="Téléphone principal du contact"]
                                    [text* urgence-contact-tel class:tel]
                                [/md-text]
                            </div>
                        </div>
                        <div class="row">
                            <div class="columns small-12 medium-6">
                                [md-text label="Téléphone cellulaire du contact"]
                                    [text* urgence-contact-tel-cel class:tel]
                                [/md-text]
                            </div>
                        </div>

                    </div>
                [/group]
                
                [md-text label="Raison de la visite"]
                    [text* raison-de-la-visite]
                [/md-text]
[/md-form]
        </div>
    </div>
    
    <h1>Antécédents médicaux</h1>
    <div class="row">
        <div class="columns small-12 medium-10 small-centered form-question">   
[md-form]
                <h4>Veuillez indiquer</h4>
                <div class="row">
                    <div class="columns small-12 medium-6">
                        [md-text label="Poids"]
                            [number* poids]
                        [/md-text]
                        [md-radio label="Unité"]
                            [radio unite-poids "Kg" "Lbs"]
                        [/md-radio]
                    </div>

                    <div class="columns small-12 medium-6">
                        [md-text label="Taille"]
                            [number* taille1]
                        [/md-text]
                        [md-radio label="Unité"]
                            [radio unite-taille "m/cm" "’/“"]
                        [/md-radio]
                    </div>
                </div>

                [md-radio label="Êtes-vous actuellement sous les soins d'un médecin ?"]
                    [radio sous-les-soins-dun-medecin-bool class:optional "Oui" "Non"]
                [/md-radio]
                [group group-322]
                    <div class="optional-child">

                        <div class="row">
                            <div class="columns small-12 medium-6">
                                [md-text label="Nom du médecin"]
                                    [text* nom-du-medecin]
                                [/md-text]
                            </div>

                            <div class="columns small-12 medium-6">
                                [md-text label="Téléphone (123 456-7890)"]
                                    [text* telephone-medecin class:tel]
                                [/md-text]
                            </div>
                        </div>

                        [md-text label="Poste"]
                            [number poste-medecin]
                        [/md-text]

                        [md-textarea label="Si oui, pour quelle raison?"]
                            [textarea* sous-les-soins-dun-medecin-bool-si-oui-raison]
                        [/md-textarea]
                    </div>
                [/group]

                [md-radio label="Prenez-vous présentement des médicaments ou en avez-vous pris au cours des 6 derniers mois ?"]
                    [radio prenez-des-medicament-bool class:optional "Oui" "Non"]
                [/md-radio]
                [group group-323]
                    <div class="optional-child">
                        [md-textarea label="Si oui, lesquels?"]
                            [textarea* prenez-des-medicament-bool-si-oui-lesquels]
                        [/md-textarea]
                    </div>
                [/group]
                [md-radio label="Prenez-vous des produits naturels ou homéopathiques ?"]
                    [radio prenez-des-produits-naturel-homeopthiques-bool class:optional "Oui" "Non"]
                [/md-radio]
                [group group-324]
                    <div class="optional-child">

                        <h4>Produits naturels ou homéopathiques ?</h4>

                        [md-checkbox]
                            [checkbox produit-naturel-homeopathique "Je prends des anovulants (pilule anticonceptionnelle)" "Je prends des hormones"]
                        [/md-checkbox]

                        [md-textarea label="Autres, lesquels?"]
                            [textarea prenez-produits-naturels-homeopathique-si-oui-lesquels]
                        [/md-textarea]
                    </div>
                [/group]
                <h4>Informations supplémentaires</h4>

                <div class="row">
                    <div class="columns small-12 medium-6">
                        [md-radio label="Avez-vous pris ou perdu beaucoup de poids dernièrement ?"]
                            [radio perte-poids-recente "Oui" "Non"]
                        [/md-radio]
                    </div>
                    <div class="columns small-12 medium-6">
                        [md-radio label="Êtes-vous enceinte ?"]
                            [radio etes-enceinte "Oui" "Non"]
                        [/md-radio]
                    </div>
                    <div class="columns small-12 medium-6">
                        [md-radio label="Allaitez-vous ?"]
                            [radio allaitement "Oui" "Non"]
                        [/md-radio]
                    </div>
                    <div class="columns small-12 medium-6">
                        [md-radio label="Souffrez-vous de problème sanguin ?"]
                            [radio probleme-sanguin "Oui" "Non"]
                        [/md-radio]
                    </div>
                    [group group-938]
                        <div class="optional-child">

                            <h4>Problème sanguin</h4>

                            [md-checkbox]
                                [checkbox* problemes-sanguins-other "Hémophilie" "Saignements prolongés" "Sang clair" "Anémie" "Autres, spécifiez"]
                            [/md-checkbox]

                            [md-text label="Spécifiez"]
                                [text anemie-other]
                            [/md-text]
                        </div>
                    [/group]
                </div>
                <h4>Tension artérielle (pression)</h4>

                [md-radio]
                    [radio tension-arteriel-bool default:1 "Normale" "Basse" "Haute"]
                [/md-radio]

                <h4>Avez-vous déjà souffert ou souffrez-vous de :</h4>

                <div class="row">
                    <div class="columns small-12 medium-6">
                        [md-radio label="Troubles cardiaques (infarctus, angine, problème valvulaires, souffle) ..."]
                            [radio trouble-cardiaque "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Infection du coeur (endocardite)"]
                            [radio infection-coeur "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Fièvre rhumatismale"]
                            [radio fievre-rhumatismale "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Rhumes fréquents ou sinusites"]
                            [radio rhumes-frequents "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Tuberculose ou problèmes pulmonaires"]
                            [radio tuberculose "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Troubles digestifs"]
                            [radio troubles-digestifs "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Ulcère d'estomac"]
                            [radio ulcere-estomac "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Reflux gastriques"]
                            [radio reflux-estomac "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Trouble hépatique (hépatite : virus A, B, C; cirrhose au foie, etc.)"]
                            [radio trouble-hepatique "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Troubles rénaux"]
                            [radio troubles-renaux "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Envie fréquente d'uriner"]
                            [radio frequente-urination "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Infection transmissible sexuellement (ITSS)"]
                            [radio its "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Diabète"]
                            [radio diabete "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Douleur chronique"]
                            [radio douleur-chronique "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Douleur à l'articulation de la mâchoire"]
                            [radio douleur-machoire "Oui" "Non"]
                        [/md-radio]
                    </div>
                    <div class="columns small-12 medium-6">
                        [md-radio label="Troubles thyroïdiens"]
                            [radio trouble-thyroidiens "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Chirurgie pour poser ou réparer valve/valvule cardiaque"]
                            [radio valve-cardiaque "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Maladies de la peau"]
                            [radio maladie-de-peau "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Maladies oculaires (yeux)"]
                            [radio maladie-occulaire "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Arthrite"]
                            [radio arthrite "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Troubles du rein"]
                            [radio trouble-rein "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Ostéoporose - comprimés"]
                            [radio osteoporose-comprime "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Ostéoporose - injections annuelle ou mensuelle"]
                            [radio osteoporose-injection "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Épilepsie"]
                            [radio epilepsie "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Maux d'oreilles"]
                            [radio maux-oreilles "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Allergies (Rhume des foins, etc.)"]
                            [radio allergies "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Asthme"]
                            [radio asthme "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Troubles ou maladies du système nerveux"]
                            [radio troubles-nerveux "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Troubles ou maladies psychiatriques"]
                            [radio psychiatriques "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Migraines ou maux de tête fréquents"]
                            [radio migraines "Oui" "Non"]
                        [/md-radio]
                    </div>
                </div>

                <h4>Questions complémentaires</h4>

                <div class="row">
                    <div class="columns small-12 medium-6">
                        [md-radio label="Souffrez-vous d'étourdissements ou d'évanouissements?"]
                            [radio evanouissement "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Fumez-vous ?"]
                            [radio fumez-vous "Oui" "Non"]
                        [/md-radio]
                        [md-text label="Si oui, combien de cigarettes par jour?"]
                            [text fumez-cig]
                        [/md-text]
                        [md-radio label="Êtes-vous un ex-fumeur ?"]
                            [radio ex-fumeur "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Prenez-vous des bisphosphonates"]
                            [radio bisphosphonates "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Êtes-vous atteint de cancer (tumeur) ?"]
                            [radio cancer "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Avez-vous déjà subi des traitements de chimiothérapie ?"]
                            [radio chimio "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Avez-vous déjà subi des traitements de radiothérapie ?"]
                            [radio radiotherapie "Oui" "Non"]
                        [/md-radio]
                        [md-textarea label="Avez-vous d'autres conditions médicales à mentionner? Si oui, indiquez:"]
                            [textarea autre-condition-medicale]
                        [/md-textarea]
                    </div>

                    <div class="columns small-12 medium-6">
                        [md-radio label="Êtes-vous atteint du sida?"]
                            [radio sida "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Êtes-vous séropositif ?"]
                            [radio seropositif "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Avez-vous des prothèses articulaires (hanche, genou, etc) ?"]
                            [radio prothese-articulaires "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Ronflez-vous ou vous a-t-on déjà dit que vous ronfliez?"]
                            [radio ronfler "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Souffrez-vous d'apnée du sommeil?"]
                            [radio apnee "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Souffrez-vous de sécheresse de la bouche ?"]
                            [radio secheresse "Oui" "Non"]
                        [/md-radio]
                    </div>
                </div>

                <h4>Avez-vous déjà eu une réaction allergique ou autre aux produits suivants :</h4>

                <div class="row">
                    <div class="columns small-12 medium-6">
                        [md-radio label="Latex"]
                            [radio allergie-latex "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Aliments"]
                            [radio allergie-aliments "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Iode"]
                            [radio allergie-iode "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Aspirine"]
                            [radio allergie-aspirine "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Sulfamides"]
                            [radio allergie-suflamides "Oui" "Non"]
                        [/md-radio]
                    </div>

                    <div class="columns small-12 medium-6">
                        [md-radio label="Pénicilline"]
                            [radio allergie-penicilline "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Codéine"]
                            [radio allergie-codeine "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Autres antibiotiques"]
                            [radio allergie-autre "Oui" "Non"]
                        [/md-radio]
                        [md-radio label="Anesthésie locale"]
                            [radio allergie-anesthesie "Oui" "Non"]
                        [/md-radio]
                    </div>
                </div>

                [md-text label="Autres spécifiez :"]
                    [text autre-reaction-allergique-other]
                [/md-text]

                <h4>Consommez-vous des drogues ?</h4>

                [md-radio]
                    [radio consommez-des-drogues-bool "Oui" "Non"]
                [/md-radio]

                [md-radio label="Prenez-vous de la méthadone?"]
                    [radio methadone "Oui" "Non"]
                [/md-radio]

                <h4>Consommez-vous de l'alcool ?</h4>

                [md-radio]
                    [radio consommez-vous-de-lalcool "Oui" "Non"]
                [/md-radio]
                [md-text label="Quantité (en verre)"]
                    [text alcool-qte]
                [/md-text]
                [md-radio label="Fréquence (à quelle fréquence consommez-vous la quantité précédemment indiquée?)"]
                    [radio alcool-freq default:1 "Jour" "Semaine" "Mois"]
                [/md-radio]

                <h4>Avez-vous déjà été hospitalisé ou subi des interventions chirurgicales autres que dentaires ?</h4>

                [md-radio]
                    [radio hospitalisez-intervation-chirurgicales class:optional "Oui" "Non"]
                [/md-radio]

                [group group-325]
                    <div class="optional-child">
                        [md-textarea label="Si oui, lequelles et quand ?"]
                            [textarea* hospitalisez-chirurgie-si-oui-et-quand]
                        [/md-textarea]
                    </div>
                [/group]

                <h4>Craignez-vous les traitements dentaires ?</h4>

                [md-radio]
                    [radio craignez-traitement-dentaire default:1 "Un peu" "Beaucoup" "Pas du tout"]
                [/md-radio]

                <h4>Souhaitez-vous discuter de votre santé en privé avec votre dentiste ?</h4>

                [md-radio]
                    [radio discuter-en-prive "Oui" "Non"]
                [/md-radio]

                [md-textarea label="Remarque :"]
                    [textarea remarque]
                [/md-textarea]

[/md-form]
        </div>
    </div>

    <h1>Antécédents dentaires</h1>
    <div class="row">
        <div class="columns small-12 medium-10 small-centered form-question">
[md-form]
                <h4>À quand remonte votre dernière visite ? </h4>

                [md-radio]
                    [radio derniere-visite default:1 "0-6 mois" "6-12 mois" "+ de 12 mois"]
                [/md-radio]

                [md-text label="Traitements reçus"]
                    [text traitement-recus]
                [/md-text]

                [md-radio label="Avec radiographie dentaire panoramique (grande radiographie) ?"]
                    [radio avec-pano "Oui" "Non"]
                [/md-radio]

                [md-radio label="Avec radiographies dentaires intra-orales (petites radiographies) ?"]
                    [radio avec-intra "Oui" "Non"]
                [/md-radio]

                <h4>12. Avez-vous déjà reçu certains des traitements dentaires suivants :</h4>

                <div class="row">
                    <div class="columns small-12 medium-6">
                        [md-checkbox]
                            [checkbox deja-eu-traitement "Démonstration d'hygiène buccale" "Traitement des gencives" "Traitement d'orthodontie" "Traitement de canal" "Obturations" "Couronne(s) et/ou pont"]
                        [/md-checkbox]
                    </div>

                    <div class="columns small-12 medium-6">
                        [md-checkbox]
                            [checkbox deja-eu-traitement-2 "Couronne(s) et/ou pont" "Prothèses complètes et/ou partielles" "Chirurgie buccale ou extractions" "Implants dentaires" "Radiographies dentaires" "Autres"]
                        [/md-checkbox]
                    </div>
                </div>

                <h4> Termes, conditions et signature du présent formulaire </h4>

                [md-accept terms="Je soussigné, déclare avoir lu, compris, m'être renseigné et avoir répondu au questionnaire médicodentaire au meilleur de ma connaissance. Je m'engage par la présente à vous aviser de tout changement à mon état de santé. J'autorise la constitution de mon dossier dentaire, son suivi, ainsi que mon inscription sur la liste de rappel du (des) dentiste(s). On m'a informé que mon dossier sera conservé au cabinet en tout temps et que le (les) dentiste(s) et son (leur) personnel auxiliaire y aura (auront) accès seul(s). On m'a aussi informé de mon droit de consulter mon dossier, d'y demander une rectification et de me retirer de la liste de rappel"]
                    [acceptance termes-et-conditions]
                [/md-accept]

                <h4> Sécurité </h4>
                [recaptcha]

                [md-submit]
                    [submit "Send"]
                [/md-submit]
[/md-form]
        </div>
    </div>
</div>

I tried putting everything in one big md-form but it broke even more things, not sure why…

This reply was modified 8 years, 3 months ago by morialkar.

Plugin Author

GusRuss89

(@gusruss89)

8 years, 3 months ago

Hmm, what happens if you get to the last step with invalid fields on the first step? Do you have to click back through the steps to find all the invalid fields?

Can you try setting the suppressPaginationOnFocus option to false in your jQuery Steps initialization?

https://github.com/rstaib/jquery-steps/wiki/Settings#behaviour

If that works, you’ll probably also want to disable enableKeyNavigation by setting it to false as well.

This reply was modified 8 years, 3 months ago by GusRuss89.

Plugin Author

GusRuss89

(@gusruss89)

8 years, 3 months ago

I think I figured it out.

jQuery steps has a render function that copies all your form’s html and puts it into the step divs. This process loses all the events associated with the html (like the focus event on the input).

To fix this, I think you’ll need to make sure that the jQuery steps code runs before the material design code. You might be able to do this by adjusting the priority on the hooks, or you might even want to include the steps initialization code in a script tag at the bottom of your form. To do this you’d need to ensure the jQuery steps plugin is enqueued in the header (not footer), and in your script tag you’d need to replace $('#questionnaire_medical') with jQuery('#questionnaire_medical').

Hopefully that fixes your issue.

Thanks,
Angus

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Problem with jQuery Steps and the text input styling’ is closed to new replies.