Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Focus on radio button #1250

Open
MGxpwr opened this issue Apr 12, 2018 · 6 comments
Open

Focus on radio button #1250

MGxpwr opened this issue Apr 12, 2018 · 6 comments

Comments

@MGxpwr
Copy link

MGxpwr commented Apr 12, 2018

Hi,

I'm having an issue with Parsley.js.

When the first required field of your form is a radio button (for me its a gender selection) and neither is checked it won't focus on the field when the form is validated.

I don't know if its just me or this is a common thing in Parsley.
@IonBlueDesign
Copy link

Are you using MacOS? If so, make sure that you have "All controls" selected in System > Preferences > Keyboard > Shortcuts "Keyboard".

screen shot 2018-04-19 at 9 22 59 am

@MGxpwr
Copy link
Author

MGxpwr commented Apr 19, 2018

Yes I'm on MacOS but this doesn't seem to fix the solution. The thing is, the form is longer then my viewport.
So when i press the submit button all the way at the bottom parsley will jump to the first error in the form and bringing it in to view. But when the first error is on a radio button it won't jump to the radio button brining it into view.

I can make an screen capture of the issue if needed.

@IonBlueDesign
Copy link

I just tried it, with the radio buttons scrolled outside the viewport, and it works ok for me.

Can you post the code from your HTML page?

@MGxpwr
Copy link
Author

MGxpwr commented Apr 19, 2018 

