I am developing an application using angular dart. I am using angular dart material input for getting input from user.
I have a multiline text input for which I use material input and type="text".
I have made this field "required" but the problem is when the user enters white space or enter, the "required" is gone. I need a attribute where i can specify a constraint that at least one non-white space character must be entered.
How to achieve this?
Here is my code where I have used material input:
<material-input
ngControl="textAnswer" [(ngModel)]="answer" multiline
type="text" label="Your answer" required>
</material-input>
As per documentation you can use all input elements attribute with it.
All of the attributes that can be used with normal <input> and <textarea> elements can be used on elements inside <mat-form-field> as well
So use HTML5 pattern attribute to match the custom pattern(regular expression).
<material-input
ngControl="textAnswer" [(ngModel)]="answer" multiline
pattern="[\s\S]*\S[\s\S]*"
type="text" label="Your answer" required>
</material-input>
[\s\S]*\S[\s\S]* will help to match a string with at least one non-space character.
NOTE : To include all other character use [\S\s] since . doesn't include a newline character.
Related
I'm using "#stripe/stripe-js": "^1.9.0" in nuxt.js app...and must change text in placeholder <input class="InputElement is-empty Input Input--empty" autocomplete="postal-code" autocorrect="off" spellcheck="false" type="text" name="postal" data-elements-stable-field-name="postalCode" inputmode="numeric" aria-label="ZIP" placeholder="ZIP" aria-invalid="false" value=""> from "ZIP" to "ZIP/Postal" according my current task). But official DOC did not help me with it and STRIPE-support did not help me also...any ideas how can I change placeholder?) and also in future I need to change this text by other languages )
instead of using the all-in-one card element, you can place the individual cardNumber, cardExpiry and cardCvc elements to the your own postal input element, of which you can customize the label as you want.
Remember to include the value of postalCode that you collected from your own postal code input element when confirming the payment.
See https://stripe.com/docs/js/element/other_element
So I have this input field with select options, so that the user doesn't have to specify what type of input he has, but the thing is, I want the addonBefore value as a prefix to the input. I thought that's what it will do, but it just passes my input without any prefix.
Here's the code I wrote
<a-input defaultValue="Device/Order ID" v-model="code" v-on:keyup.enter="new_scan">
<a-select slot="addonBefore" defaultValue="device-" style="width: 90px">
<a-select-option value="device-" prefix="device-">Device</a-select-option>
<a-select-option value="order-" prefix="order-">Order</a-select-option>
</a-select>
</a-input>
And even with the prefix it's not working. Is there any way I can make it so that if Device is selected and the user input is 12345, the end input is device-12345?
Thanks in advance!
The page contains a multi-select dropdown (similar to the one below)
The html code looks like the below:
<div class="button-and-dropdown-div>
<button class="Multi-Select-Button">multi-select button</button>
<div class="dropdown-containing-options>
<label class="dropdown-item">
<input class="checkbox">
"
Name
"
</label>
<label class="dropdown-item">
<input class="checkbox">
"
Address
"
</label>
</div>
After testing in firefox developer tools, I was finally able to figure out the xPath needed in order to get the text for a certain label ...
The below XPath statement will return the the text "Phone"
$x("(//label[#class='dropdown-item'])[4]/text()[2]")
The label contains multiple text items (although it looks like there is just one text object when looking at the UI) in the label element. There are actually two text elements within each label element. The first is always empty, the second contains the actual text (as shown in the below image when observing the element through the Firefox developer tool's console window):
Question:
How do I modify the XPath shown above in order to use in Selenium's FindElement?
Driver.FindElement(By.XPath("?"));
I know how to use the contains tool, but apparently not with more complex XPath statements. I was pretty sure one of the below would work but they did not (develop tool complain of a syntax error):
$x("(//label[#class='dropdown-item' and text()[2][contains(., 'Name')]]")
$x("(//label[#class='dropdown-item' and contains(text()[2], 'Name')]")
I am using the 'contains' in order to avoid white-space conflicts.
Additional for learning purposes (good for XPath debugging):
just in case anyone comes across this who is new to XPath, I wanted to show what the data structure of these label objects looked like. You can explore the data structure of objects within your webpage by using the Firefox Console window within the developer tools (F12). As you can see, the label element contains three sub-items; text which is empty, then the inpput checkbox, then some more text which has the actual text in it (not ideal). In the picture below, you can see the part of the webpage that corresponds to the label data structure.
If you are looking to find the element that contains "Name" given the HTML above, you can use
//label[#class='dropdown-item'][contains(.,'Name')]
So finally got it to work. The Firefox developer environment was correct when it stated there was a syntax problem with the XPath strings.
The following XPath string finally returned the desired result:
$x("//label[#class='dropdown-item' and contains(text()[2], 'Name')]")
I have some slightly funky UI for inputting tags for a blog post: as tags are entered into an input field they are wrapped into spans that make them look nice by surrounding them in a stylized box, the end result comes out to be something like this:
http://forr.st/posts/OLs/original
Now, this input field (call it field 1)is not part of the form that gets submitted to the controller (I'm using RoR btw) for two reasons: it contains extraneous html tags, besides the actual tags; also if it was part of the form pressing enter would submit the form instead of triggering the js that wraps the entered tag into a span.
So what I'm doing is when each tag is entered, I copy its value (via js) to a hidden input field that IS part of the tag entry form, and when submitted would contain only the tag values and nothing else. The question is: What should I use as delimiter to separate the tags in the hidden input field. Currently I'm using ';' but if a tag itself contains ; that'd cause problems.
I'm also open to suggestions about the general method of how to keep track of the tags entered into 'field 1'
Thanks a lot,
I would recommend just adding a hidden input for each tag.
<input type="hidden" name="post[tags][]" value="tag_name" />
<input type="hidden" name="post[tags][]" value="tag_name" />
<input type="hidden" name="post[tags][]" value="tag_name" />
then in rails
post.rb
def tags=(value)
tag_array = [*value]
# then just filter these out.
end
I use a similar method with the tokenInput jQuery plugin. But in my case I've placed it inside the form. I solved the problems that you mentioned by capturing the keypress event and preventing it for that input and I ignore the search input value.
The one thing that I really like about keeping it inside the form is how it is managed afterward. I place the hidden tag, name, and a remove 'x' in a span (like you mentioned) and then just remove this tag when the 'x' is clicked. I like this because the name and the hidden_tag are removed at the same time.
Just one other tip. If you can, pass the tag_id in the hidden field. This way you don't have to add the tags attribute add all: <input type="hidden" name="post[tag_ids][]" value="tag_name" />.
I have the following code:
<input type="text" dojoType="dijit.form.NumberTextBox" size=8
constraints="{min:0,max:100000,places:0}"
id="orgNumberOfStudents" name="orgNumberOfStudents"
required="true" invalidMessage="Integer between 0 and 100,000"
value="">
Questions:
1) How do I set the width of the box? Do I have to do it in a style tag or a CSS? Is the traditional "input size" tag ignored?
2) The above sample shows the error when I type in a non-numeric value. But if I tab over the field and don't fill in anything, it's still blank. Is there a quick way to enforce the validation when I click the submit button? Do I need a Dijit submitt button? Do I need to write more JavaScript to make this happen? How does the required="true" actually occur?
(One get-around is to set the value to 0, but I'd rather force the user enter a value rather than just defaulting it).
Thanks,
Neal Walters
You should be able to use both CSS and traditional INPUT attributes like "maxLength" on your NumberTextBox by passing them in to the Widget's constructor. maxLength is available on all dijit.form.TextBox subclasses, but is probably less useful here since you have control over things like min/max and the actual number format.
Yes, you can always write your own JS to test "isValid()" on your widget instance before submission, e.g. in an HTML FORM onSubmit handler, or you could use dijit.form.Form which will check validity for you. The widget itself is only responsible for visual representation of its own validity, according to the options chosen.
HTH