form validation for at least on select-option is selected

form validation for at least on select-option is selected - javascript

My form layout is similar to below:
<form action='' method="post" id='myform'>
<select name='select1'>
<option value=''>select option</select>
<option value='a'> a </option>
<option value='b'> b </option>
<option value='c'> c </option>
</select>
<select name='select2'>
<option value=''>select option</select>
<option value='e'> e </option>
<option value='f'> f </option>
<option value='g'> g </option>
</select>
<select name='select3'>
<option value=''>select option</select>
<option value='h'> h </option>
<option value='i'> i </option>
<option value='j'> j </option>
</select>
</form>
<script> $('#myform').validate(); </script>
Note: I have included jquery.js and jquery.validate.js files.
Here, 3 select-option are in form. I need to validate at least one select-option only.

function selectValidate() {
var check = false;
$.each($('select'), function(index, data) {
if (data.val() !== ''){
check = true;
}
});
return check;
}

create your own validator method:
$.validator.addMethod("selectNone", function(value, element) {if (element.value == " ") {return false;} else {return true};} ),
and then add in rules:
yourSelectID1: {required:true, selectNone:true},
yourSelectID2: {required:true, selectNone:true},
yourSelectID3: {required:true, selectNone:true},

There is a mistake on your html code. You should change each <option value=''>select option</select> to this <option value=''>select option</option>. So your html will be something like this: (I added the submit button to show the functionality)
jsFiddle Live Demo
HTML
<form action='' method="post" id='myform' >
<select name='select1' >
<option value=''>select option</option>
<option value='a'> a </option>
<option value='b'> b </option>
<option value='c'> c </option>
</select>
<select name='select2' >
<option value=''>select option</option>
<option value='e'> e </option>
<option value='f'> f </option>
<option value='g'> g </option>
</select>
<select name='select3' >
<option value=''>select option</option>
<option value='h'> h </option>
<option value='i'> i </option>
<option value='j'> j </option>
</select>
<input type='submit' value='validate '>
</form>
The main function is validateSelects().
JS
function validateSelects()
{
var m = false;
$.each($('select'),function()
{
if( $(this).val() != ''){ m=true; }
});
return(m);
}
// For the functionality.
$('#myform').on('submit',function()
{
return validateSelects();
});

Related

How to change options of a selection because of another selection with Javascript?

I would like to change the options of a selection dynamically in HTML if a checkbox is checked/because of another selection.
These are my selections:
<!-- choosing -->
<select name="choose" id="choose">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<!-- if choose == o1 -->
<select name="subject1" id="subject1">
<option value="">-- choose --</option>
<option value="Religion">Religion</option>
<option value="Spansich">Spanisch</option>
<option value="Französisch">Französisch</option>
<option value="Englisch">Englisch</option>
<option value="Latein">Latein</option>
</select>
<!-- if choose == o2 -->
<select name="subject2" id="subject2">
<option value="">-- choose --</option>
<option value="Geschichte">Geschichte</option>
<option value="GMK">GMK</option>
<option value="WBS">WBS</option>
<option value="Kunst">Kunst</option>
</select>
I guess you would use JavaScript for this, but I'm really new to all of that, so, could you show me what kind of function could be used to solve this.

<select name="choose" id="choose">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<select name="subject" id="subject"></select>
<script>
const option = document.getElementById("choose")
option.addEventListener("change", (evt) => {
let options1 = `<option value="">-- choose --</option>
<option value="Religion">Religion</option>
<option value="Spansich">Spanisch</option>
<option value="Französisch">Französisch</option>
<option value="Englisch">Englisch</option>
<option value="Latein">Latein</option>`
let options2 = `<option value="">-- choose --</option>
<option value="Geschichte">Geschichte</option>
<option value="GMK">GMK</option>
<option value="WBS">WBS</option>
<option value="Kunst">Kunst</option>`
if(option.value == "o1")
document.getElementById("subject").innerHTML = options1;
else if(option.value == "o2")
document.getElementById("subject").innerHTML = options2;
else
document.getElementById("subject").innerHTML = '';
})
</script>

