Adding validation to an HTML select box - javascript

I want to make one simple validation check on my HTML form. I'd like it so that if the user chooses the 18 - 24, an error appears next to the drop down select: 'You must be 25+'.
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
I've tried adding both a class and ID to value 1. Then I tried something like:
function hidestuff(page){
document.getElementById(error).style.visibility="hidden";
}
function showstuff(error){
document.getElementById(error).style.visibility="visible";
}
Attempting to toggle show and hide with JavaScript. Hoping something like if on page ID hide this message, when error div toggled display. But this didn't work. I did add the corresponding CSS too. Any pointers on how to write this correctly?

Something like this can be achieved with a bit of jQuery:
Here's a JSFiddle
jQuery:
$(document).ready(function() {
$('#errorMsg').hide(); //ensure the error message is hidden
$('#element_3').on('change',function() {
// any option that has the class "error" will cause the error msg to be
// displayed (just in case you feel like adding a 0-17 option later)
// To target an element by ID, use $(this).find(":selected").attr('id') == 'error'
if ($(this).find(":selected").hasClass('error')) {
$('#errorMsg').show();
} else {
$('#errorMsg').hide();
}
});
});
and a bit of HTML:
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
</select>
<div id="errorMsg">You must be over 25</div>
and why not style it up with some CSS:
#errorMsg {
display: inline-block;
background-color: #fdd;
font: 12pt arial;
color: #f00;
padding: 2px 5px 2px 5px;
border: 1px solid #f00;
border-radius: 5px;
width: 200px;
}

I think what you must be doing is something like this
<select id="myselect" onchange="check();">
<option value="0">Select option</option>
<option value="1">op1</option>
<option value="2">op3</option>
</select>
<div id="error" style="display:none;">Error mesage</div>
<div id="page" style="width:100px;height:100px;border:1px solid black;display:none;">my page</div>
<script>
function check() {
switch (parseInt($('#myselect').val())) {
case 0:
$('#error').show();
$('#page').hide();
break;
case 1:
$('#error').show();
$('#page').hide();
break;
case 2:
$('#error').hide();
$('#page').show();
break;
}
}
</script>
http://jsfiddle.net/SS3gc/4/

Related

not working event change on select for multiple classname

