Javascript, and radio buttons - radio-button

OK here is the deal. I have a survey that I am putting up with over 60 questions. I want to make them all mandatory. I really need to know if the group has a value, don't care what it is.
Here is what I have, but it is only giving me the first value.
<function CheckField(myFieldName, myText){
var x=document.getElementById(myFieldName).value;
window.alert(myFieldName + "1: " +x);
. . .. . .
OK so this returns the first value of 5. It does not matter what I select. All I just need to know if they selected something if not I want to mark the question with a different color so the user knows to go back and answer the question.

You can try HTML5 required:
<label><input type="radio" name="option" required /> Option 1</label>
<label><input type="radio" name="option" /> Option 2</label>
You can use it on one radio (per each name), or on all of them (see HTML5: How to use the "required" attribute with a "radio" input field).

Option 1: (EASY!)
Having the attribute "checked" set to "true" would make have a default value either way.
<input type="radio" name="option" />Option 1
<input type="radio" name="option" checked="true" />Option 2
You could also use required instead of checked attribute but some browsers don't support it like Safari.
For info on support:
required
checked
Option 2:
JSFiddle:
http://jsfiddle.net/FE7sK/2/
jQuery(function () {
jQuery('#validateOpt').bind('click', checkRadio);
})
function checkRadio() {
var isChecked = jQuery("input[type=radio]:checked").val();
var booleanVlaueIsChecked = false;
if (isChecked) {
booleanVlaueIsChecked = true;
$('#form1').submit();
} else {
alert("aaa");
}
}

Related

How to reset the values of an input and select in VUE?

I have an input and a select in my VUE application that are shown depending on the selection of a previous input.
If I insert values and change the initial input selection, I hide the second input and select, to restart the form.
The problem comes when I restart the form and I still get the selected values on the first load.
I'm trying to reset the values but none of the methods I've found in similar case reviews works fine.
Here's my select and my input that i want to reset values
<h1 v-if="this.isSelected"> What's your selection ?</h1>
<select
ref="item"
class="form-control"
id="selectedItem"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)">
<option v-for="item in filteredItem" v-bind:key="item.name">{{ item.name }}</option>
</select>
<div v-show="this.isItemSelected">
<h1>what's your item name ?</h1>
<input
type="text"
id="name"
ref="itemName"
class="form-control fields"
style="text-transform: capitalize"
v-model="itemFormInfo.name"
#keypress="formChange($event)"
/>
<div class="loader-spinner" v-if="loading">
<app-loader/>
</div>
</div>
and here's my method where I have tried the reset and document.getElementById('').value("") methods;
onChangeSpecie(event) {
let specie = event.target._value;
this.specieName = this.getSpecieName(specie);
this.breedName = this.getBreedName(specie);
this.$refs.breed.focus();
if (this.isBreedSelected = true) {
this.isBreedSelected = false;
this.isNameCompleted = false;
this.isLoaderFinished = false;
this.$refs.animalName.item()
}
},
If I print by console I see how the value is emptied but the input appears with the written value until I focus on the .
How do I stop it from appearing?
in neither method does it erase my previous values showing on the input.
what am I doing wrong?
thank you all for your help and time in advance
I believe you need to null the model not the target element's value.
this.itemFormInfo.name = null

Jaws screen reader IE 11 select tag issue

I have some issues with IE 11 and Jaws. Please take a look at the example below.
Simplified code example:
<input type="text" />
<span role="alert" aria-live="assertive" id="err"></span>
<select id="colours">
<option value="White">White invalid</option>
<option value="Green">Green invalid</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
</select>
var i = 0;
$('#colours').on('keyup', function (e) {
if ($(this).prop('selectedIndex') < 2) {
$('#err').html('an error has occurred ' + i++);
}
else {
$('#err').html('');
}
});
jsfiddle: https://jsfiddle.net/obwapffq/2/
Basically, I am validating the selected element in a dropdown list (in the example 'white' and 'green' values are invalid). I am only using the keyboard's up and down buttons to change the selected value. If an invalid option is selected, I update the content of a span element with the appropriate error message. The span element has role="alert" and aria-live="assertive". I have 2 issues:
If the selected option is invalid, the error message is read out, but the selected option is not read out and so the user does not know what option is invalid i.e. what option caused that error.
Sometimes even the valid options are not read out. This mostly happens with the first valid option in the list i.e. in the example 'Red'
This is working 100% correct with NVDA.
Any ideas?
Please add aria-label="yourOptionText" attribute to your option tag.
for e.g. aria-label="White Invalid".
Hope this will help.

Aurelia Validation on Select List