Try this
<select name="choose" id="choose" onchange="custom_change()">
<option value="">-- choose --</option>
<option value="o1">Option1</option>
<option value="o2">Option2</option>
</select>
<select name="subject2" id="subject"></select>
<script>
function custom_change()
{
var choose_value = document.getElementById("choose").value;
var option_1 = "<option value=''>-- choose --</option><option value='Religion'>Religion</option><option value='GMK'>GMK</option><option value='WBS'>WBS</option><option value='Kunst'>Kunst</option>";
var option_2 = "<option value=''>-- choose --</option><option value='Geschichte'>Geschichte</option><option value='GMK'>GMK</option><option value='WBS'>WBS</option><option value='Kunst'>Kunst</option>";
if(choose_value == "o1")
document.getElementById("subject").innerHTML = option_1;
else if(choose_value == "o2")
document.getElementById("subject").innerHTML = option_2;
else
document.getElementById("subject").innerHTML = '';
}
</script>

how to add selected values from two <select> tag and show sum in third <select>

$(document).ready(function () {
var presentyear = new Date().getFullYear();
for(y = 1995; y <= presentyear; y++)
{
var optn = document.createElement("option");
optn.text = y;
optn.value = y;
document.getElementById('year10').options.add(optn);
}
});
<select id="year10">
<option>select year</option>
//all the values will be dynamically added as called by function in js
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<select id="year12">
<option id="calvalue"> </option>
</select>
I want to save selected values from two select tags and show the sum in a separate third select dropdown.
As in the snippet above, I have three select tags, the javascript code fills the options for 'year10' select from 1995 to 2017.
The 'gap' select have 5 values.
Now, i want to add the selected values of 'year10' and 'gap' and show in the single option (with id='calvalue') in 'year12' select tag.
Also, when i change the values in either first two selects, the summed value in year12 must change with it.
How to do this?
Any help is appreciated

