I'm working with a form done using Vuetify and my question is, how can I add a success attribute to the v-text-field once the input has been validated by the :rules?
<v-text-field
v-model="halfPayment.month"
v-mask="'##'"
:rules="[$rules.required, $rules.minCharacters(2), $rules.between(1, 12)]"
label="month expired"
outlined
dense
:success=
background-color="white"
/>
You can add
:success="!!halfPayment.month"
to the text field to show when it successfully passed the validation rules.
I hope this helps, otherwise, you can just drop a comment!
Related
I'm using Angular 6.0.9 and Angular Material 6.5.4. In my form I have an ngFor loop for the inputs with an errorStateMatcher to validate the input.
The problem is that if the content of an input field is invalid, all other fields will also be marked as invalid (even if they are not dirty). I want to make sure that only the current field that is actually invalid is marked as red.
See a self-explanatory example on stackblitz:
https://stackblitz.com/edit/angular-s1jyhw?file=app%2Finput-error-state-matcher-example.html
Your inputs all share the same form control emailFormControl. You need a separate form control for each input. It is okay to use the same ErrorStateMatcher but not FormControl
For fun/practice I write a test for Google advanced search and I am looking for a locator that will allow to find the form submit on https://www.google.com/advanced_search:
<input class="jfk-button jfk-button-action dUBGpe"
style="-webkit-user-select:none;user-select:none;line-height:100%;height:30px;min-width:120px"
value="Wyszukiwanie zaawansowane" type="submit">
As you can see this submit does not have id nor name defined so by.id() or by.name() cannot be used.
by.css locates elements using a CSS selector. It allows you to simply use attribute selectors for locating elements in the DOM.
element(by.css('input[type="submit"]'))
To find the form submit the by.xpath locator can be used:
element(by.xpath("//input[#type='submit']"));
What locator will suite You depends of the whole page, but here are few locators you can try:
element(by.xpath("//input[#class='jfk-button jfk-button-action dUBGpe']"));
element(by.css("jfk-button.jfk-button-action.dUBGpe"));
I'm trying to remove the autocomplete="off" attribute from the input field for the email recipient field
The code of the input field is as follows:
<input
class="ac_input yui-ac-input"
size="96"
id="addressTO1"
title="An"
name="addressTO1"
onkeyup="SE.composeLayout.showAddressDetails(this);"
autocomplete="off" type="text">
Is there a setting that can be accessed via the GUI that changes the behaviour of the email "to" field or what would be the best way to turn on the autocomplete functionality.
Just removing it does not work, as there is some javascript functionality there, that keeps bringing it back.
I'm using suiterCRM version 7.6.5
Sugar Version 6.5.23.
There is no GUI for changing that, the autocomplete=off is hardcoded.
The TO field (addressTO1 dynamically generated name) is not a regular text input field, it will support multiple emails separated by comma, so a autocomplete="email" will not work.
The only solution I could come up with is for you to create a javascript function and attach to the keyup event of the field and show your logic.
Also you will need to save previously filled input with the answers and provide a mechanism to delete that. Not an easy solution I am afraid.
One of our customers wants to add a terms of service page that has to be shown every time a user adds some specific content type, before the add form.
Any suggestions on how to implement this?
If it's a Dexterity content type, you can do this:
Create a custom form with your terms of service. In the form's button handler, redirect to the add form:
self.request.response.redirect(self.context.absolute_url() + '/++add++name.of.content.type')
Now in your type's factory info in portal_types, set the add_view_expr like this:
<property name="add_view_expr">string:${folder_url}/##terms-of-service</property>
so it goes to the custom TOS form when you click the type in the factory menu, instead of directly to the add form.
(Note: a downside of this approach is that if the user enters the URL of the add form directly, they can bypass the TOS form.)
A possible solution could be to use a cookie/session_data_manager/token/you-name-it that on the custom AddForm for that content type checks if exists.
If it doesn't redirect to that Terms of Service form that redirects back to the Addform where, now it will accept to proceed becuase the cookie/session_data_manager/token/you-name-it will be there.
An idea: when you are adding new content types (AT based content types, this will not work for Dexterity ones) you are calling
http://something/createObject?type_name=Document
You can transform the createObject script into an view that display you disclaimer form, with validation on submit.
When user accept the disclaimer you will redirect the use to something like
http://plone4.gest.unipd.it:8080/gest/it/realCreateObject?type_name=Document
where realCreateObject is a copy/paste of the original Plone createObject script.
However: the suggestion of Mathias above is really good: just add a fake checkbox field with a validation.
As mentioned in the comment of the question. I would advise adding a checkbox to the content.
For AT content you can add a BooleanField
...
atapi.BooleanField(
name='acceptConditions',
schemata='default',
required=False,
default=False,
validators=('acceptConditions', ),
widget=atapi.BooleanWidget(
label=_(u'label_accept_conditions', default='Conditions'),
description=_(
u'help_accept_conditions',
default='Please accept the <a target="_blank" '
'href="./conditions_view">'
'conditions<a/>.')
),
)
...
With a condition on the widget (In this case a browser view, which checks if the boolean field should be visible or not).
YourSchema['acceptConditions'].widget.setCondition(
'python: here.restrictedTraverse("##show_condition_field").show()')
I have a form and inside it I have a country/city/etc selection.
The form is inside a zone.
When calling the onSelected for make the change of the country/city, when returning I loose the other form data. How can I keep it ?
I think a zone inside the form would help, but I am getting:
Form components may not be placed inside other Form components.
The Ubigeos type is just a component with other selects that are filled from the pais select
My .tml is
<t:zone t:id="datosPersonalesZone">
<form t:type="form" t:id="formulariodatospersonales" t:zone="datosPersonalesZone">
<t:errors/>
Sexo: <select t:type="Select" t:id="sexo" t:value="actual.sexo" model="sexo" />
País: <input t:type="Select" t:id="pais" model="paises" t:value="pais" t:zone="ubigeosZone"/>
<t:zone t:id="ubigeosZone">
<input t:type="Ubigeos" t:id="ubigeo_nacimiento" t:ubigeo="ubigeoNacimiento" t:zone="ubigeosZone"/>
</t:zone>
</form>
Regards !
You either have to submit a form and process country selection differently (i.e. only updating form contents by returning a block) or try using ideas from FormFragment component and TriggerFragment mixin (probably you can't use them directly but you can try extending them to support select components).
Personally, I go with first option - I have a "SubmitFormOnEvent" mixin and attach it to select-s in the form. Then I found that similar approach is demonstrated at http://jumpstart.doublenegative.com.au/jumpstart/examples/javascript/ajaxselect1 -> so you just can start with that example and update it to your needs.