<form method="post"
                          id="jobmainform"
                          enctype="multipart/form-data"
                          accept-charset="UTF-8"
                          data-parsley-validate
                          data-parsley-excluded="input[type=button], input[type=submit], input[type=reset]"
                          data-parsley-trigger="focusout"
                          data-gaEvent="direct solliciteren,verstuurd,direct solliciteren"
                    >
                        
                        <input type="hidden" name="action" value="easyFlex/form/post">
                        <input type="hidden" name="redirect" value="//localhost:3000/solliciteren/1615347?success=true">
                        <input type="hidden" name="form" value="vacancy">
                                                                                    <input type="hidden" name="refId" value="1615347">

                                                                                                                <input type="hidden" name="referring_party" value="">

                                                                                                                <div class="job-apply__label">Aanhef</div>
                                <div class="job-apply__input job-apply__input--preamble">
                                                                            <input name="preamble"
                                               id="preamble1"
                                               type="radio"
                                               value="20091"
                                                                                                    
                                                                                               required
                                        >
                                        <label for="preamble1">Dhr.</label>
                                                                            <input name="preamble"
                                               id="preamble2"
                                               type="radio"
                                               value="20092"
                                                                                                    
                                                                                               required
                                        >
                                        <label for="preamble2">Mevr.</label>
                                                                                                        </div>

                                                                                                                <input type="hidden" name="initials" id="initials">
                                <noscript>
                                    <label for="initials" class="job-apply__label">Initialen</label>
                                    <div class="job-apply__input job-apply__input--initials">
                                        <input type="text" name="initials" id="initials"
                                               required
                                               value=""
                                               maxlength="6">
                                                                                <span class="ok">
                                           <i class="far fa-check"></i>
                                        </span>
                                        <span class="not-ok">
                                           <i class="far fa-times"></i>
                                        </span>
                                    </div>
                                </noscript>

                                                                                                                <label for="firstName" class="job-apply__label">Naam</label>
                                <div class="job-apply__input job-apply__input--firstName">
                                    <input type="text" name="firstName" id="firstName"
                                           placeholder="Voornaam"
                                           required
                                           value=""
                                           maxlength="12">
                                                                        <span class="ok">
                                       <i class="far fa-check"></i>
                                    </span>
                                    <span class="not-ok">
                                       <i class="far fa-times"></i>
                                    </span>
                                </div>

                                                                                                                <div class="job-apply__input job-apply__input--insertion">
                                    <input type="text"
                                           name="insertion"
                                           id="insertion"
                                           value=""
                                           placeholder="Tussenv."
                                                                                                                                        pattern="^[a-zA-Z\s]+$"
                                                                                                                                        maxlength="10"
                                                                                >
                                                                                                        </div>
                                                                                                                <div class="job-apply__input job-apply__input--lastName">
                                    <input type="text"
                                           name="lastName"
                                           id="lastName"
                                           value=""
                                           placeholder="Achternaam"
                                                                                            required
                                                                                                                                                                                    maxlength="28"
                                                                                >
                                                                                                                <span class="ok">
                                            <i class="far fa-check"></i>
                                        </span>
                                        <span class="not-ok">
                                            <i class="far fa-times"></i>
                                        </span>
                                                                    </div>
                                                                                                                <label for="dateOfBirth" class="job-apply__label">
                                    Geboortedatum
                                    <span>(optioneel)</span>
                                </label>
                                <div class="job-apply__input job-apply__input--dateOfBirth">
                                    <input type="text" name="dateOfBirth" id="dateOfBirth" placeholder="dd-mm-yyyy"
                                           value=""
                                           data-inputmask-alias="dd-mm-yyyy"
                                           pattern="(0[1-9]|(1|2)[0-9]|3[0-1])-(0[1-9]|1[0-2])-[0-9]{4}">
                                                                        <span class="ok">
                                        <i class="far fa-check"></i>
                                    </span>
                                    <span class="not-ok">
                                        <i class="far fa-times"></i>
                                    </span>
                                </div>

                                                                                                                <label for="zipCode" class="job-apply__label">Postcode</label>
                                <div class="job-apply__input job-apply__input--zipCode">
                                    <input type="text"
                                           name="zipCode"
                                           id="zipCode"
                                           value=""
                                           pattern="[0-9]{4}(\s?)[A-z]{2}$"
                                           required
                                           data-parsley-error-message="Dit is geen geldige postcode">
                                                                        <span class="ok">
                                       <i class="far fa-check"></i>
                                    </span>
                                    <span class="not-ok">
                                       <i class="far fa-times"></i>
                                    </span>
                                </div>

                                                                                                                <label for="streetNr" class="job-apply__label">Huisnummer</label>
                                <div class="job-apply__input job-apply__input--streetNr">
                                    <input type="number"
                                           name="streetNr"
                                           id="streetNr"
                                           value=""
                                           pattern="\d+"
                                           min="1"
                                           max="99999"
                                           required
                                           placeholder="Nr."
                                           data-parsley-type="number"
                                    >
                                                                        <span class="ok">
                                        <i class="far fa-check"></i>
                                    </span>
                                    <span class="not-ok">
                                        <i class="far fa-times"></i>
                                    </span>
                                </div>

                                                                                                                <div class="job-apply__input job-apply__input--addition">
                                    <input type="text"
                                           name="addition"
                                           id="addition"
                                           value=""
                                           pattern="^[a-zA-Z\s]+$"
                                           maxlength="7"
                                           placeholder="Toev."
                                           data-parsley-type="alphanum"
                                    >
                                                                        <i id="fa-spinner" class="fas fa-spinner fa-lg"></i>
                                </div>

                                                                                                                <div class="job-apply__hidden">
                                    <label for="address" class="job-apply__label">Straatnaam</label>
                                    <div class="job-apply__input job-apply__input--address">
                                        <input type="text" name="address" id="address" required
                                               pattern="^[a-zA-Z\s]+$"
                                               value=""
                                               maxlength="35">
                                                                                <span class="ok">
                                            <i class="far fa-check"></i>
                                        </span>
                                        <span class="not-ok">
                                            <i class="far fa-times"></i>
                                        </span>
                                    </div>
                                </div>

                                                                                                                <div class="job-apply__hidden">
                                    <label for="city" class="job-apply__label">Woonplaats</label>
                                    <div class="job-apply__input job-apply__input--city">
                                        <input type="text" name="city" id="city" required
                                               value=""
                                               maxlength="35">
                                                                                <span class="ok">
                                            <i class="far fa-check"></i>
                                        </span>
                                        <span class="not-ok">
                                            <i class="far fa-times"></i>
                                        </span>
                                    </div>
                                </div>


                                                                                                                <label for="country" class="job-apply__label">Land</label>
                                <div class="job-apply__input job-apply__input--country">
                                    <input type="text" name="country" id="country" value="Nederland" required
                                           readonly>
                                </div>

                                                                                                                <label for="email" class="job-apply__label">E-mailadres</label>
                                <div class="job-apply__input job-apply__input--email">
                                    <input type="email" name="email" id="email" value=""
                                           required>
                                                                        <span class="ok">
                                        <i class="far fa-check"></i>
                                    </span>
                                    <span class="not-ok">
                                        <i class="far fa-times"></i>
                                    </span>
                                </div>
                                                                                                                <label for="phone" class="job-apply__label">
                                    Telefoonnummer
                                    <span>(optioneel)</span>
                                </label>

                                <div class="job-apply__input job-apply__input--phone">
                                    <input type="text" name="phone" id="phone"
                                           value=""
                                           maxlength="15"
                                           minlength="10">
                                                                        <span class="ok">
                                        <i class="far fa-check"></i>
                                    </span>
                                    <span class="not-ok">
                                        <i class="far fa-times"></i>
                                    </span>
                                </div>

                                                                                
                                                                                                                <label for="description" class="job-apply__label">
                                    Opmerking
                                    <span>(optioneel)</span>
                                </label>

                                <div class="job-apply__input job-apply__input--description">
                                <textarea name="description" rows="6" id="description"
                                          maxlength="1000"></textarea>
                                    <i>1000 resterend</i>
                                                                    </div>

                                                                                                                <div class="job-apply__label">
                                    CV
                                    <span>(optioneel)</span>
                                </div>
                                <div class="job-apply__input job-apply__input--cv">
                                    <input type="file" name="cv" id="cv"
                                           data-max-size="5000000"
                                           accept=".pdf,.doc,.docx,.odt,.ott,.odm">
                                    <label for="cv">
                                        <i class="fal fa-upload"></i> Kies een bestand
                                    </label>
                                                                                                                <span class="micro-copy">
                                             <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg">
                                                <use xlink:href="/assets/images/svg/sprite.svg#icon-curve-arrow"></use>
                                            </svg>
                                            Je CV is niet verplicht
                                        </span>
                                                                    </div>

                                                                                                                <div class="job-apply__label">
                                    Foto
                                    <span>(optioneel)</span>
                                </div>
                                <div class="job-apply__input job-apply__input--photo">
                                    <input type="file" name="photo" id="photo"
                                           data-max-size="5000000"
                                           accept=".jpg,.jpeg,.png,.pdf,.gif,.bmp,.tif">
                                    <label for="photo">
                                        <i class="fal fa-upload"></i> Kies een bestand
                                    </label>
                                                                                                                <span class="micro-copy">
                                             <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg">
                                                <use xlink:href="/assets/images/svg/sprite.svg#icon-curve-arrow"></use>
                                            </svg>
                                            Wel zo persoonlijk
                                        </span>
                                                                    </div>

                                                    
                        <div class="job-apply__privacy"><p>Jouw gegevens worden gebruikt voor arbeidsbemiddeling en worden verwerkt overeenkomstig het <a href="//localhost:3000/bijbaan">Nederlandse Privacy Statement</a>. Om je zo goed mogelijk te bemiddelen worden jouw gegevens geautomatiseerd verwerkt en vindt er deels geautomatiseerde besluitvorming plaats. Meer informatie staat in het <a href="//localhost:3000/werkgevers/diensten/detacheren">Privacy Statement</a>.</p></div>

                        <button type="submit" class="button button__primary">
                            Verstuur sollicitatie
                            <i id="fa-spinner" class="fas fa-spinner fa-lg"></i>
                        </button>
                        <span class="micro-copy">
                            <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="/assets/images/svg/sprite.svg#icon-curve-arrow"></use>
                            </svg>
                            En wij doen de rest
                        </span>
                    </form>

@IonBlueDesign
Copy link

IonBlueDesign commented Apr 19, 2018 •
edited

I created a basic HTML page using your form, and it is working for me in Safari. Are you using any front-end frameworks or libraries that may be overriding the behaviour? Here is what I used:

jquery - v3.3.1
parsleyjs - v2.8.1

@MGxpwr
Copy link
Author

MGxpwr commented Apr 19, 2018 •
edited

Im using the following js libraries
jquery - v3.3.1
parsleyjs - v2.8.1
mailcheck - v1.1.1
inputmask - v3.3.11
fontawsome.js - v5.0.10

But even if i turn all of them off it still won't work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MGxpwr @IonBlueDesign