I am working with VUE and VEE-VALIDATE and want to check if an input is an valid decimal with comma as seperator.
My input with regex look like this:
<input type="text" v-model="myDecimal" v-validate:myDecimal="{ regex: /^(\d+|\d+,\d+)$/ }" :class="{'error': errors.has('mydecimal') }" ref="mydecimal" name="mydecimal" />
<span v-show="errors.first('mydecimal')" :class="{'field-validation-error': errors.has('mydecimal') }">NOT CORRECT DECIMAL!</span>
This works quite good for "1", "1,2", "0,4", "12,28761". Perfect!
Errors are displayed correctly for ",0", "foo", "1e". Perfect!
But if I type in the following I get NO error, but I would expect one: "1,1,1" or "1,1foo".
Any ideas what i am doing wrong?? Thanks!
Before (not working example):
<input v-model="myDecimal" v-validate:myDecimal="{ regex:/^([0-9]+|[0-9]+,[0-9]{0,2}?)$/ }" />
After (working example):
<input v-model="myDecimal" v-validate="{ regex:/^([0-9]+|[0-9]+,[0-9]{0,2}?)$/ }" />
Related
I am trying to display two different divs according to a select options, but I am only getting the first v-if. When I select "de", I do get the first div content, but I also get it when I select fr, instead of the second div.
I can't get my head around this. Any ideas of what I am getting wrong?
This goes on inside a form:
<select v-model="source" :key="source">
<option :value="de">de</option>
<option :value="fr">fr</option>
</select><br><br>
<div class="characters">
<div v-if="source === de" class="deChars" :key="source">
<h5>Special German characters:</h5>
<li v-for="character in deChars" :key="character">{{ character }}</li>
</div>
<div v-else-if="source === fr" class="frChars" :key="source">
<h5>Special French characters:</h5>
<li v-for="character in frChars" :key="character">{{ character }}</li>
</div>
<br>
</div>
on the script section I am using the options api with the data property source=" ", and two arrays for deChars and frChars.
note: those :key="source" I added to make sure it gets read when the source value changes.
The data properties:
data(){
return {
original: "",
translation: "",
source: "",
target: "en",
deChars: ["ä", "Ä", "é", "ö", "Ö", "ü", "Ü", "ß"],
frChars: ["à", "â", "ç", "é", "è", "ê", "ë", "î", "ï", "ô", "û", "ü", "œ"]
}
},
Thank you so much!
Try to remove the binding sign since it seems that de and fr are not declared as properties and they're just raw string :
<select v-model="source" >
<option value="de">de</option>
<option value="fr">fr</option>
</select>
then do v-if="source === 'de'" and v-else-if="source === 'fr'"
It seems that the problem was with the select options. THe binding seemed to mess about. Once I got rid of that, it works perfectly. So thanks for that Boussadjra. However, if on the v-if I change the de and fr to strings, it does not work. WHich is why I am adding this comment as the solution.
I have an HTML5 date input element like this:
<input type="date" />
if you choose a date in this input a string will be the value, for example:
"2018-12-31"
In my model I want the date to be presented as the following string:
"2018-12-31T00:00:00.000Z" and not the simplified string.
How do I make sure that the date in my model keeps the correct format? I tried using a computed but since I am in a loop this time I cannot use them.
{{eventDate.date}}
<b-form-input
v-bind:value="eventDate.date"
v-on:input="eventDate.date = $event.target.value"
v-bind:id="'event-day-date-' + index"
size="sm"
type="date"
placeholder="2018-12-31"
>
</b-form-input>
As you can see here the eventDate.date is a long string but the input needs the format YYYY-MM-DD. I need to convert it to and from this format some way.
You could use a filter:
filter: {
dateToString(date) {
return date.toString().substr(0,10)
}
}
and then update your template
:value="eventDate.date | dateToString"
This is what I ended up using:
<input
v-validate="'required'"
v-bind:name="'eventdate-' + index"
v-bind:value="eventDate.date | dateToString"
v-on:input="eventDate.date = $event.target.value + 'T00:00:00.000Z'"
v-bind:id="'event-day-date-' + index"
class="form-control form-control-sm"
type="date"
placeholder="2018-12-31"
/>
Good afternoon , I'm trying to make the following script type " 1" on the site of the field, but I can not ... I'm using the script:
WebBrowser1.Document.All("donatePage:donateForm:amount").SetAttribute("value", "1")
<input id="donatePage:donateForm:amount" name="donatePage:donateForm:amount" size="20" type="text" value="1.00">
<div id="div_12_1_1_1_3_1_2_1_1_1_2" class="Quantity CoachView CoachView_show" data-eventid="" data-viewid="qty" data-config="config12" data-bindingtype="Decimal" data-binding="local.priceBreak.quantity" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.Quantity">
<div class="w-decimal w-group clearfix">
<div class="p-label-container span4">
<div class="p-fields-container controls-row span8 l-input fixed-units">
<input id="div_12_1_1_1_3_1_2_1_1_1_2-in" class="p-field span8" type="text" maxlength="16">
<input id="div_12_1_1_1_3_1_2_1_1_1_2-iu" class="p-unit span4" type="text" maxlength="2" style="display: none;">
<select class="p-unit span4" style="display: none;"></select>
<div class="p-unit span4">CM</div>
<div class="p-help-block"></div>
</div>
<div class="p-fields-container span8 l-output" style="display: none;">
</div>
</div>
<div id="div_12_1_1_1_3_1_2_1_1_1_3" class="Quantity CoachView CoachView_show" data-eventid="" data-viewid="Quantity2" data-config="config73" data-bindingtype="Integer" data-binding="local.priceBreak.numberDeliveries" data-type="com.ibm.bpm.coach.Snapshot_a30ea40f_cb24_4729_a02e_25dc8e12dcab.Quantity">
here how to click on text box of whose id is "div_12_1_1_1_3_1_2_1_1_1_2-in "
but for some scenario its changing to "div_5_1_1_1_3_1_2_1_1_1_2-in "
i have tried with the following ,
driver.findElement(By.xpath("//div/input[ends-with(#id,'__1_1_1_3_1_2_1_1_1_2-in')]")).sendKeys("98989998989");
but it is not working ..
Output:
org.openqa.selenium.InvalidSelectorException: The given selector //div/input[ends-with(#id,'__1_1_1_3_1_2_1_1_1_2-in')] is either invalid or does not result in a WebElement. The following error occurred:
InvalidSelectorError: Unable to locate an element with the xpath expression //div/input[ends-with(#id,'__1_1_1_3_1_2_1_1_1_2-in')] because of the following error:
[Exception... "The expression is not a legal expression." code: "51" nsresult: "0x805b0033 (NS_ERROR_DOM_INVALID_EXPRESSION_ERR)" location: "file:///C:/Users/SUNIL~1.WAL/AppData/Local/Temp/anonymous4157273428687139624webdriver-profile/extensions/fxdriver#googlecode.com/components/driver_component.js Line: 5956"]
Command duration or timeout: 41 milliseconds
For documentation on this error, please visit: http://seleniumhq.org/exceptions/invalid_selector_exception.html
Build info: version: '2.37.0', revision: 'a7c61cb', time: '2013-10-18 17:15:02'
you can try with the following cssSelector,
driver.findElement(By.cssSelector("div.fixed-units > input[id$='in']")).sendKeys("98989998989");
If 'in' text is present always then you can use xpath. You can try //div[contains(#id, 'in')]
ends-with is an XPath 2 query, of which none of the five major actually support v2
Your options are either to use other methods as already suggested, or for an XPath 1 solution you could use:
//div/input[substring(#id, string-length(#id) - 22) = '_1_1_1_3_1_2_1_1_1_2-in']
Although it's ugly, really.
I actually used "starts-with"...but I see you have multiple that start with "div".
If your elements all stay in the same place on the page and aren't subject to change, try this out. Here's some Java code:
By by = By.xpath("(//*[starts-with(#" + attributeName + ", '" + attributeValue + "')])[" + n + "]");
In your case, it would look like this:
By by = By.xpath("(//*[starts-with(#id, 'div')])[2]");
What this will do is pick the second element that starts with "div" in the DOM.
It's a bit of a hack...but it might work out for you.
I'm creating a form elements template file in PHPTAL. I would like to be able to OPTIONALLY pass in an id attribute for a field...
So far the code looks like this:
<xml>
<tal:block metal:define-macro="text">
<label tal:condition="php: !isset(hideLabel) || isset(hideLabel) && !hideLabel">${field/label}</label>
<input name="${name}" type="text" value="${field/value}" />
<p tal:condition="exists:field/error">${field/error}</p>
</tal:block>
</xml>
This works as advertised. What I'd like to add is something, like
<input name="${name}" tal:attributes="id exists: id $id | $name" value="${field/value}" />
to allow me to optionally pass in an id from the METAL call...
Should I be doing it differently? I've tried using PHP: isset(id) ? $id : NULL and variations thereof, but just end up with an id="0" in the resultant HTML.
Any ideas?
In case anyone else needs it, one working answer is:
<xml>
<tal:block metal:define-macro="text">
<label tal:condition="not: exists:hideLabel">${field/label}</label>
<input name="${name}" tal:attributes="id id | nothing" type="text" value="${field/value}" />
<p tal:condition="exists:field/error">${field/error}</p>
</tal:block>
</xml>
Where passed in variables are id, name, an array named field, and hideLabel .
Note, that I've also managed to simplify the label test to something which I believe is more idiomatically TAL.
Set VAR at a DIV containing the soon to be used element:
div class="" tal:define="VAR context.property"
div class="" tal:attributes="class python:'grid_8 omega' if VAR else 'grid_8 alpha'"
in PHP:
<div id="contentCenter" tal:attributes="id
php:isset(variable)&&isset(variable.property)?'IDVALUE':NULL">