I have a page that multiple selects.
When the option of some of them is clicked (value=0), a text box should be opened in order for the user to write her description in it.
I want the same text box to be closed when the user clicks on any part of the page except the text box.
I want the text box to close automatically when the user goes to the before or next selector.
Event click not working on the options of select.
but this code not working.
If you have a suggestion for solving this problem, thank you for letting me know
Thank you in advance for your cooperation.
function changeFunc(){
var selectBox = document.querySelectorAll(".selectBox");
var selectedValue = selectBox.value;
var description = document.querySelectorAll('.description');
var i;
for (i = 0; i < selectBox.length; i++) {
selectBox[i].addEventListener('click', function(){
if(selectedValue == '0'){
selectBox[i].classList.add('active');
description[i].classList.add('show');
window.addEventListener("click", function(event){
var desText = document.querySelector('.description.show');
if (event.target !== desText) {
description.classList.remove('show');
}
});
}else{
selectBox[i].classList.remove('active');
description[i].classList.remove('show');
}
})
}
}
select{
width: 70%;
border:1px solid rgba(112, 112, 112, .5);
padding: 15px;
border-radius: 10px;
outline: none;
box-sizing: border-box;
}
select.active{
background: yellow;
color: white;
}
.description{
border: 2px solid red;
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 13.75%;
top: 85%;
z-index: 1;
display: none;
}
.line-form .description.show {
display: block;
}
<div>
<label for="example1">example1</label>
<select class="selectBox" name="whois" id="example1" required onchange="changeFunc();">
<option value="1" >No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup> </select>
<textarea class="description" name="example1" cols="50" rows="3"> </textarea>
</div>
<div>
<label for="example2">example2</label>
<select class="selectBox" name="whois" id="example2" required onchange="changeFunc();">
<option value="1" >No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup> </select>
<textarea class="description" name="example2" cols="50" rows="3"></textarea>
</div>
<div>
<label for="example3">example3</label>
<select class="selectBox" name="whois" id="example3" required onchange="changeFunc();">
<option value="1" >No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup> </select>
<textarea class="description" name="example3" cols="50" rows="3"></textarea>
</div>
I made changes to your code and added a "show" class to css.
When "YES" is selected from the options menu, which has the value = 0, "textarea" is displayed. When you click on another menu with options or anywhere else "textarea" is hidden.
When clicked, the script places on the parent packaging DIV element class ".selected". When clicking on an element the script looks for the closest element with this class. In this case it is the parent element ... if it does not have the active class "textarea" it will be hidden.
Step-by-step description:
Get all elements with class .selectBox
Add listner for "click" and "change" events on all elements with class .selectBox. This events call the function "changeFunc()".
Add listner on the window -> if user click anywhere the script search for closest element with class .selected (In this case this must be a parent element). If it is not, it means that it has been clicked outside the selected element and the function that removes the classes of the active element "removeClasses()" should be called.
The function "changeFunc()" First removes activity classes from all items by calling the function "removeClasses()". Then gets as an argument which is the clicked element. And checks if its value is equal to "0" and if it sets the activity classes.
The function "removeClasses()" removes activity classes from all items
var selectBox = document.querySelectorAll(".selectBox");
selectBox.forEach(el => {
el.addEventListener('change', function () {
changeFunc(this);
});
el.addEventListener('click', function () {
changeFunc(this);
});
});
window.addEventListener("click", function (event) {
var closest = event.target.closest('.selected');
if (!closest) {
removeClasses();
}
});
function changeFunc(x) {
removeClasses();
if (x.value === '0') {
x.classList.add('active');
x.classList.add('show');
x.parentNode.querySelector('.description').classList.add('show');
x.closest('div').classList.add('selected');
}
}
function removeClasses() {
selectBox.forEach(el => {
el.classList.remove('active');
el.classList.remove('show');
el.parentNode.querySelector('.description').classList.remove('show');
el.closest('div').classList.remove('selected');
});
}
select {
width: 70%;
border: 1px solid rgba(112, 112, 112, .5);
padding: 15px;
border-radius: 10px;
outline: none;
box-sizing: border-box;
}
select.active {
background: yellow;
color: white;
}
.description {
border: 2px solid red;
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 13.75%;
top: 85%;
z-index: 1;
display: none;
}
.show {
display: block;
}
.line-form .description.show {
display: block;
}
<div>
<label for="example1">example1</label>
<select class="selectBox" name="whois" id="example1" required>
<option value="1">No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup>
</select>
<textarea class="description" name="example1" cols="50" rows="3"></textarea>
</div>
<div>
<label for="example2">example2</label>
<select class="selectBox" name="whois" id="example2" required>
<option value="1">No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup>
</select>
<textarea class="description" name="example2" cols="50" rows="3"></textarea>
</div>
<div>
<label for="example3">example3</label>
<select class="selectBox" name="whois" id="example3" required>
<option value="1">No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup>
</select>
<textarea class="description" name="example3" cols="50" rows="3"></textarea>
</div>
Your code looks fine. The problem is in
var selectedValue = selectBox.value;
selectBox is a collection of nodes, so You cannot get direct value from there. You need to loop through.
In your loop you need to get selected value using selectBox[i].value
And 1 more problem I can see, you are adding click event listener to the window, in the loop
It is not performant. You should pull this out from the loop

Jquery toggle class on select when selecting the placeholder option

