How i can validate DOJO selectOneMenu (required="true") here is some dummy code.
<select required="true" missingMessage="Ooops! You forgot your gender!"
name="gender" id="gender" data-dojo-type="dijit/form/?">
<option disabled="true" value="">Select a Gender</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
Dojo provide 3 type of combobox :
Select
It is simple combobox like select in HTML with no validation and not provide any search facility inside select options.
ComboBox
It is pure form of combobox and name as ComboBox again it will not provide any default validation but it provide search facility within its options.
FilteringSelect
It is an advance form of select have default facility of validation and search facility. And it also has property to take value as input tag take value in HTML.
In dojo you can also try custom validation which is provided inside dojox library.
I hope it will help you.
Related
I am trying to add a currency selector on one of my custom pages where I have displayed the product details.
I want to allow my visitor to change the default currency from this custom page and view the product pricing accordingly.
I have added this code in my custom.tpl
<input type="hidden" name="token" value="{$LANG.go}">
<select name="currency" onchange="submit()" class="form-control">
<option value="">Change Currency (A$ AUD)</option>
{foreach from=$currencies item=listcurr}
<option value="{$listcurr.id}"{if $listcurr.id == $currency.id} selected{/if}>{$listcurr.prefix} {$listcurr.code}</option>
{/foreach}
</select>
</form> ```
But it is not working, every time I select the currency from the dropdown, it refreshes the page. but nothing changes,
please guide what I am doing wrong.
Thanks in advance
Aqsa,
You can do this. You could update your form to either:
Perform a GET request, and add the currency=$id parameter to the URL ($id being the ID for the currency in tblcurrencies.
Or
When your form submits, handle the form input, and set the currency in the session variable:
use WHMCS\Session;
Session::set('currency', $id);
Again, where $id relates to tblcurrencies.id.
Bare in mind that the currency cannot be changed for existing users, and it is not recommended changing their currency after they have made any transactions to avoid accounting/calculation issues.
I have a variety of HTML select elements inside of Nuxt.js. I'm also using Vuelidate for validation and this is working as expected. This is a typical select box in my form:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="{error: appendErrorClass($v.form.location)}"
>
<option :value="null" hidden>Choose...</option>
<option
v-for="(item, index) in $store.state.quotes.data.practiceStates"
:key="index"
:value="item.data">
{{item.display}}
</option>
</select>
Before selecting any of the options, I'm noticing the following on all select fields.
I've tried removing any Vue magic on a test select field to see if the same results happen.
<select id="location1" name="location1">
<option value="" hidden>Choose...</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
Still seeing valid: true. Is there anything I'm overlooking that would cause the validity to default to true? Thanks in advance for any help or guidance on this issue.
UPDATE For Clarification:
Vuelidate validation works just fine. The issue I'm dealing with is the select field property Validity.validate. I only mention Vuelidate to give full context.
HTML Select is a sort of "strange" form element in that validity is typically checking to see if there's a readable value. Since a select always has something picked, it validates...
This is different from say a telephone input that has a specific pattern required to be valid.
I haven't used Vuelidate specifically, but I read the docs as saying, if you left the v-model="form.location" there's a good chance it's simply validating that a value exists so Any selcted item would qualify.
In my original post, I referenced the dynamic style based on the vuelidate library: :class="{error: appendErrorClass($v.form.location)}"
#PierreSaid responded to this post and later deleted his/her reply. Turns out, his response was helpful in pointing me to some Vuelidate attributes that were able to assist in a workaround for my issue. Thank you, PierreSaid.
I have since updated that dynamic class to be a mixin that looks like this:
export default {
methods: {
appendErrorAndValidityClass(field) {
return {
error: field.$error,
invalid: field.$invalid,
};
}
}
};
After importing the mixin into the Vue partial, my select box looks like this:
<select
id="location"
name="location"
v-model="form.location"
#blur="$v.form.location.$touch()"
:class="appendErrorAndValidityClass($v.form.location)"
>
This appends a class of invalid when the select field has not been updated. It also updates the error style accordingly. Now, I can assign styles for when the select field has an invalid class. This solves the overall issue for me. Thanks for your help PierreSaid and Bryce.
I have a dropdown list with two links in angular. it is working with firefox and not working with chrome. is there any compatible issues for angular with chrome?
<div id="SelectField">
<select class="form-control form-control-lg">
<option value="" selected disabled>Select to Deploy Product/Products</option>
<option (click)="Single()">Deploy Single Product</option>
<option (click)="Multiple()">Deploy Multiple Products</option>
</select>
</div>
It is working fine with firefox but in chrome its not activating when we select an option
You can use change event in select tag and set the value of first option as undefined and rest of the options with any string value inside [ngValue]="single".
Here single is a string value which is assigned to that option.
You have to check in the change event with if condition what is passed as a value based on that you can call your respective methods..
Make sure you have to use ngModel in the select and ngValue will be your selected option value
I have the following dynamic xpath:
/html/body[#class='modal-open']/div[#class='container']/form[#id='form_application']/div[#id='interviewContent']/div[#class='modal-dialog']/div[#class='modal-content']/div[#class='modal-body']/div[#id='form_application:interviewContent']/div[#id='form_application:questionDropdown']/select[#id='form_application:j_idt473']
How can I make this unique for Selenium Web Driver? I was going to do a Starts-with method but this is pertaining to a drop down box where the values selected changes with each log in.
Page Source:
<br /><select id="form_application:j_idt473" name="form_application:j_idt473" class="form-control" size="1" style="width:250px;display:inline" onchange="mojarra.ab(this,event,'change','#this','form_application:questionDropdown form_application:dropdown_interview')"> <option value=""></option>
<option value="02">Alaska</option>
<option value="01">Alabama</option>
<option value="05">Arkansas</option>
<option value="60">American Samoa</option>
<option value="04" selected="selected">Arizona</option>
<option value="06">California</option>
""""
You can use css attribute selectors to match partial strings. I would get rid of that super complex xpath and use a contains selector instead to match a substring. Something like this should do the trick...
select[onchange*="form_application:questionDropdown form_application:dropdown_interview"]
As you mentioned in your Question that the xpath is dynamic and the HTML clearly shows the element as a <select> tag so we have to construct our xpath accordingly. I think you were quite right when you spoke about using Starts-with method as looking at the id and name attributes it seems to me though the attributes are dynamic but the string form_application: will be a constant. So we can use the following xpath :
Java
Select city = new Select(driver.findElement(By.xpath("//select[#class='form-control' and starts-with(#id,'form_application:')]")));
city.selectByIndex(2);
Python
select = Select(driver.find_element_by_xpath("//select[#class='form-control' and starts-with(#id,'form_application:')]"))
select.select_by_visible_text("Alabama")
I've populated a multiselect using dojo and added the selected values using combo.set("value", selectedValuesArray);
Problem is that when trying to assert the selected values using selenium IDE, I can't figure out how dojo does to "select" the selected values, I would expect to be like
<option value="111" selected>name</option>
But as you can see in the image, there's no indication in the image, not in the disabled (view) or the enabled (edit) one
There's no CSS classes added either, so i don't know how to assert if the item is selected or not.
Any idea?
Here's the generated HTML
<select data-dojo-attach-event="onchange: _onChange" data-dojo-attach-point="containerNode,focusNode" name="combo_project_participants" multiple="true" class="dijitMultiSelect" tabindex="0" id="dijit_form_MultiSelect_3" widgetid="dijit_form_MultiSelect_3">
<option value="1367">name 0 AdminEdge</option>
<option value="1368">Test User name Test User lname</option>
</select>
EDIT: this didn't allowed me to upload the image...
http://imageshack.us/photo/my-images/850/cf6a.jpg
Add
data-dojo-type="dijit/form/MultiSelect"
in your select-Tag. That should fix it.
For further information look at http://dojotoolkit.org/reference-guide/1.8/dijit/form/MultiSelect.html
Regards