I have a simple select list in my Aurelia view which I'm trying to set a default value on of 'Select...'. I'm also using the aurelia-validation plugin to ensure that the value is changed before the form is submitted. The plugin works great for other field types in my project.
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="">Select..</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
In the VM:
constructor(validation) {
this.agencies = null;
this.agencyId = 0;
this.validation = validation.on(this)
.ensure('agencyId')
.isNotEmpty();
}
activate() {
//call api and populate this.agencies
}
After the page initially loads I get my agencies in the list and my default value is correct, but it shows the validation error message:
Other form fields, like text boxes don't do this and show no error message until the user interacts with the form controls.
Is there something special I need to do for a select list to hide validation errors on the initial loading of the view? I suspect that binding the select list in the view is somehow triggering a change event.
Thanks to a kind Aurelia user on Gitter, the problem was solved by setting the initial value of this.agencyId to "". Originally I had the this.agencyId = null. That was my mistake. Because it was null and not "" (as was the default value in the select list) the values didn't match so the select list was invalid when the view loaded. At least, that's my understanding.
The lesson is, if you want to validate a select list, make sure you VM property is initialized to the same value as your select list's default value.
constructor() {
this.agencyId = ""; **//must match the bound property's initial value**
}
And in the view:
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="" **<!-- this value must match the VM initial value -->** selected="true">Select...</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>

Input hidden is built without value

Weird this one.
On my .NET MVC 4 project I've added a file on App_Code who contains this method:
#helper CheckBox(string name, bool isChecked = false, string className = "") {
<div class="checkboxHolder">
<input id="#name" name="#name" type="hidden" value="#isChecked") />
<i class="#className checkboxBts fa #((isChecked) ? "fa-check-square-o" : "fa-square-o")" data-checkbox-associated="#name"></i>
</div>
}
I'm using it to style checkboxes using font-awesome, so my app checkboxes are made of an input type hidden who stores a boolean value and an icon to give feedback to users.
Weird thing is, on executing when isChecked == false, the hidden returned by this method is like:
<input id="myCheckboxId" name="myCheckboxId" type="hidden" />
There is no value at all, when I try to save it to the model an exception is thrown saying that model cannot be saved.
I've fixed it changing the method to use:
<input id="#name" name="#name" type="hidden" #((isChecked) ? "value=true" : "value=false") />
Which is working fine. However, I wonder if anyone know what could be happening on the original output.
Thank you all.
It's not entirely a duplicate, but this is answered in Why is my hidden input writing: value=“value” instead of true/false?:
if you have:
<input name="somefield" type="hidden" someprop="#(SomeBooleanExpression)"/>
[and #SomeBooleanExpression] is false it is omitted completely:
<input name="somefield" type="hidden"/>
To get around this, consider .ToString()
So, use:
<input id="#name" name="#name" type="hidden" value="value="#(isChecked.ToString())" />

using dojox.form.PasswordValidation in Programatic Way

Im building a registration form and planning to use dojox.form.PasswordValidation to verify if the inputted passwords are the same. Is there a way to use dojox.form.PasswordValidation programatically? If i do this:
<div id="sample">
<input type="password" pwType="new" />
<input type="password" pwType="verify" />
</div>
<script>
var a = new dojox.form.PasswordValidation({}, "sample");
</script>
The above code works as expected, but I want to strip-off those "pwType" tags and create a pure HTML tags only. If I do that, where should I put "pwType"?
P.S. I'm using Dojo 1.6
Unfortunately it looks like this widget is not really up-to-date with the recent changes where dojo tries to move all the invalid html attributes into the valid data-* attributes. When looking at the postCreate method of that widget it has this code in the middle of it:
dojo.forEach(["old","new","verify"], function(i){
widgets.push(dojo.query("input[pwType=" + i + "]",
this.containerNode)[0]);
}, this);
And just afterwards it makes sure that it found the necessary inputs, otherwise it will throw an error.
So if you want to use something other than the pwType attributes, then you will probably have to overwrite the postCreate method of this widget to query something else, for example:
dojo.query("input[data-dojo-password-type=" + i + "]")
and then you can specify the values in data-dojo-password-type instead of pwType like this:
<div id="sample">
<input type="password" data-dojo-password-type="new" />
<input type="password" data-dojo-password-type="verify" />
</div>
what about something like :
var theDiv = dojo.create("div", {id: "sample"}),
theNewPass = dojo.create("input", {type: "password", pwType: "new"}, theDiv, "last"),
theVerifPass = dojo.create("input", {type: "password", pwType: "verify"}, theDiv, "last"),
a = new dojox.form.PasswordValidation({}, "sample")
;