I have a form login. Normaly, the chrome save the settings, and each time the user access to that form, the last input values are automatically insert. But in my form, the browser does not behaves like that.
[Edit] : This behavior it is just appending to chrome browser
Follows the HTML code:
<form action="#" class="ac-custom ac-checkbox ac-checkmark" onsubmit="UIAuthetication.prototype.ClickButtonSignedIn(true); return false;">
<div class="username line checkThisDiv">
<input class="input TR_Login_Username" type="text" required="" placeholder="E-mail" mandatory="" vk_15c42="subscribed">
<h6 class="TR_Login_Username">E-mail</h6>
<p class="error_message"></p>
</div>
<div class="password line checkThisDiv">
<input class="input TR_Login_Password" type="password" required="" placeholder="Password" mandatory="" vk_15c42="subscribed">
<h6 class="TR_Login_Password">Password</h6>
<p class="error_message"></p>
</div>
<div class="line line-submit">
<input class="submit right TR_Login_Button" type="submit" value="Login">
<ul>
<li>
<input class="keepSignIn remember" type="checkbox">
<label class="TR_Login_Keep_Me_Signed_In" for="cb6">Remember user</label>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
</ul>
</div>
</form>
So, with the attempt-error method, I discovery if I put ID's to the inputs, the chrome autocomplete will work. I don't know the reason of that, I just know with that, the problem was solve.
Related
<div class="ms-Panel-content content-410">
<div class="panelSubheadingStyle-396">
We recommend you keep only one phone number and one address in your profile
for easy communication.
</div>
<fieldset class="groupedElements-421">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423">Phone number</label>
</legend>
<div class="ms-TextField root-425">
<div class="ms-TextField-wrapper">
<div class="ms-TextField-fieldGroup fieldGroup-426">
<input
type="text"
id="TextField134"
maxlength="15"
class="ms-TextField-field field-427"
aria-label="add phone number"
aria-invalid="false"
value="545465464"
/>
</div>
</div>
</div>
</fieldset>
<h3 class="panelSubheadTitleStyle-397">Address</h3>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>Street address<span class="requiredLabelStyle-419"
> (required)</span
></label
>
</legend>
<div class="ms-TextField root-425">
<div class="ms-TextField-wrapper">
<div class="ms-TextField-fieldGroup fieldGroup-426">
<input
type="text"
id="TextField139"
aria-required="true"
maxlength="100"
class="ms-TextField-field field-427"
aria-label="add street address"
aria-invalid="false"
value="asd"
/>
</div>
</div>
</div>
</fieldset>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>City<span class="requiredLabelStyle-419"> (required)</span></label
>
</legend>
<div class="ms-TextField root-425">
<div class="ms-TextField-wrapper">
<div class="ms-TextField-fieldGroup fieldGroup-426">
<input
type="text"
id="TextField144"
aria-required="true"
maxlength="100"
class="ms-TextField-field field-427"
aria-label="add city"
aria-invalid="false"
value="city input"
/>
</div>
</div>
</div>
</fieldset>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>Country/region of residence<span class="requiredLabelStyle-419"
> (required)</span
></label
>
</legend>
<div class="ms-ComboBox-container dropdownStyle-394">
<div
data-ktp-target="true"
id="ComboBox149wrapper"
class="ms-ComboBox css-437"
>
<input
autocapitalize="off"
autocomplete="off"
aria-autocomplete="inline"
data-ktp-execute-target="true"
data-is-interactable="true"
id="ComboBox149-input"
class="ms-ComboBox-Input css-438"
type="text"
aria-expanded="false"
role="combobox"
aria-label="select your country or region"
aria-describedby="ComboBox149-error"
spellcheck="false"
placeholder="Select a country/region"
data-lpignore="true"
value="Venezuela"
style="font-family: inherit"
/><button
type="button"
class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446"
role="presentation"
data-is-focusable="false"
tabindex="-1"
>
<span
class="ms-Button-flexContainer flexContainer-67"
data-automationid="splitbuttonprimary"
><i
data-icon-name="ChevronDown"
aria-hidden="true"
class="ms-Icon root-32 css-321 ms-Button-icon icon-447"
style="font-family: FabricMDL2Icons"
></i
></span
>
</button>
</div>
</div>
</fieldset>
<fieldset class="groupedElements-436">
<legend class="legendStyle-422">
<label class="ms-Label titleLabelStyle-423"
>State/province<span class="requiredLabelStyle-419"
> (required)</span
></label
>
</legend>
<div class="ms-ComboBox-container dropdownStyle-394">
<div
data-ktp-target="true"
id="ComboBox153wrapper"
class="ms-ComboBox css-437"
>
<input
autocapitalize="off"
autocomplete="off"
aria-autocomplete="both"
data-ktp-execute-target="true"
data-is-interactable="true"
id="ComboBox153-input"
class="ms-ComboBox-Input css-438"
type="text"
aria-expanded="false"
role="combobox"
aria-label="select your state or province"
aria-describedby="ComboBox153-error"
aria-disabled="false"
spellcheck="false"
placeholder="Select a state/province"
data-lpignore="true"
value=""
style="font-family: inherit"
/><button
type="button"
class="ms-Button ms-Button--icon ms-ComboBox-CaretDown-button root-446"
role="presentation"
data-is-focusable="false"
tabindex="-1"
>
<span
class="ms-Button-flexContainer flexContainer-67"
data-automationid="splitbuttonprimary"
><i
data-icon-name="ChevronDown"
aria-hidden="true"
class="ms-Icon root-32 css-321 ms-Button-icon icon-447"
style="font-family: FabricMDL2Icons"
></i
></span
>
</button>
</div>
</div>
</fieldset>
</div>
JAWS is not announcing text field information properly when focusing on 'city' text fields, as Jaws is reading previous field content information (street text box value). JAWS is reading the previous field value. When moved by the down arrow key to the city or street address field. It should only announce the input field value of the field which is focussed and not the field above it.
You are misusing <legend> here. Don't use legend to label the controls inside a fieldset!
Don't put <label> in <legend>. The legend is already a kind of label.
A <fieldset> is primarily a semantic grouping mechanism, labelled by (i.e. "accessibly named by") the (optional) <legend>. The legend labels the entire group, rather than any of its individual "children".
Yes, it is valid to have a fieldset containing only one control (or none at all), but ... why would you want to do this? That just adds complexity, unwelcome chatter (and extra keypresses) to the assistive tech experience of your content. As you have discovered, it also confuses the JAWS screen reader.
Don't be seduced by the default visual appearance of a fieldset. It is not purely presentational - it actually means something, so it will be included in the accessibility tree and will be announced by screen readers - as a group, not as a control.
If you would like to have a presentational box around each control, add some CSS borders to the wrapper divs you have used already.
It might make sense for all these controls to be inside a single fieldset with legend "Contact Info" or something like that.
Then, use <label> elements with for attributes pointing at the id of the relevant control. Typically, the label will appear just before or after the control (or its wrapper div) in the DOM.
The for attribute is how the screen reader knows which label is associated with which control. With the for attribute in place, you can (and should) remove the aria-label attributes entirely. It's always better to use the onscreen label as the accessible name, if possible.
BTW why are your buttons marked as presentational? Why not use semantic HTML instead of ARIA? You've used <fieldset> and <legend>, why not <select>?
I'm trying to make dynamically created checkboxes on a plone temaplate, using tal-repeat. Check the below code for details.
<div tal:define="global pessoa python:view.dados_pessoa()" class="drop-element"></div>
<div class="row m-t-10" tal:repeat="telefone python: pessoa.get('telefones', [])">
<input type="hidden" class="idTelefone" name="telefones.id" value="${python: telefone.get('id', '')}" />
<div class="col s3 grey-text text-darken-1">
<input class="grey-text text-darken-1 tipoTelefone" type="text" name="telefones.tipo" value="${python: telefone.get('tipo', '').capitalize()}" autoComplete="off" readonly />
</div>
<div class="col s5">
<input class="grey-text text-darken-1 numeroTelefone" type="text" name="telefones.numero" value="${python: '(%s) %d' % (telefone.get('ddd', ''), telefone.get('numero', ''))}" autoComplete="false" readonly/>
</div>
<div class="col s2">
<input type="checkbox" id="${python: telefone.get('id', '')}" name="telefones.sms" ${python: 'checked' if telefone.get('sms', '') else ''}>
<label for="${python: telefone.get('id', '')}" class="active fix-label" style="top: 25px !important">SMS</label>
</div>
<div class="input-field m-t-10 col s2">
<button type="button" class="sp_btn right red m-t-05 btn-remover-telefone">Remover</button>
</div>
</div>
Putting it simple, pessoa['telefones'] is a list, that can come with 0 or more dictionaries.
The point here is at the lines:
<input type="checkbox" id="${python: telefone.get('id', '')}" name="telefones.sms" ${python: 'checked' if telefone.get('sms', '') else ''}>
<label for="${python: telefone.get('id', '')}" class="active fix-label" style="top: 25px !important">SMS</label>
As my plone site uses materialize, i need to connect a label to a checkbox via id, else it wont show. Sounds like it will work, since each index on telefone have a unique id. The problem is that when that renders, the ID property is rendered as a string of the TALES expression instead of the expression result, like that:
<input type="checkbox" id="${python: telefone.get('id', '')}" name="telefones.sms">
<label for="2138518" class="active fix-label" style="top: 25px !important">SMS</label>
Why? how can i get around it? Searched on everything i could, and can't find a solution.
what Plone version do you use? I ealier version expressions like ${} didn't exist.
What should work al time is somehing like this:
<input type="checkbox" tal:attributes="id python: telefone.get('id', '')"> name="telefones.sms">
hope that will help you, cheers Maik
I have a pre-form on a Wordpress site (localhost) where users submit their name, email, etc., before continuing to the first part of a multi-page quiz.
The problem is, if I enter any details, Wordpress directs to a 404 page. But if I leave them blank (obviously I want to make these required fields) then it directs to the next page all ok.
I have checked my .htaccess file, Apache settings and followed all the other possible solutions I have found on SO and elsewhere, but nothing I have found fixes the issue.
Here's my code:
<div class="pre-quiz">
<form action="<?php bloginfo('url'); ?>/part-1" method="post">
<div class="form-group row">
<div class="col-xs-6">
<input type="text" class="form-control" name="name" id="name" placeholder="First name">
</div>
<div class="col-xs-6">
<input type="text" class="form-control" name="surname" id="surname" placeholder="Last name">
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="business" id="business" placeholder="Business name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email address">
</div>
<div class="custom-control custom-checkbox custom-control px-4 pb-4 pt-2">
<input type="checkbox" class="custom-control-input" name="terms" id="terms" value="terms">
<label class="custom-control-label" for="terms">
I accept the Terms of Use & Privacy Policy
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block">Next step</button>
</div>
</form>
</div>
Any help would be appreciated.
Thanks
I don`t see any error. Try to name your checkbox not "terms", maybe there is a conflict.
Regards Tom
Tom, I took your idea and tried it with all the other fields to see if Wordpress was using 'name' or 'email' and changed them to something unique - It worked! Thanks again for your input.
I am using Angular Js, in which I am using bootstrap css. I have a ng-repeat added to the form. I have a submit button at the end of page. I have added a required field validation to each of the controls being created in ng-repeat. On click of submit button, if the data is not available in any of the rows in ng-repeat, I am showing a error message. This works fine. However, if there are 20 rows in ng-repeat, and if all are left empty, clicking on submit button is dragging the page, thereby the submit button becomes invisible. I have used the below code:
<link href="/Content/bootstrap.css" rel="stylesheet" />
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="row" ng-repeat="Descriptions in seasonsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<br />
</div>
<br/>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" />
</div>
</div>
Adding screenshot to explain in more:
As you can see, the buttons are getting invisible when the error messages are shown. Is this the correct way to use css and span in ng-repeat. I have tried with setting
style="min-height:100px;"
in the form, but that did not solve it. How to fix this?
Thanks
It could work, but it's much more complicated than it needs to be. Check out angular forms (link below)
<div class="form-group col-md-5">
<textarea name="descriptionValidate_{{$index}}" class="form-control input-md noresize" required="" maxlength="500" ng-model="Descriptions.Description" noresize=""></textarea>
<span style="color: red;" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
It will turn into (styling excluded)
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
https://angular.io/docs/ts/latest/guide/forms.html
There are a number of validation rules built into an Angular input
required
ng-required="{ boolean }"
ng-minlength="{ number }"
ng-maxlength="{ number }"
ng-pattern="{ string }"
ng-change="{ string }">
More on input validation usages: https://docs.angularjs.org/api/ng/directive/input
Hopefully this helps simplify some of your code
I have a form to collect user information which is designed using bootstrap. I am using Kendo UI validation for validating user input.
This is a portion of the form.
Html for the first line of the form.
<div class="col-lg-4">
<div class="form-group">
<label for="FirstName">First Name:</label>
<div class="input-group">
<input type="text" id="FirstName" name="FirstName" class="form-control" placeholder="First name" />
<span class="input-group-addon" id="FirstNameAddon">
<input type="checkbox" id="unkFirstName" value="Unknown" />Unknown
</span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="LastName">Last Name:</label>
<div class="input-group">
<input type="text" id="LastName" class="form-control" placeholder="Last name" />
<span class="input-group-addon" id="LastNameAddon">
<input type="checkbox" id="unkLastName" value="Unknown" /> Unknown
</span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="Initials">Initials:</label>
<div class="input-group">
<input type="text" id="Initials" class="form-control" placeholder="Initials" />
<span class="input-group-addon" id="InitialsAddon">
<input type="checkbox" id="unkInitials" value="Unknown" /> Unknown
</span>
</div>
</div>
</div>
Everything is fine with the layout if there is not validation message. But when there is a validation message layout goes ugly.
How can I make the validation message to span across both input and add-on? How to make the validation message to float on top of the controls so that it won't effect the controls next to it even if message is longer?
Here is the Kendo Dojo http://dojo.telerik.com/ihANu that replicates the issue. Look in full screen http://runner.telerik.io/fullscreen/ihANu
Thank you.
You could try taking it out of the normal flow and overlaying it ontop of the screen so that it didn't disrupt the other elements by adding position: absolute
.k-widget.k-tooltip-validation.k-invalid-msg {
position: absolute;
top: 100%;
left: 0;
}
Demo in Dojo
KyleMit answer is good and one way to do it. I prefer using validator message custom positioning which is Kendo UI validator functionality. U can place validator message where ever u want using single line of html. Just place input id for data-for attribute to connect it to right input element.
<span class="k-invalid-msg" data-for="input-id"></span>