Parsley.js
Parsley.js copied to clipboard
Published
20 hours ago •
guillaumepotier
guillaumepotier
Focus on radio button
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.
Are you using MacOS? If so, make sure that you have "All controls" selected in System > Preferences > Keyboard > Shortcuts "Keyboard".
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.
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?
<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>
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
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