Django An invalid form control with name='' is not focusable - html

I created a Django form that have dropdown in one of the field. When I tried to submit the form without selecting the dropdown item, the form is not submitted because I set in my code that it won't submit unless the form valid using is_valid().
However, it was not showing the validation error message. In the browser console, the is an error message An invalid form control with name='start_position' is not focusable.
I have read some questions about this and they said that it happened because there is a hidden field. After I inspect element, it is true that div class='start_position' is hidden.
However, I don't know how to fix it in Django.
This is the code that create dropdown field.
class LocationForm(forms.Form):
start_position = forms.ModelChoiceField(
required=True,
label="Start Position",
queryset=Location.objects.all()
)
This is the rendered HTML
<div class="formColumn form-group col-md-6 mb-0">
<div id="div_id_start_position" class="form-group">
<label for="id_start_position" class="col-form-label requiredField">
Start Position<span class="asteriskField">*</span>
</label> <div class="">
<select name="start_position" class="select form-control" required="" id="id_start_position" style="display: none;">
<option value="" selected="">---------</option>
<option value="78">Loc 78</option>
<option value="79">Loc 79</option>
<option value="80">Loc 80</option>
</select><div class="nice-select select form-control" tabindex="0">
<span class="current">Loc 78</span>
<ul class="list">
<li data-value="" class="option">---------</li>
<li data-value="78" class="option selected">Loc 78</li>
<li data-value="79" class="option">Loc 79</li>
<li data-value="80" class="option">Loc 80</li>
</ul></div>
</div>
</div>
I want the validation message show like in the other field (I tried DateField and the validation works normally).

Related

Unable to select drop down list in testcafe

