I have the following mdl-textfield:
<div class="mdl-textfield mdl-js-textfield" id="step_condition">
<textarea class="mdl-textfield__input" type="text" rows="25"> </textarea>
<label class="mdl-textfield__label" for="step_json">Step condition</label>
</div>
To set the value of the field I use:
$("#step_condition").get(0).MaterialTextfield.change('100');
My questions are:
is this the correct way of setting the value of the field?
is there a similar way to fetch the value of the field?
I know I can fetch the value directly from the textarea, but somehow it seems to make more sense to use the API.
You should add an id to the textarea itself, like:
<div class="mdl-textfield mdl-js-textfield" >
<textarea class="mdl-textfield__input" type="text" rows="25" id="step_json"></textarea>
<label class="mdl-textfield__label" for="step_json">Step condition</label>
</div>
Look at the example on the official specifications, there is no id at the div level. http://www.getmdl.io/components/index.html#textfields-section
To set up the value of the field you could do
$("#step_json").val("100");
However you will have to deal with the fact that the label is not removed automatically. This post should help: https://github.com/google/material-design-lite/issues/903
Related
I've a number field in NinjaForms where I would like to add a suffix (in my case this is a "Name your Price" where I'd like the input number to be followed by currency). I understand I should use an ::after element with content attribute, but I can't help achieving this. Could you help me?
This is the output code:
<div id="nf-field-108-wrap" class="field-wrap number-wrap" data-field-id="108">
<div class="nf-field-label">
<label for="nf-field-108" id="nf-label-field-108" class="">Name your donation <span class="ninja-forms-req-symbol">*</span>
</label>
</div>
<div class="nf-field-element">
<input id="nf-field-108" name="nf-field-108" aria-invalid="false" aria-describedby="nf-error-108" class="ninja-forms-field nf-element" aria-labelledby="nf-label-field-108" required="" type="number" value="50" min="25" max="" step="5">
</div>
</div>
And this is how to field looks like:
I came up with this, not exacly what I wanted but in case of no further ideas I'll share if anyone using Ninja Form would need the same.
This is my css:
#nf-field-108-wrap > div.nf-field-element::after { content:"€" !important;...}
input#nf-field-108 {width: 100px;}
resulting in this:
I have an angular 7 reactive form, input field in this form is to let user see and modify time and then using Save() save it back to our db, the problem is that user can enter any none sense numbers in this field which dose not make sense in terms of Time.(like hours should be 1-24, Minutes 1-60)
My question is how can I validate what user entered into time field and if its valid then let Save btn be active?
Note: Based on my testing even though its none sense time entry but while trying to save its not saving to db and its probably sql not letting that happen.
I googled but i could not find anything, also angular has only email Validators which u can put while defining form.
this is my form defination
timeForm: FormGroup = new FormGroup({
Id: new FormControl(''),
Time: new FormControl(''),
});
and this is my HTML side
<form style="background-color: aliceblue;" [formGroup]="service.timeForm">
<mat-grid-list cols="1" rowHeight="120px">
<mat-grid-tile>
<div class="form-controles-container">
<input type="hidden" formControlName="Id" />
<mat-form-field>
<input formControlName="Time" matInput placeholder="Time" />
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" (click)="Save()">Save</button>
<button mat-raised-button color="warn" (click)="Cancel()">Cancel</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
I need some sort of validation when user punch in any input which dose not make sense in Time my Save btn should not be activated.
I appreciate your help and guideline.
You can use the HTML type="time" or if you want more you can simply use a library like: JsDaddy/ngx-mask found on Github. Use it like this:
HTML with MatInput:
<input formControlName="Time" matInput placeholder="Time" type="time" />
With ngx-mas:
<input formControlName="Time" matInput placeholder="Time" mask="Hh:m0" />
Adding type="time" in all input time type use cases always help.
When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample5">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:
Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.
This will force the label to float above the input, instead of acting as a placeholder.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
For this html code, I want to select an element using CSS.
I need to select "Cvv2 required" by referencing validatedMessage. I was thinking of trying .validateMessage + .Cvv2.required .However, that didn't work. It seems "Cvv2 required" is after "CCNumber required". But I need to reference "validatedMessage" which is inside "CCNumber required". I don't even know thats the proper jargon to explain this relationship....
<div class="CCNumber required">
<label id="label">Credit Card Number:</label>
<input name="test" type="text" class="wrong">
<span class="validatedMessage">Required</span> <br>
</div>
<div class="Cvv2 required">
<a> What's this</a><br>
</div>
This is not currently possible with pure CSS.
You are looking for some kind of "contains" query, which is not available.
https://css-tricks.com/child-and-sibling-selectors/#article-header-id-4
I am doing testing using selenium ide.
My objective is to verify the following
1) Max and Min length property of text boxes.
2) Verify the texts of the labels
My html code is as below:
<div class="control-group">
<label class="control-label" for="input01">Email</label>
<div class="controls">
<input name="data[Salon][username]" class="span4" id="username" placeholder="Username or Email" type="text"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Password</label>
<div class="controls">
<input name="data[Salon][password]" class="span4" id="password" placeholder="Required" type="password"/>
</div>
But in the above I am facing following problems:
a) I have problem in accessing the labels for assertText or assertElementPresent since they are having same class name.
b) I don't know how verify the Max and Min length property of the Text boxes.
And please note that when I am trying to use
document.getElementsByClassName("control-label")
I am getting the following error:
[error] locator not found: document.getElementsByClassName("control-lable"), error = TypeError: e.scrollIntoView is not a function
You can access first label via:
css=div[class='control-group'] label[class='control-label']:contains('Email')
You can access second lavel via:
css=div[class='control-group'] label[class='control-label']:contains('Password')
Use these with command assertElementPresent, "contains" in element locator allows you to verify text in it.
Also you can use xpath:
//div[#class='control-group']//label[#class='control-label'][text()='Email']
//div[#class='control-group']//label[#class='control-label'][text()='Password']
Usually maxlength property is set as attribute of the input, but i can't see it in your html code.. But you can try:
storeAttribute (Selenium IDE's command) and as target you can use xpath:
/div[#class='control-group']//label[#class='control-label'][text()='Email']/#maxlength save it to some var (eg set to the value field smthg like attLength) and then echo this var like: Selenium IDE's command echo and as put to the target field ${attLength}