I am very new on JQuery, and despite my research and workarounds, i don't find out the right way to code what I want to achieve here.
So, here's the situation. I have a dropdown list like this:
<select name="your-country" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
<option value="">Your Country*</option>
<option value="France">France</option>
<option value="Belgium">Belgium</option>
<option value="Switzerland">Switzerland</option>
</select>
I want my dropdown list to be grey whenever the first placeholder "Your Country*" option is selected, and black when another option is selected.
select{
color: #000;
}
select.my-placeholder{
color: #666 !important;
}
I want to create a simple jquery block of code that adds the class .my-placeholder whenever the first option (with no value) is selected, and discard it whenever another option is selected. (I want no change in the HTML code)
How can I achieve that ?
Thank you
You can create a function which will respond to change event and selection check the value and add corresponding class
function updateColor() {
let getSelectedValue = $('select[name="your-country"]').val();
if (getSelectedValue === "") {
$('select[name="your-country"]').find('option').addClass('my-placeholder');
} else {
$('select[name="your-country"]').find('option').removeClass('my-placeholder').addClass('select');
}
}
.select {
color: red;
}
.my-placeholder {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="your-country" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" onchange="updateColor()">
<option value="">Your Country*</option>
<option value="France">France</option>
<option value="Belgium">Belgium</option>
<option value="Switzerland">Switzerland</option>
</select>

Enabling/Disabling Select Boxes based on options chosen

I'm trying to enable/disable 2 select boxes based on selections made on a third box (controller) using jQuery.
What I'm trying to achieve is that when the user selects any of the first 2 options on the controller Selection box 2 will enable, when the user selects any of the last 2 options it will disable selection box 2 and enable selection box 3. If the user goes back on their selection this should enable once again selection box 2 and disable selection box 3, however it doesn't.
My code runs perfectly on the first iteration, but if the user comes back both boxes remain disabled no matter what his choice is.
Here's the snippet
$(function() { //document ready
$('#mySelect').change(function() {
if ($('#mySelect :selected').data('type') <= 2 ) { // if user selects the first 2 items
if ( $('#mySelect2 :selected').text() == "Disabled") { //if selection 2 text is Disabled
$('#mySelect2 :selected').text('Select Option'); // replace text with Select Option
$('#mySelect2').removeAttr('disabled'); //remove disabled attribute from select box
};
$('#mySelect').change(function() {
if ( $('#mySelect :selected').data('type') > 2) {
$('#mySelect2').prop('selectedIndex', 0);
$('#mySelect2').attr('disabled', true);
};
});
//$('#mySelect').change(function() { //
// $('#mySelect3').prop('selectedIndex', 0);
// $('#mySelect3').attr('disabled', 'disabled');
// });
}
else if ($('#mySelect :selected').data('type') > 2 ) {
if ( $('#mySelect3 :selected').text() == "Disabled") { // if text on select 3 is "Disabled"
$('#mySelect3 :selected').text('Select Option'); // changes value for text on first option of 3rd box
$('#mySelect3').removeAttr('disabled'); // removes disabled on 3rd checkbox
};
$('#mySelect').change(function() {
if ( $('#mySelect :selected').data('type') <= 2) {
$('#mySelect3').prop('selectedIndex', 0);
$('#mySelect3').attr('disabled', true);
};
});
// $('#mySelect').change(function() {
// $('#mySelect2').prop('selectedIndex', 0);
// $('#myselect3').attr('disabled', 'disabled');
};
});
});
body {
padding: 20px;
background-color: #efefef;
}
div.container {
background-color: #fff;
display:flex;
}
div.result {
margin-top: 20px;
background-color: #ddd;
min-height: 40px;
}
.result > p {
color: red;
}
select {
min-width: 100px;
margin: 20px 10px;
border: 1px solid #074481
}
select option {
line-height: 30px;
color: blue;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<select name="mySelect" id="mySelect">
<option value="0" data-type="0" disabled selected>Please Select Option</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>
<select name="mySelect2" id="mySelect2" disabled>
<option value="0" data-type="0" disabled selected>Disabled</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>
<select name="mySelect3" id="mySelect3" disabled>
<option value="0" data-type="0" disabled selected>Disabled</option>
<option value="1" data-type="1">Yes</option>
<option value="2" data-type="2">No</option>
</select>
</div>
and here's the fiddle:
https://jsfiddle.net/rodcunha/cu07yfzv/12/
Thank you in advance for your help. I'm sure it is probably something really basic but I'm only starting out JS/jQ development and can't for the life of me figure it out.
There are some issues in your code.
The first is: you cannot attach an event handler each time you enter the same function:
$('#mySelect').change(function() {
Second point is: reduce complexity and make your code more readable. Avoid:
else if ($('#mySelect :selected').data('type') > 2 ) {
Another point is to avoid to repeat lines of code like in:
$('#mySelect3').prop('selectedIndex', 0);
$('#mySelect3').prop('disabled', true);
$('#mySelect3').text('Disabled');
You can chain:
$('#mySelect3').prop({selectedIndex: 0, disabled: true}).find(':selected').text("Disabled");
The snippet:
$(function() { //document ready
$('#mySelect').change(function() {
if ($('#mySelect :selected').data('type') <= 2 ) { // if user selects the first 2 items
if ( $('#mySelect2 :selected').text() == "Disabled") { //if selection 2 text is Disabled
$('#mySelect2 :selected').text('Select Option'); // replace text with Select Option
$('#mySelect2').removeAttr('disabled'); //remove disabled attribute from select box
};
$('#mySelect3').prop({selectedIndex: 0, disabled: true}).find(':selected').text("Disabled");
} else {
if ( $('#mySelect3 :selected').text() == "Disabled") { // if text on select 3 is "Disabled"
$('#mySelect3 :selected').text('Select Option'); // changes value for text on first option of 3rd box
$('#mySelect3').removeAttr('disabled'); // removes disabled on 3rd checkbox
};
$('#mySelect2').prop({selectedIndex: 0, disabled: true}).find(':selected').text("Disabled");
};
});
});
body {
padding: 20px;
background-color: #efefef;
}
div.container {
background-color: #fff;
display:flex;
}
div.result {
margin-top: 20px;
background-color: #ddd;
min-height: 40px;
}
.result > p {
color: red;
}
select {
min-width: 100px;
margin: 20px 10px;
border: 1px solid #074481
}
select option {
line-height: 30px;
color: blue;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select name="mySelect" id="mySelect">
<option value="0" data-type="0" disabled selected>Please Select Option</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>
<select name="mySelect2" id="mySelect2" disabled>
<option value="0" data-type="0" disabled selected>Disabled</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>
<select name="mySelect3" id="mySelect3" disabled>
<option value="0" data-type="0" disabled selected>Disabled</option>
<option value="1" data-type="1">Yes</option>
<option value="2" data-type="2">No</option>
</select>
</div>
Try this:
$(function() { //document ready
$('#mySelect').change(function() {
if ($('#mySelect :selected').data('type') <= 2 ) { // if user selects the first 2 items
$('#mySelect2').prop('disabled', false);
$('#mySelect3').prop('disabled', 'disabled');
}
else if($('#mySelect :selected').data('type') > 2 ){
$('#mySelect3').prop('disabled', false);
$('#mySelect2').prop('disabled', 'disabled');
}
else{
$('#mySelect2').prop('disabled', 'disabled');
$('#mySelect3').prop('disabled', 'disabled');
}
});
});
You can add an onChange event for selectors and tie them to their own functions which will make things much easier and cleaner. So it would be something like:
<select onchange='myFunction()'>
<option value="0" data-type="0" disabled selected>Please Select Option</option>
<option value="1" data-type="1">option 1</option>
<option value="2" data-type="2">option 2</option>
<option value="3" data-type="3">option 3</option>
<option value="4" data-type="4">option 4</option>
</select>

How to add border to Select2 element with jQuery?

I'm trying add border to Select2 with jQuery, but it's not working.
JavaScript:
$('#search').click(function () {
if ($('#select :selected').text() == ""){
$('#select').addClass("alert");
}
});
CSS:
.alert
{
border: 2px solid red !important;
}
HTML:
<select style="width:300px" id="felevselect">
<option disabled="disabled" selected="selected"></option>
</select>
<select style="width:120px" id="napselect">
<option disabled="disabled" selected="selected"></option>
<option value="1">Hétfő</option>
<option value="2">Kedd</option>
<option value="3">Szerda</option>
</select>
<select style="width:90px" id="select">
<option disabled="disabled" selected="selected"></option>
<option>8:00</option>
<option>9:00</option>
<option>10:00</option>
<option>11:00</option>
</select>
<button id="search" type="button" class="btn btn-default">Keres</button>
How to add border to only one Select2 element?
If I got you correctly, here is working code:
HTML
<select style="width: 100px;" id="my-select">
<option value="1">Item1</option>
<option value="2"></option>
<option value="3">Item2</option>
</select>
<button>Click me!</button>
CSS
.alert {
border: 2px solid red !important;
}
JS
$('select').select2();
$('button').on('click', function() {
if ($('#my-select :selected').text() == ""){
$('.select2').addClass("alert");
}
// using following code you can toggle alert class
// $('.select2').toggleClass("alert", $('#my-select :selected').text() == "");
});
Also provided Codepen
As you know, when using select2, this plugin hide the select element and show you some generated HTML (instead of select), you can check the generated html using browser's console
Update
If the #select is your target, you can change the code to following, then your mentioned issue (in comment section) will be fixed:
$('#select').next().addClass("alert");
You got to handle it within on change handler
$('#select').on('change', function(){
if ($('#select :selected').text() == ""){
$('#select').addClass("alert");
}
});
Here is a working example.
$( '#btnTest' ).click(function() {
if ($('select :selected').text() == ""){
$('select').addClass("alert");
} else {
$('select').removeClass("alert");
}
});
https://jsfiddle.net/WordyTheByrd/f772n4je/

javascript stops working when switching from text field to select

I'm trying to do javascript, but I'm a ruby guy and really suck with javascript. I have a one field form (text field and submit button) in which javascript only allows the form to be submitted if there is text in the field. However, I switched the field type from a text field to a select. Now, the form can't submit. I am almost certain the problem is with my javascript. Here is the code I have that word with a text field. How do I get it to work with the select?
Form:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<li>
<input id="resume-field" class="field field288" type="text"
value="Type a speciality you want to add to your profile"
title="Type a speciality you want to add to your profile"
name="skill[label]"></input>
</li>
<li>
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
Javascript:
(function($){
$(document).on('focusin', '#resume-field', function() {
$(this).parents().find('.button-add-disabled').removeClass('button-add-disabled');
}).on('focusout', '#resume-field', function(){
if(this.value==' '||this.title==this.value) {
$(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
$(this).parents().find('.button-add').removeClass('button-add-disabled');
}
});
$('.button-add-disabled').click(function(){
return !$(this).hasClass('button-add-disabled');
});
}(jQuery));
css:
.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block;
font-size: 11px; line-height: 28px ; color: #fff; text-align: center;
font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto;
border-radius: 3px; }
.button-add:hover { text-decoration: none;
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
}
.button-add-disabled { background: url(/assets/add-specialities-disabled.png)
repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px; }
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png)
repeat-x 0 0; box-shadow: 0 0 0 0; }
Html for form with drop down:
<select id="resume-field" name="skill[label]">
<option value="1" title="option_1"></option>
<option value="2" title="option 2" selected="selected"></option>
</select>
I made a minimal example (jsfiddle), doing what I think you asked for, but not using your code. You can probably adapt it if it does what you want.
HTML
<form>
<select id="selectme">
<option value="">-- Please select one --</option>
<option value="1">1</option>
<option value="2">Two</option>
<option value="3">III</option>
</select>
<input type="submit" value="submit" id="clickme">
</form>
JS
$(function(){
$("#clickme").prop("disabled", true);
$("#selectme").change(function(){
if ($("#selectme").val() != "") {
$("#clickme").removeAttr("disabled");
} else {
$("#clickme").prop("disabled", true);
}
});
})
CSS
#clickme {
background-color: #f00;
}
#clickme:disabled {
background-color: #eee;
}
you stated that you have switched the input field type from text to select. Therefore you need to add this kind of html:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
To start, your HTML is a little bit off:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<!-- needs a parent UL element -->
<li>
<input id="resume-field" class="field field288" type="text"
value="Type a speciality you want to add to your profile"
title="Type a speciality you want to add to your profile"
name="skill[label]"></input>
<!-- as a side not, input tags can be self-close (<input type="text" />)
</li>
<li>
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
If you've changed your input to a select element, then you need option elements, of which each can have a "value" attribute, as follows:
<select>
<option value="something">Something</option>
</select>
In the context of what you are trying to do, I'm not sure that a select element would fit your needs if you are wanting the user to type something in... You could pre-fill the select element with option elements, each corresponding to a specific "specialty that they want to add to their profile".
UPDATED and SIMPLIFIED:
Assuming that you did change the <input> elements to <select><option></select> elements, your code will work fine with only minor changes.
jsFiddle Demo
Really, you only need to track the change event:
HTML:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<li>
Select a specialty to add to your profile:<br>
<select id="resume-field" name="skill[label]">
<option value="default">Select a speciality:</option>
<option value="cod3r">Programming</option>
<option value="pizza">Pizza consumption</option>
</select>
</li>
<li>
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
javascript/jQuery:
$(document).on('change', '#resume-field', function() {
if(this.value=='default') {
$(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
$(this).parents().find('.button-add').removeClass('button-add-disabled');
}
});
PS: Of course, to make the jsFiddle work I also had to temporarily remove the url() etc from your css...

Categories