I am new to testcafe and JavaScript and unable to select drop down list by select element id.
Above is my html file
<div class="collapse show" id="step-1" style="">
<div class="card card-body pb-0">
<form method="post" class="form-row" id="step-form-1" data- step="2" data-wrapper-key="basic_details">
<div class="form-group col-sm-12 pl-4 pr-4 w-100">
<label for="states">Names of state </label>
<select multiple="" id="states" class="form-control select2-hidden-accessible" label="Names of state"
inputtype="multiselect" required="" options="[object Object]" name="states" tabindex="-1"
aria-hidden="true">
<option value="1">Goa</option>
<option value="2">Punjab</option>
<option value="3">Maharshtra</option>
</form>
</div>
</div>
Here is my js code
test('profile',async t=> {
const selectStates= Selector('#states')
const selectOption=selectStates.find('option');
.click(selectStates)
.click(selectOption.withText('Punjab'))
}
Its not able to even click on drop down button
I am getting error "The element that matches the specified selector is not visible".
I debugged in 0.1x speed and found that the dropdown id is getting clicked but the drop down list is not coming, it keeps showing waiting for element to appear.
In the Select element, multiple="" seems to be the attribute that is triggering the failure
There is an issue with testcafe if multiple="" attribute is provided. So I used some another approach instead of selecting options from drop down if you have a textbox type drop down. You can type the option name and hit enter key so that it gets selected.
test('profile',async t=> {
const selectStates= Selector('#states')
.click(selectStates)
.typeText(selectStates,'Goa')
.pressKey('enter')
.typeText(selectStates,'Punjab')
.pressKey('enter')
.pressKey('esc')
.pressKey('tab')// to go with next selector in the page.
}
)
The above approach worked for me.

Using <p-dropdown> with form control

I think I am having an issue with value binding. I have 2 dropdowns on my page currently. The rest of the page is using PrimeNg for UI and would like to make these dropdowns look the same as the rest of the page. How should I go about making this work.
One dropdown is a supervisor list.
<div class="ui-g form-group">
<label for="supervisors">Supervisors * </label>
<select
class="form-control"
id="supervisors"
required
[(ngModel)]="model.supervisor"
name="supervisor"
>
<option *ngFor="let sup of supervisors" [value]="sup">
{{sup}}
</option>
<div
[hidden]="supervisors.valid || supervisors.pristine"
class="alert alert-danger"
>
Supervisor is required
</div>
</select>
</div>
The other is a leave code list
<div class="ui-g-12 ui-md-1" id="test">
<label for="codes">Leave Codes * </label>
<select
class="form-control"
id="codes"
placeholder="Select Leave Code *"
required
[(ngModel)]="model.code"
name="code"
>
<option *ngFor="let cod of codes" [value]="cod">{{cod}}</option>
</select>
</div>
I have 2 arrays of values being called from my .ts file
supervisors = ['Alex',"Jones",'Joe','Rogan'];
codes = ['Personal Leave','Vacation Leave', 'Sick Leave'];
When I use the tags I just get an empty drop down. I tried just using initially but then I was not able to get the required fields to validate.
Did you import DropdownModule?
import {DropdownModule} from 'primeng/dropdown';
See the documentation, html binding should be
<p-dropdown [options]="supervisorList" [(ngModel)]="supervisor"></p-dropdown>
where supervisorList will be defined as SelectItem in controller and needs to be in a label + value format.
supervisorList: SelectItem[];
this.supervisorList= [
{label: 'Alex', value: 'Alex'},
...
];

(HTML) Do spans not work in select options?

I'm using trying to output options for products in a select dropdown, I'll just include the HTML here:
<div class="form-group">
<label for="optSel">Select Option:</label>
<select class="form-control" id="optSel">
<option selected>Default</option>
<option>Kobalt Battery:$<span id='optPrc_1'>20.00</span></option>
</select>
</div>
Actual output on web page after viewing source is the same except the spans are gone. Visually it looks the same. I need to give that price an ID as it is going to be used to calculate the total cost of a product later.
The id for the span and the value inside of it are output by a PHP script, but that's irrelevant to this problem. Am I not able to use spans in options? Are there no other tags compatible with option? If not I'll have to resort to using regex with using jQuery when I calculate the total.
I'm using a 64 bit WAMP server running PHP 7.0.4 and Apache 2.4.18. I'm also using bootsrap. My question is similar to This one but they're not the same. Thanks.
You can just use value attribute like that :
<div class="form-group">
<label for="optSel">Select Option:</label>
<select class="form-control" id="optSel">
<option selected>Default</option>
<option value="20.00" id="optPrc_1">Kobalt Battery:$20.00</option>
</select>
</div>
And you will be able to get the price later with jQuery by : $('#optPrc_1').val()
Check out this answer to a similar question:
https://stackoverflow.com/a/32661512/2084308
You can do it by using an unordered list:
<ul class="dropdown-menu">
<li>Action <span style='color:red'>like Super Man</span>
</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
The user uses bootstrap but if you don't want to use that, you could style the list to appear like a dropdown using custom css. Unfortunately, the option tags will not allow you to have child tags in them, per your example.
Same as Guilaume's answer, but here is a code snippet to demonstrate.
You can use the option's value attribute.
getOption = function() {
var value = 'N/A',
optNum = document.getElementById('optNumber').value,
option = document.getElementById('optPrc_' + optNum);
if(option && option.value) {
value = option.value;
}
console.log(value);
}
<div class="form-group">
<label for="optSel">Select Option:</label>
<select class="form-control" id="optSel">
<option selected>Default</option>
<option id='optPrc_1' value='20.00'>Kobalt Battery:$20.00</option>
<option id='optPrc_2' value='23.12'>Duracell Battery:$23.12</option>
<option id='optPrc_3' value='9.99'>Bobo Battery:$9.99</option>
</select>
</div>
<br />
<div>
<input type="number" min="1" max="3" value="1" id="optNumber" />
<input type="button" value="Get Option Value" onclick="getOption()" />
</div>

Semantic UI dropdown not able to disable using select input + AngularJS

I'm trying to disable a dropdown depending of a value of a different input. I'm working with Semantic UI and Angular.
This is my HTML
<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
ng-options="option.value as option.text for option in question.options"
ng-model="question.answer"
ng-disabled="!question.isEnable">
</select>
And this is how is rendered
<div class="ui search dropdown ng-pristine ng-untouched ng-valid selection">
<select ng-attr-id="{{'dd-' + question.id}}" ng-options="option.value as option.text for option in question.options" ng-model="question.answer" ng-disabled="!question.c_questionIsEnable" id="dd-483" disabled="disabled">
<option value="" class="" selected="selected"></option>
<option label="Yes" value="string:213">Yes</option>
<option label="No" value="string:214">No</option>
<option label="Does not apply" value="string:547">Does not apply</option>
</select>
<i class="dropdown icon"></i><input class="search" autocomplete="off" tabindex="0">
<div class="text"></div><div class="menu transition hidden" tabindex="-1">
<div class="item selected" data-value="string:213">Yes</div>
<div class="item" data-value="string:214">No</div>
<div class="item" data-value="string:547">Does not apply</div>
</div>
</div>
As you can see in the rendered code the disabled attribute is present in the <select>,
nevertheless the dropdown is not disabled. Reading the Semantic UI docs, there is a way to set a dropdown in a disable state using the css class disabled but is not working either (the css class is added to the <select>)
HTML code with using class
<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
ng-options="option.value as option.text for option in question.options"
ng-model="question.answer"
ng-class="{'disabled': !question.isEnable}">
</select>
Indeed, the class disabled is added to the select input but the dropdown is not disabled, using Chrome Dev Tools, the element gets disabled if I add the class in the following line
<div class="ui search dropdown ng-pristine ng-untouched ng-valid selection disabled">
Is there a way for make this work using <select>?.
Thanks in advance.
There is an easy way to do this.
Wrapping the in a with the field css class, and use the ng-class attribute in there.
Hope this could help.
<div class="ui field" ng-class="{'disabled': !question.isEnable }">
<select class="ui search dropdown" ng-attr-id="{{'dd-' + question.id}}"
ng-options="option.value as option.text for option in question.options"
ng-model="question.answer">
</select>
</div>

enable checkbox with id only

I want to fill a HTML form, I am using mechanize module of python.
my HTML code is like that for checkbox and dropdown is :
<div id="post_cd">
<input role="checkbox" id="cd_info" class="cbox" type="checkbox">
<span class="s-iso" style="display:none"></div>
<label for="type" id="cdtype" class="cd" style="width:60px;margin:1px;float:left;text-align:right;">CD type:</label>
<select id='cdtype' class=" ui-iso" style="width:100px;margin:1px;float:left;">
<option value="CD1">Error1</option>
<option value="CD2">Error1</option>
<option value="CD3">Error2</option>
</select>
I have tried with following but getting errors:
for checkbox: form.find_control("cd_info").items[0].selected = True
for dropdown: form['cdtype']= ['Error1']
error:
raise ControlNotFoundError("no control matching "+description)
mechanize._form.ControlNotFoundError: no control matching name 'cd_info'
raise ControlNotFoundError("no control matching "+description)
mechanize._form.ControlNotFoundError: no control matching name 'cdtype'
There is no <form> in your HTML code. So probably form is not pointing to an element around the HTML code you provide at the moment you call find_control or the subscription operator.
You can try to print the text of the form to be sure you are looking at the right thing:
print form