To achieve this you just need to add a change event handler to both of the selects which reads the values and adds them together.
Note that putting the result in another option of a select is a little odd. I'd suggest using a readonly text box instead, something like this:
$(function() {
var presentyear = new Date().getFullYear(), options = '';
for (y = 1995; y <= presentyear; y++) {
options += '<option value="' + y + '">' + y + '</option>';
}
$('#year10').append(options);
$('#year10, #gap').change(function() {
var year = parseInt($('#year10').val(), 10) || 0;
var gap = parseInt($('#gap').val(), 10) || 0;
$('#year12').val(!year ? '' : year + gap);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year10">
<option>select year</option>
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<input type="text" readonly="readonly" id="year12">

if you're ok with jquery... then
<select id="num1" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="num2" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="res">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<script>
function addThem(){
var num1 = $("#num1").val();
var num2 = $("#num2").val();
$("#res").val(Number(num1) +Number(num2));
}
</script>
this Plunker sample i did should help you out

function jsFunction(){
var myselect = document.getElementById("selectOpt");
$("#secondselectbox").val(myselect);
}
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="secondselectbox">
</select>
In this code After value selection you can do any new function(another select tag).

You will have to work on the specifics your self, but this should get you started.
let nextOption = {first: 1, seccond: 1}
function selected(selector, option) {
if (selector === 'first') {
nextOption.first = parseInt(option.value);
}
else if (selector === 'seccond') {
nextOption.seccond = parseInt(option.value);
}
let newOption = document.createElement("option");
newOption.text = nextOption.first + nextOption.seccond;
document.getElementById('final').add(newOption);
}
selected();
<select onClick="selected('first', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select onClick="selected('seccond', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="final">
</select>

Alert when selecting some particular value from drop down in JavaScript

Below are the dropdown data..
<select size="1" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
I want to get alert/pop up when I select the data which is start from IN in drop down list.

Try this:
https://jsfiddle.net/mminetto/bggwnkwj/
var select = $('select[name="Test_Data"]');
select.on('change', function(){
var options = select.children('option:selected');
if(options.length > 0 && options[0].innerText.startsWith("IN")){
alert(this.value);
alert(options[0].innerText);
}
});

<select size="1" name="Test_Data" id="dropdown">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
in javascript
<script>
$("#dropdown").change(function(){
if($(this).find("option:selected").text().startsWith("IN")){
alert("option with IN selected =>"+$(this).find("option:selected").text());
}
});
</script>

Try this code
HTML
<select size="1" onChange="showAlert()" id="dataCountry" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
</select>
JavaScript
<script>
function showAlert() {
var el = document.getElementById('dataCountry'); // get the index
var text = el.options[el.selectedIndex].innerHTML; // get the label
var n = text.search("IN"); //search number of IN
if(n>=0) {
alert(text);
}
}
</script>

Add data into a Select

I have this select; to select countries and add to a new select multiple with a limit of 5 countries, but I just want to add 1 country by select or more countries if i do a multiple select.
My mistake is in my function addC(), when I want to add more than 1 country in my select, it add the several countries in 1 option tag like this:
<option>South KoreaUSAJapan</option>
What I can modify to display the following way if i do a multiple select?:
<option>South Korea</option>
<option>USA</option>
<option>Japan</option>
My code:http://jsbin.com/osesem/4/edit
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected").text());
$("#addCountry").append("<option>" + newC + "</option>");
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label for="provincia2"><b>¿Country?</b></label><br>
<span>
<select multiple="multiple" size="5" id="countries">
<option value="1">South Korea</option>
<option value="2">USA</option>
<option value="2">Japan</option>
<option value="3">Italy</option>
<option value="4">Spain</option>
<option value="5">Mexico</option>
<option value="6">England</option>
<option value="7">Phillipins</option>
<option value="8">Portugal</option>
<option value="9">France</option>
<option value="10">Germany</option>
<option value="11">Hong Kong</option>
<option value="12">New Zeland</option>
<option value="13">Ireland</option>
<option value="14">Panama</option>
<option value="15">Norwey</option>
<option value="16">Sweeden</option>
<option value="17">India</option>
<option value="18">Morroco</option>
<option value="19">Russia</option>
<option value="20">China</option>
</select>
</span>
<div class="addremover">
<input class="add" type="button" onclick="addC()" value="Addd »" />
<br/>
</div>
<span>
<select id="addCountry" multiple="multiple" size="5">
</select>
</span>

use each function to loop through the text and append it..
try this
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected"));
newC.each(function(){
$("#addCountry").append("<option>" + $(this).text() + "</option>");
})
}
}
JSbin here

Or just clone the selected <option>'s
function addC() {
if ($('#countries option:selected').size() < 5)
{
$('#addCountry').append($('#countries option:selected').clone());
}
else
{
alert('you can only select 5');
}
}

Jquery validate and a list of select box

How Can i specific require and unique condition for a list of select box like below?
<form name="signupForm" class="cmxform" id="signupForm" method="get" action="">
<select name="category[]" id="cat_1">
<option value="">Select One</option>
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
<option value="4">dd</option>
</select>
<select name="category[]" id="cat_2">
<option value="">Select One</option>
<option value="5">ee</option>
<option value="6">ff</option>
<option value="7">gg</option>
<option value="8">hh</option>
</select>
<select name="category[]" id="cat_3">
<option value="">Select One</option>
<option value="9">ii</option>
<option value="10">jj</option>
<option value="11">kk</option>
<option value="12">ll</option>
</select>
<input class="submit" type="submit" value="Submit">
</form>
Notice that there are the number of cat is not fixed, it can be more than 3,
so how to make it required for each selectbox,
and each selectbox chosen value must be unique using jquery validate plugin? Thank you

var $selects = $('form select[name^=category]'),
values = [];
$(':submit').click(function(e) {
e.preventDefault();
values = [];
$($selects).each(function() {
if($(this).val()) {
values.push($(this).val());
}
});
if(!values.length) {
alert('Please select all categories');
return false;
}
if(values.length < $selects.length || $.unique(values).length < $selects.length) {
alert('Please select all categories and be unique');
return false;
}
});
DEMO

Here is a great jQuery validation plugin that will make your life easier: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
This is all you need to do: (the plugin does the rest)
<select id="sport" class="validate[required]" name="sport">
<option value="">--Select--</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
Hope that helps :)

We Keep Coding

JavaScript is the programming language of the Web.

form validation for at least on select-option is selected - javascript

function selectValidate() { var check = false; $.each($('select'), function(index, data) { if (data.val() !== ''){ check = true; } }); return check; }

Related

How to change options of a selection because of another selection with Javascript?

how to add selected values from two <select> tag and show sum in third <select>

Alert when selecting some particular value from drop down in JavaScript

Add data into a Select

Jquery validate and a list of select box

Categories

Resources