I have a set of checkboxes, and validation such that at least one of those checkboxes need to be checked on submit. But I want to be able to set a validation error if the user blurs out of the set of checkboxes. The problem is that if I do a blur for the last one it doesn't work because they could be shift-tabbing to the second from last checkbox. I've tried to but the onblur in the fieldset tag, but that didn't trigger a blur at all. Is this just a limitation that can't be overcome with plain html and vanilla JS?
You can look at what the next element that is focused is and determine if they are under the same grouping.
document.querySelectorAll('input[type="checkbox"]').forEach((elem) => {
elem.addEventListener("blur", function (event) {
const nextElem = event.relatedTarget;
const fieldSet = elem.closest('fieldset');
const isValid = fieldSet.querySelector("input:checked") !== null;
if (nextElem?.closest('fieldset') !== fieldSet) {
fieldSet.classList.toggle("error", !isValid);
} else if (isValid) {
fieldSet.classList.remove("error");
}
});
});
.error {
color: red;
}
<form>
<fieldset>
<legend>Pizza One</legend>
<input type="checkbox" name="x1-1" id="x1-1">
<label for="x1-1">Cheese</label>
<input type="checkbox" name="x1-2" id="x1-2">
<label for="x1-2">Peppers</label>
<input type="checkbox" name="x1-3" id="x1-3">
<label for="x1=3">Mushrooms</label>
</fieldset>
<fieldset>
<legend>Pizza Two</legend>
<input type="checkbox" name="x2-1" id="x2-1">
<label for="x2-1">Cheese</label>
<input type="checkbox" name="x2-2" id="x2-2">
<label for="x2-2">Peppers</label>
<input type="checkbox" name="x2-3" id="x2-3">
<label for="x2-3">Mushrooms</label>
</fieldset>
<input type="submit" />
</form>
Adding in a trick to use HTML5 validation
document.querySelectorAll('input[type="checkbox"]').forEach((elem) => {
elem.addEventListener("blur", function(event) {
const nextElem = event.relatedTarget;
const fieldSet = elem.closest('fieldset');
const isValid = fieldSet.querySelector("input:checked") !== null;
if (nextElem?.closest('fieldset') !== fieldSet) {
fieldSet.classList.toggle("error", !isValid);
}
});
elem.addEventListener("change", function(event) {
const fieldSet = elem.closest('fieldset');
const isValid = fieldSet.querySelector("input:checked") !== null;
if (isValid) {
fieldSet.classList.remove("error");
fieldSet.querySelectorAll("input").forEach((cb) => {
cb.removeAttribute("required");
});
} else {
fieldSet.querySelectorAll("input").forEach((cb) => {
cb.setAttribute("required", "required");
});
}
});
const changeEvt = document.createEvent("HTMLEvents");
changeEvt.initEvent("change", false, true);
elem.dispatchEvent(changeEvt);
});
.error {
color: red;
}
<form>
<fieldset>
<legend>Pizza One</legend>
<input type="checkbox" name="x1-1" id="x1-1">
<label for="x1-1">Cheese</label>
<input type="checkbox" name="x1-2" id="x1-2">
<label for="x1-2">Peppers</label>
<input type="checkbox" name="x1-3" id="x1-3">
<label for="x1=3">Mushrooms</label>
</fieldset>
<fieldset>
<legend>Pizza Two</legend>
<input type="checkbox" name="x2-1" id="x2-1">
<label for="x2-1">Cheese</label>
<input type="checkbox" name="x2-2" id="x2-2">
<label for="x2-2">Peppers</label>
<input type="checkbox" name="x2-3" id="x2-3">
<label for="x2-3">Mushrooms</label>
</fieldset>
<input type="submit" />
</form>
Based on epascarello's suggestion I was able to create a function that provided similar functionality to the one provided. I have an error span that's underneath the checkboxes. I wanted behavior that would immediately remove that if any checkbox was checked, but only add the error span if the user blurred out of the entire set of checkboxes. Note that there is only one fieldset on this page, and the error span has an specific id I could reference. Here's the function that I got working:
document.querySelectorAll('input[type="checkbox"]').forEach((elem) => {
elem.addEventListener("blur", function (event) {
var errorSpan = document.getElementById("checkboxesErrorSpan");
var isValid = document.querySelector("fieldset").querySelectorAll("input:checked").length > 0;
if (isValid) {
if ((errorSpan.style.display == "inline")) {
errorSpan.style.display = "none";
}
}
else {
if (event.relatedTarget.type != "checkbox") {
if ((errorSpan.style.display == "none")) {
errorSpan.style.display = "inline";
}
}
}
});
});
I tried to build a validation form using JavaScript which handles these errors:
The Name field should not be empty
The phone number field can contain only numbers (exactly 10 numbers)
One option should be selected (radio)
At least one car from checkboxes is selected and at max 3 cars
But the problem with my code is it has not worked in all cases. I mean if I selected submit it shows me the error message just in the name field, not on other fields.
For example here -
here my HTML code
<body>
<div class="MainBackground">
<h1 id="title">Car Company</h1>
</div>
<div class="cars">
<form method="POST" name="form-car" id="form-car">
<p id="decription"> users' request</p>
<div id="name_div">
<label id="lable-name" for="name">Name: </label>
<input id="name" type="text" name="yourName" placeholder="Enter your name"> <br>
<span id="errorname"></span>
</div>
<br> <br>
<label id="lable-Phone" for="Phone">Phone:</label>
<input id="phone" type="text" name="phonefild" placeholder="Enter your Phone Number"> <br>
<span id="errorpass"></span>
<br> <br>
<label id="lable-age" for="Age">Age:</label>
<br>
<input type="radio" name="group1" value="T"> 18-25
<br>
<input type="radio" name="group1" value="A"> 26-35
<br>
<input type="radio" name="group1" value="O"> 35-55
<br>
<input type="radio" name="group1" value="AO"> 36-80
<br>
<input type="radio" name="group1" value="VO"> 80-95
<br>
<span id="radioerorr"></span>
<br> <br>
<label for="check">Choice cars to tested</label>
<br>
<input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW">
<label for="vehicle1">BMW</label><br>
<input class="checkbox" type="checkbox" id="option2" name="car2" value="Ferrari">
<label for="vehicle2">Ferrari</label><br>
<input checkbox="checkbox" type="checkbox" id="option3" name="car3" value="Ford">
<label for="vehicle3">Ford</label><br>
<input class="checkbox" type="checkbox" id="option4" name="car4" value="Audi">
<label for="vehicle4">Audi</label><br>
<input class="checkbox" type="checkbox" id="option5" name="car5" value="Cadillac">
<label for="vehicle5">Cadillac</label><br>
<span id="checkboxerorr"></span>
<br> <br>
<div class="center">
<button onclick="return validition()" id="submit" type="submit" name="button">submit</button>
<button id="reset" type="reset" name="button">reset</button>
</div>
</form>
</div>
And here my javascript code
function validition() {
var phoneinpute = document.getElementById('phone').value;
var radios = document.getElementsByTagName('input');
var value;
var inputs = document.getElementsByTagName("input");
var count1 = 0;
var count2 = 0;
var regex = /(5|0)([0-9]{8})$/;
if (document.getElementById('name').value == "") {
document.getElementById('errorname').innerHTML = "name should not be empty";
document.getElementById('name').style.borderColor = "red";
return false;
} else if (document.getElementById('name').value != "") {
document.getElementById('errorname').innerHTML = "";
document.getElementById('name').style.borderColor = "green";
}
if (regex.test(phoneinpute)) {
document.getElementById('errorpass').innerHTML = "";
document.getElementById('phone').style.borderColor = "green";
//return true;
} else {
document.getElementById('errorpass').innerHTML = "Invalide phone number";
document.getElementById('phone').style.borderColor = "red";
return false;
}
for (var i = 0; i < radios.length; i++) {
if (radios[i].type == "radio" && radios[i].checked) {
count1++;
}
if (count1 == 1) {
document.getElementById('radioerorr').innerHTML = "";
break;
} else {
document.getElementById('radioerorr').innerHTML = "one option should be selected";
return false
}
}
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && inputs[i].checked) {
count2++;
}
if (count2 > 3 || count2 == 0) {
document.getElementById('checkboxerorr').innerHTML = "please choose at least one car and at most 3 cars";
return false
} else {
document.getElementById('checkboxerorr').innerHTML = "";
}
}
You are using return statements in your validations, if you return from your 1st validation (name box), the other code blocks will not execute. Use a local boolean to determine your return type and return that at the end of your function, that way, all of your validation code runs. Also, your radio button and checkbox validation logic is flawed, you set an error message on each iteration of the loop if count1 or count2 doesn't meet your conditions. Change it to something like the following:
function validition() {
let valid = true; //local boolean to return at the end of your function
var phoneinpute = document.getElementById('phone').value;
var radios = document.getElementsByTagName('input');
var value;
var inputs = document.getElementsByTagName("input");
var count1 = 0;
var count2 = 0;
var regex = /(5|0)([0-9]{8})$/;
//Name validation
if (document.getElementById('name').value == "") {
document.getElementById('errorname').innerHTML = "name should not be empty";
document.getElementById('name').style.borderColor = "red";
valid = false;
} else if (document.getElementById('name').value != "") {
document.getElementById('errorname').innerHTML = "";
document.getElementById('name').style.borderColor = "green";
}
//Phone number validation
if (regex.test(phoneinpute)) {
document.getElementById('errorpass').innerHTML = "";
document.getElementById('phone').style.borderColor = "green";
} else {
document.getElementById('errorpass').innerHTML = "Invalide phone number";
document.getElementById('phone').style.borderColor = "red";
valid = false;
}
//Radio button validation
for (var i = 0; i < radios.length; i++) {
if (radios[i].type == "radio" && radios[i].checked) {
count1++;
}
if (count1 == 1) {
document.getElementById('radioerorr').innerHTML = "";
break;
}
}
//check to see if you had a checked radio button, if not, add error
//and mark local boolean as false
if(count1 < 1){
document.getElementById('radioerorr').innerHTML = "one option should be selected";
valid = false;
}
//Checkbox validation
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox" && inputs[i].checked) {
count2++;
}
}
//Do your checkbox validation after the for loop
if (count2 > 3 || count2 == 0) {
document.getElementById('checkboxerorr').innerHTML = "please choose at least one car and at most 3 cars";
valid = false;
} else {
document.getElementById('checkboxerorr').innerHTML = "";
}
//return your local boolean value
return valid;
}
I have this type of html:
<p id="username_input" data-priority="">
<label for="username">Username</label>
<input type="text" class="input-text um-field " name="username" id="username" placeholder="" value="" required="required" data-label="Username">
</p>
<p id="firstname_input" data-priority="">
<label for="firstname">First Name</label>
<input type="text" class="input-text um-field " name="firstname" id="firstname" placeholder="" value="" required="required" data-label="FirstName">
</p>
<p class="form-row " id="radio_SXsPOwVSD_input">
<input type="radio" class="input-radio um-field" value="Male" name="radio_SXsPOwVSD" id="radio_SXsPOwVSD_male">Male
<input type="radio" class="input-radio um-field" value="Female" name="radio_SXsPOwVSD" id="radio_SXsPOwVSD_Female">Female
</p>
applyConditions array contains input, condition and value indexes. Could be any inputs and also many conditions. Suppose,
input = username
condition = 0 (is)
value = abc
input = firstname
condition = 1 (is not)
value = pqr
I need to do something(show/hide checkbox) if
username is abc and firstname isnot pqr
from the frontend. But could be input radio_sXsPOwVSD, condition 1 and value Male.
then,
applyConditions.forEach( function( item ) {
if(item.condition == 0) {
jQuery("#"+ item.input+"_input").on('change', ( function( avalue ) {
return function(e) {
if( e.target.value == avalue ) {
//show checkbox
}
else {
//hide checkbox
}
};
})(item.value));
}
else if( item.condition == 1 ) {
jQuery("#"+ item.input+"_input").on('change', ( function( avalue ) {
return function(e) {
if( e.target.value != avalue ) {
//show checkbox
}
else {
//hide checkbox
}
};
})(item.value));
}
});
However, this seems to be OR, if any matches, but I need all matches. I could count the matches and compare with array length, but with onChange count on same field seems to increase/decrease multiple times. What could be the solution? I am stuck on this for a while.
applyConditions =
[
{"input":"username","condition":"0","value":"abc"},
{"input":"firstname","condition":"1","value":"pqr"}
];
could also be {"input":"radio_SXsPOwVSD","condition":"0","value":"Male"},
Compare if ($(ele).val() == item.value) equals item.condition
to determine whether it matches the condition.
The following version now works on radio buttons and checkbox.
Well, I finally found that there're name attr on every input.
var applyConditions = [
{
'input': 'username',
'condition': 0,
'value': 'abc'
},
{
'input': 'firstname',
'condition': 1,
'value': 'pqr'
},
{
"input": "radio_SXsPOwVSD",
"condition": 0,
"value":"Male"
},
{
"input": "check_box_XmNoe",
"condition": 0,
"value": "Apple"
}
]
applyConditions.forEach(function(condition) {
var targetInput = $('input[name='+condition.input+']');
targetInput.on('change',function(){
var results = $.map(applyConditions,(item, index)=>{
var targetInput = $('input[name='+item.input+']');
var type = targetInput.get(0).type;
var check = false;
if(type == "radio" || type == "checkbox"){
var input = targetInput.get().find(x=>$(x).is(":checked") && $(x).val() == item.value)
if (input)
{
check = input.value == item.value != item.condition;
}
else{
// since 0 means equal, if there's no any radio button or checkbox is checked, check = false
check = item.condition ? true : false;
}
}
else{
check = (targetInput.val() == item.value) != item.condition;
}
if(check){
// matches
}
else{
// not matches
}
return check;
})
console.log(...results);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="username_input" data-priority="">
<label for="username">Username</label>
<input type="text" class="input-text um-field" name="username" id="username" placeholder="" value="" required="required" data-label="Username">
( ==abc )
</p>
<p id="email_input" data-priority="">
<label for="username">Username</label>
<input type="text" class="input-text um-field" name="email" id="email" placeholder="" value="" required="required" data-label="Email">
( no condition )
</p>
<p id="firstname_input" data-priority="">
<label for="firstname">First Name</label>
<input type="text" class="input-text um-field" name="firstname" id="firstname" placeholder="" value="" required="required" data-label="FirstName">
( !=pqr )
</p>
<p class="form-row" id="radio_SXsPOwVSD_input">
<input type="radio" class="input-radio um-field" value="Male" name="radio_SXsPOwVSD" id="radio_SXsPOwVSD_male">Male
<input type="radio" class="input-radio um-field" value="Female" name="radio_SXsPOwVSD" id="radio_SXsPOwVSD_Female">Female
( Male should be checked )
</p>
<p id="check_box_XmNoe_input">
<label class="checkbox data-label=">Checkbox</label>
<input type="checkbox" class="input-checkbox um-field" name="check_box_XmNoe" id="check_box_XmNoe_Apple" value="Apple"> Apple
<input type="checkbox" class="input-checkbox um-field" name="check_box_XmNoe" id="check_box_XmNoe_Orange" value="Orange"> Orange
( Apple should be checked )
</p>
This is just an alternative algorithm.
var applyConditions = [
{
"input": "username",
"condition": "0",
"value": "abc",
},
{
"input": "firstname",
"condition": "1",
"value": "pqr",
},
{
"input": "radio_SXsPOwVSD",
"condition": "0",
"value": "Male"
},
];
var totalConditions = applyConditions.length,
conditionFulfilled = 0;
function compare($element, rule) {
if ($element.length > 1) $element = $element.filter(':checked'); //radio
return ($element.val() == rule.value) == (rule.condition == "0");
}
function setOK() {
if (conditionFulfilled == totalConditions) $('#iresult').html('OK');
else $('#iresult').html('Completed('+conditionFulfilled+'/'+totalConditions+')');
}
applyConditions.forEach(function(rule) {
var $element = $('[name=' + rule.input + ']');
var isConditionTrue = compare($element, rule);
if (isConditionTrue) conditionFulfilled++;
$element.change(function() {
var updatedIsConditionTrue = compare($element, rule);
if (isConditionTrue != updatedIsConditionTrue) {
if (updatedIsConditionTrue) conditionFulfilled++;
else conditionFulfilled--;
isConditionTrue = updatedIsConditionTrue;
setOK();
}
});
});
setOK();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="username_input" data-priority="">
<label for="username">Username</label>
<input type="text" class="input-text um-field " name="username" id="username" placeholder="value = abc" value="" required="required" data-label="Username">
</p>
<p id="firstname_input" data-priority="">
<label for="firstname">First Name</label>
<input type="text" class="input-text um-field " name="firstname" id="firstname" placeholder="value != pqr" value="" required="required" data-label="FirstName">
</p>
<p class="form-row " id="radio_SXsPOwVSD_input">
<input type="radio" class="input-radio um-field" value="Male" name="radio_SXsPOwVSD" id="radio_SXsPOwVSD_male">Male
<input type="radio" class="input-radio um-field" value="Female" name="radio_SXsPOwVSD" id="radio_SXsPOwVSD_Female">Female
</p>
<div>Result: <b id="iresult">Not OK</b></div>
Removed the Array and used the data attribute instead.
$(document).ready(function(){
$('.validator').delegate('input', 'change', function(event){
event.stopPropagation();
var condition = $(this).closest('.validator').data('condition');
var valueToCompare = $(this).closest('.validator').data('value');
var result = "";
if(condition == "1"){
result = $(this).val().trim() == valueToCompare ? "Condition Satisfied" : "Condition Not Satisfied";
}else{
result = $(this).val().trim() != valueToCompare ? "Condition Satisfied" : "Condition Not Satisfied";
}
console.log(result)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="validator" data-condition="1" data-value="Rony">
<label for="username">First Name</label>
<input type="text" >
</div>
<div class="validator" data-condition="0" data-value="White">
<label for="username">Last name</label>
<input type="text" >
</div>
<div class="validator" data-condition="1" data-value="Male">
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
</div>
<div class="validator" data-condition="0" data-value="Banana">
<input type="radio" name="fruit" value="Apple">Apple
<input type="radio" name="fruit" value="Banana">Banana
</div>
To test that every one of a set of conditions is true use Array.prototype.every.
This solution has a function, setRules, which accepts a set of rules in the above format and returns an object with an onChange property to add listeners. These listeners are triggered when any of the values changes and are passed the new boolean value. It would not be hard to keep a current value so that this only fires when it switches from true to false or vice-versa.
You can use it like this:
const ruleHandler = addRules(applyConditions);
ruleHandler.onChange(function(newValue) { /* do something */ }
(or simply chain these together like below.)
This also makes it easy to add new conditions, as they are simple functions that accept the current value and the entire rule (enhanced with a jQuery reference to the element.) You can add a condition like this:
'2': function(val, rule) {return val.length >= rule.minLength;}
And use it like this:
{input: "lastname", condition: "2", minLength: "4"},
This also points out that you could use arbitrary names for these conditions, rather than "0" and "1". Perhaps they could be eq, not_eq, and if you use that last one, minLength.
Most of this is reasonably simple. The only part that I think needs explanation is this:
var newVal = rules.every(function(rule) {
var $elt = (rule.$elt.length > 1) ? rule.$elt.filter(':checked') : rule.$elt;
return (conds[rule.condition] || function() {return true;})($elt.val(), rule);
})
Note first that we start by calling every on our rules.
In the second line we let radio buttons be represented by the :checked element and others by the only element in the $elt object.
The third line is the heart of this code: it finds the correct condition function by looking it up, or if it's not found, chooses a function that simply returns true. Then it calls this function with the value of the element and the rule itself.
var setRules = function(rules) {
var listeners = [];
var conds = {
'0': function(val, rule) {return val === rule.value;},
'1': function(val, rule) {return val !== rule.value;},
}
var test = function() {
var newVal = rules.every(function(rule) {
var $elt = (rule.$elt.length > 1) ? rule.$elt.filter(':checked') : rule.$elt;
return (conds[rule.condition] || function() {return true;})($elt.val(), rule);
})
listeners.forEach(listener => listener(newVal));
}
rules.forEach(function(rule) {
rule.$elt = $('[name=' + rule.input + ']').change(test);
});
return {
onChange: function(listener) {
listeners.push(listener);
test();
}
};
}
var applyConditions = [
{input: "username", condition: "0", value: "abc"},
{input: "firstname", condition: "1", value: "pqr"},
{input: "radio_SXsPOwVSD", condition: "0", value: "Male"}
];
const $results = $('#result');
setRules(applyConditions).onChange(function(newVal) {
$results.html(newVal ? 'OK' : 'Not OK');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="username_input" data-priority="">
<label for="username">Username</label>
<input type="text" name="username" id="username" value="abc">
</p>
<p id="firstname_input" data-priority="">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" value="pqr">
</p>
<p id="radio_SXsPOwVSD_input">
<input type="radio" value="Male" name="radio_SXsPOwVSD" id="radio_SXsPOwVSD_male" checked>Male
<input type="radio" value="Female" name="radio_SXsPOwVSD" id="radio_SXsPOwVSD_Female">Female
</p>
<div>Result: <b id="result">Not OK</b></div>
Also note that this would be cleaner and more readable if you were using ES6:
const setRules = (rules) => {
const listeners = [];
const conds = {
'0': (val, rule) => val === rule.value,
'1': (val, rule) => val !== rule.value
}
const test = () => {
var newVal = rules.every(function(rule) {
var $elt = (rule.$elt.length > 1) ? rule.$elt.filter(':checked') : rule.$elt;
return (conds[rule.condition] || (() => true))($elt.val(), rule);
})
listeners.forEach(listener => listener(newVal));
}
rules.forEach((rule) => {
rule.$elt = $('[name=' + rule.input + ']').change(test);
});
return {
onChange: (listener) => {
listeners.push(listener);
test();
}
};
}
So I have this piece of HTML and JavaScript
function validate() {
const tabs = document.getElementsByClassName("tab");
const input = tabs[currentTab].querySelectorAll("input[type=tel], input[type=text], input[type=time], input[type=number], input[type=email]");
const radio = tabs[currentTab].querySelectorAll("input[type=radio]");
const select = tabs[currentTab].getElementsByTagName("select");
let valid = true;
if (radio.length == 0) {
for (let i = 0; i < input.length; i++) {
if (input[i].value == "") {
valid = false;
break;
}
}
for (let i = 0; i < select.length; i++) {
if (select[i].value == "") {
valid = false;
break;
}
}
} else if (radio[0].name == "phnum" && radio[0].checked) {
if (input[0].value == "" || input[1].value == "") {
valid = false;
}
} else if (radio[1].name == "phnum" && radio[1].checked) {
if (input[0].value == "" || input[1].value == "" || input[2].value == "") {
valid = false;
}
}
if (valid) {
document.getElementById("next").className = "prevNext";
}
}
<span id="radio">
<label for="phnum1" class="radio-container">
<input type="radio" name="phnum" id="phnum1" value="1" onchange="displayPhone(this);">1 Number
<span class="radio"></span>
</label>
<label for="phnum2" class="radio-container">
<input type="radio" name="phnum" id="phnum2" value="2" onchange="displayPhone(this);">2 Numbers
<span class="radio"></span>
</label>
<label for="phnum3" class="radio-container">
<input type="radio" name="phnum" id="phnum3" value="3" onchange="displayPhone(this);">3 Numbers
<span class="radio"></span>
</label>
</span>
</p><br>
<p id="ph1" class="disable">
<label for="phone-number1">Add a Phone Number: </label><input type="tel" name="phone-number1" id="phone-number1" class="input" placeholder="Add A Phone Number" required oninput="validate();">
</p>
<p id="ph2" class="disable">
<label for="phone-number2">Add a Phone Number: </label><input type="tel" name="phone-number2" id="phone-number2" class="input" placeholder="Add A Phone Number" required onchange="validate();">
</p>
<p id="ph3" class="disable">
<label for="phone-number3">Add a Phone Number: </label><input type="tel" name="phone-number3" id="phone-number3" class="input" placeholder="Add A Phone Number" required onchange="validate();">
</p>
that handles the input added by the user to make a button clickable if all necessary data is added. the problem is when i delete inside the input with back arrow key(the one above enter) the button remains active even if the condition for its activation no longer applies.
thank you guys for your time and help i really do appreciate it. :D
One thing I see - you're setting the class name if valid == true via document.getElementById("next").className = "prevNext";.
But nowhere are you removing that class name if valid == false.
That's probably why you aren't seeing the button disappear when you empty out the fields (if I understand your problem correctly).
if (!valid) { document.getElementById("next").className = ""; } is a quick and dirty way to get what you need.
I have these blocks:
function generateEmail(){
if
(document.getElementById('emailOpt1').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt1.value
}
else if
(document.getElementById('emailOpt2').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt2.value
}
else if
(document.getElementById('emailOpt3').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt3.value
}
else if
(document.getElementById('emailOpt4').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt4.value
}
}
and this:
<div class="radioEmailType" id="emailClass">
<input type="radio" id="emailOpt1" name=emailType value="email_c1">
<label for="emailOpt1">class-one</label>
<input type="radio" id="emailOpt2" name=emailType value="email_c2">
<label for="emailOpt2">class-two</label>
<input type="radio" id="emailOpt3" name=emailType value="email_c3">
<label for="emailOpt3">class-three</label>
<input type="radio" id="emailOpt4" name=emailType value="email_c4">
<label for="emailOpt4">class-four</label>
</div>
<button type="button" class="gButton" onclick=generateEmail()">GENERATE EMAIL</button>
<textarea id=generatedEmail></textarea></td></tr>
when I hit the 'generate email' button after selecting one of the 'radios', the code seems to revert the selection back to the first option as I keep on getting the first option on the textarea.
any ideas and a possibly a simpler way to do this will be appreciated.
note: I had to go this route since the user wants the radios to be buttons.
I fix it :
Change :
.checked = "true"
to :
.checked == true
Final code :
<html>
<head>
</head>
<body>
<div class="radioEmailType" id="emailClass">
<input type="radio" id="emailOpt1" name=emailType value="email_c1">
<label for="emailOpt1">class-one</label>
<input type="radio" id="emailOpt2" name=emailType value="email_c2">
<label for="emailOpt2">class-two</label>
<input type="radio" id="emailOpt3" name=emailType value="email_c3">
<label for="emailOpt3">class-three</label>
<input type="radio" id="emailOpt4" name=emailType value="email_c4">
<label for="emailOpt4">class-four</label>
</div>
<button type="button" class="gButton" onclick="generateEmail()">GENERATE EMAIL</button>
<textarea id=generatedEmail></textarea>
<script>
function generateEmail(){
if (document.getElementById('emailOpt1').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt1.value
}
else if (document.getElementById('emailOpt2').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt2.value
}
else if (document.getElementById('emailOpt3').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt3.value
}
else if (document.getElementById('emailOpt4').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt4.value
}
}
</script>
</body>
</html>