Develop Reference

How can I stop my JavaScript from giving the <nav> element the "is-selected" class name too

When I select each colour tab, the image changes colour. However, when you miss the tab or select just off the colour tab or any other part of the “nav” container for the “a” element it adds the is-select class to this also; meaning there is no image. Very frustrated, and would like some help please as to how I can stop the “nav” element being given the is-select classname, as I just need the “a” elements.
HTML
<div class="tab-pane__swatch-container">
<div class="tab-pane__swatch-content">
<div class="tab-pane is-selected" id="red">
<img src="https://www.bristolstreetversa.com/images/colour_swatches/Grand-Tourneo-Connect/Red.png" alt="Red Versa" class="tab-pane__swatch-image">
</div>
<div class="tab-pane" id="black">
<img src="https://www.bristolstreetversa.com/images/colour_swatches/Grand-Tourneo-Connect/Black.png" alt="Red Versa" class="tab-pane__swatch-image">
</div>
</div>
<nav class="row-1 tab-pane__swatch-selector" id="js-swatch">
</nav>
</div>
CSS
.tab-pane__swatch-image {
width: 90%;
}
.row-1 {
display: flex;
flex-flow: wrap;
justify-content: center;
list-style: none;
}
.tab-pane__swatch-link {
width: 40px;
height: 40px;
cursor: pointer;
margin: 0 20px 10px 0;
background-color: blue;
border: 2px solid #fff;
box-shadow: 3px 1px 10px #a9a9a9;
border-radius: 50%;
}
.tab-pane__swatch-link--red {
background: #ff0000;
}
.tab-pane__swatch-link--black {
background: #000;
}
.tab-pane {
display: none;
}
.tab-pane.is-selected {
display: table;
}
a.is-selected::before {
content: '';
color: #fff;
position: absolute;
display: initial;
margin: 8px 0 0 15px;
border-style: solid;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
height: 1rem;
width: 0.5rem;
}
JS
function onSwatchClick(event) {
let selectedSwatches = document.querySelectorAll('.is-selected');
for(let i = 0; i < selectedSwatches.length; i++) {
selectedSwatches[i].className = selectedSwatches[i].className.replace('is-selected', '');
}
event.preventDefault();
event.target.className += ' is-selected';
document.getElementById(event.target.href.split('#')[1]).className += ' is-selected';
}
const elswatchClick = document.getElementById('js-swatch');
elswatchClick.addEventListener('click', onSwatchClick, false);
Hope you can help thank you.

Your event handler is targeting the tab parent element, not the individual tab triggers. As such, it's not updating the element classes correctly.
Instead, I targeted the class of tab-pane__swatch-link and looped through them, attaching the event listener to each one.
function onSwatchClick(event) {
let selectedSwatches = document.querySelectorAll('.is-selected');
for(let i = 0; i < selectedSwatches.length; i++) {
selectedSwatches[i].className = selectedSwatches[i].className.replace('is-selected', '');
}
event.preventDefault();
event.target.className += ' is-selected';
document.getElementById(event.target.href.split('#')[1]).className += ' is-selected';
}
const elswatchClick = document.querySelectorAll('.tab-pane__swatch-link');
for (var i = 0; i < elswatchClick.length; i++) {
elswatchClick[i].addEventListener('click', onSwatchClick, false);
}
.tab-pane__swatch-image {
width: 90%;
}
.row-1 {
display: flex;
flex-flow: wrap;
justify-content: center;
list-style: none;
}
.tab-pane__swatch-link {
width: 40px;
height: 40px;
cursor: pointer;
margin: 0 20px 10px 0;
background-color: blue;
border: 2px solid #fff;
box-shadow: 3px 1px 10px #a9a9a9;
border-radius: 50%;
}
.tab-pane__swatch-link--red {
background: #ff0000;
}
.tab-pane__swatch-link--black {
background: #000;
}
.tab-pane {
display: none;
}
.tab-pane.is-selected {
display: table;
}
a.is-selected::before {
content: '';
color: #fff;
position: absolute;
display: initial;
margin: 8px 0 0 15px;
border-style: solid;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
height: 1rem;
width: 0.5rem;
}
<div class="tab-pane__swatch-container">
<div class="tab-pane__swatch-content">
<div class="tab-pane is-selected" id="red">
<img src="https://www.bristolstreetversa.com/images/colour_swatches/Grand-Tourneo-Connect/Red.png" alt="Red Versa" class="tab-pane__swatch-image">
</div>
<div class="tab-pane" id="black">
<img src="https://www.bristolstreetversa.com/images/colour_swatches/Grand-Tourneo-Connect/Black.png" alt="Red Versa" class="tab-pane__swatch-image">
</div>
</div>
<nav class="row-1 tab-pane__swatch-selector" id="js-swatch">
</nav>
</div>

EDIT: Ryan's answer is much cleaner than this.
You could make sure that the element that was actually clicked was an "A" tag. Here's how you could do that:
if (event.target.tagName === "A") {
// An <a> tag was clicked
}

How to show/hide tab sections using checkboxes with the same name?

I have tabs section with 3 sections, Each tab has its own heading and content.
But I don't want to show all the 3 tabs, Just what the user select by checking the related checkbox, There are 3 related checkboxes, One for each tab.
Here is the code:
//Function to hide all siblings but leave the clicked one
function hideAllChildrenButOne(parentId, toRevealId) {
$('#'+parentId).children().css('display', 'none');
$('#'+toRevealId).css('display', 'block');
}
//Function to show the tab header and content when a checkbox is checked
function showSection(parentId, toRevealId){
$('#'+parentId).children().css('display', 'none');
$('#'+toRevealId).css('display', 'block');
var relatedSection = $('#'+toRevealId).attr('data-section');
$('#'+relatedSection).css('display', 'block');
}
$(document).ready(function() {
//On clicking a tab header('Father', 'Mother', 'Brother')
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var related_section = $(this).attr('data-section');
hideAllChildrenButOne('relative_content', related_section);
});
//On changing any checkbox with name=relative[]
$("input[name='relative[]']").change( function () {
var self = $(this);
if (self.is(":checked")) {
showSection('relative_tabs', self.attr('data-header'), self.attr('id'));
}
});
});
.relative_container{
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
}
#media (min-width: 768px){
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.relative_tabs{
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
}
.relative_tabs:before{
display: table;
content: " ";
}
.relative_tabs>li{
display: inline-block;
margin-bottom: -1px;
}
.relative_tabs>li>a{
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.relative_tabs>li.tab_active>a{
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.relative_content div{
display: none;
}
.relative_content>div.active{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab"></label>
<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab"></label>
<label>Brother<input type="checkbox" name="relative[]" value="Brother" data-header="brother-tab"></label>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="father-tab" data-section="Father_info" class="tab-header tab_active">
<a>Father</a>
</li>
<li data-section="Mother_info" class="tab-header" id="mother-tab">
<a>Mother</a>
</li>
<li data-section="Brother_info" class="tab-header" id="brother-tab">
<a>Brother</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content active" id="Father_info">Father Info</div>
<div class="tab-content" id="Mother_info">Mother Info</div>
<div class="tab-content" id="Brother_info">Brother Info</div>
</div>
</div>
</form>
Now it's showing one tab on checking any checkbox, So if I check Father checkbox father tab would be shown, Then if I check Mother checkbox mother tab would be shown and father tab would become hidden.
I want to show the tabs of the checked checkboxes only, So if 1 checkbox is checked only the related tab is shown, If 2 checkboxes are checked the related two tabs are shown and the 3rd is hidden..etc.
Of course if the user checks all the checkboxes and then unchecked them, They would become hidden.

What you are trying to achieve can easily be done by re-writing the showSection function. You just need to toggle the visibility of the tabs everytime a checkbox is selected.
function showSection(parentId, toRevealId) {
$('#' + toRevealId).toggle('display');
if ($('input[data-header=' + toRevealId + ']').is(':checked')) {
$('#' + toRevealId).trigger('click');
}
}
In the code below, apart from modifying the showSection function - I've initially selected all the checkbox so as to align the toggle functionality. You will still need to work on the code to include functionality to select the next active tab when the active tab is hidden (like the if block above which is selecting the tab when the corresponding checkbox is selected).
Hope this helps.
//Function to hide all siblings but leave the clicked one
function hideAllChildrenButOne(parentId, toRevealId) {
$('#' + parentId).children().css('display', 'none');
$('#' + toRevealId).css('display', 'block');
}
//Function to show the tab header and content when a checkbox is checked
function showSection(parentId, toRevealId) {
$('#' + toRevealId).toggle('display');
if ($('input[data-header=' + toRevealId + ']').is(':checked')) {
$('#' + toRevealId).trigger('click');
}
}
$(document).ready(function() {
//On clicking a tab header('Father', 'Mother', 'Brother')
$('.tab-header').click(function(event) {
$(this).addClass('tab_active').siblings().removeClass('tab_active');
var related_section = $(this).attr('data-section');
hideAllChildrenButOne('relative_content', related_section);
});
//On changing any checkbox with name=relative[]
$("input[name='relative[]']").change(function() {
var self = $(this);
//if (self.is(":checked")) {
showSection('relative_tabs', self.attr('data-header'), self.attr('id'));
//}
});
});
.relative_container {
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
-webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
}
#media (min-width: 768px) {
.relative_container {
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.relative_tabs {
margin-bottom: 15px;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 7px 0;
}
.relative_tabs:before {
display: table;
content: " ";
}
.relative_tabs>li {
display: inline-block;
margin-bottom: -1px;
}
.relative_tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
padding: 9px 15px;
text-decoration: none;
cursor: pointer;
}
.relative_tabs>li.tab_active>a {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.relative_content div {
display: none;
}
.relative_content>div.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<label>Father<input type="checkbox" name="relative[]" value="Father" data-header="father-tab" checked></label>
<label>Mother<input type="checkbox" name="relative[]" value="Mother" data-header="mother-tab" checked></label>
<label>Brother<input type="checkbox" name="relative[]" value="Brother" data-header="brother-tab" checked></label>
<div class="relative_container">
<div class="relative_header">
<ul class="relative_tabs" id="relative_tabs">
<li id="father-tab" data-section="Father_info" class="tab-header tab_active">
<a>Father</a>
</li>
<li data-section="Mother_info" class="tab-header" id="mother-tab">
<a>Mother</a>
</li>
<li data-section="Brother_info" class="tab-header" id="brother-tab">
<a>Brother</a>
</li>
</ul>
</div>
<div class="relative_content" id="relative_content">
<div class="tab-content active" id="Father_info">Father Info</div>
<div class="tab-content" id="Mother_info">Mother Info</div>
<div class="tab-content" id="Brother_info">Brother Info</div>
</div>
</div>
</form>

Split BUtton is not Working

I am using this example on my application.
https://codepen.io/kushalpandya/pen/IAhin/
Button is appearing perfectly on the screen. I place div section and all css acordingly. Now when I click on arrow button don't know why options are not showing.
My Split button is not working.
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
Did I placed <Script> tag correctly.

also you need to add css! check this:
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
.container {
text-align: center;
}
.container > h2 {
text-align: center;
}
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #444;
text-decoration: none;
}
.x-button-drop-menu li a:hover {
background: #D3D3D3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>

Clickable drop-down menu javascript

I have used JavaScript to create 3 clickable drop-down menu button in a webpage. when I click one button, script is works well. I can see the following menu is displayed. When I another button, the following menu is displayed. however, the previous menu is still there.
Here is my script. Hope someone can help me. Thank you!
<script type="text/javascript" >
$(document).ready(function() {
$(".account").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
// CSS
.dropdown
{
color:#000;
margin: 0px 22px 0 0;
width: 300px;
height: 30px;
text-align:center;
}
.submenu
{
background:#FFF ;
position: absolute;
top: 118px;
left: 515px;
z-index: 100;
width: 250px;
display: none;
border-radius: 6px;
border: outset 2px #0066FF;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
}
.dropdown li a
{
color:#555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
margin-top:-5px;
}
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 18px;
line-height: 10px;
color: #000;
border: ridge 2px #0066FF;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 0px;
height: 20px;
width: 300px;
margin: 0px 0 0 0px;
text-align:center;
text-decoration: none;
background: url(images-new/arrow.png) 275px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
// html
<div class="dropdown">
<a class="account" >My Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li >Settings</li>
<li >Send Feedback</li>
</ul>
</div>
</div>

My personal recommendation is to do this with with a combination of JS & CSS.
You should use an active class to hide and show your elements:
//JS
$('.menu a').on('click', function({
$('.menu a').removeClass('active');
$(this).addClass('active');
});
// CSS
.active .submenu {
display: block;
}

jQuery check if 4 fields are filled in

I am working on a form with 4 fields which I directly validate. So if a field is filled in correctly I give this field green borders for example. But now I want to do a check if all the fields are filled in and then I show a message.
My idea is to first make a function for each field like this below. And then check the 4 functions if they return true. But that didn't work, so I first check a single function (in this example for the field 'width') if they match, an alert returns. But this also doesn't work, so I cannot go any further now.
Can anybody help me to make this function work first?
(The #config-steps #width is an input field with the an id 'width')
My code snippet:
jQuery(document).ready(function($) {
// Validate text fields
$("#config-steps #width, #config-steps #height").on('input', function() {
var input = $(this);
var width = input.val();
if (width.match(/^\d+$/)) {
input.removeClass('invalid').addClass('valid');
input.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
input.removeClass('valid').addClass('invalid');
input.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Validate select box
$("#config-steps #type").change(function() {
var slct = $(this);
var type = slct.val()
if (type) {
slct.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
slct.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Check all fields filled in.
function check_field() {
function validate_width() {
var width = $("#config-steps #width").val();
if (width.match(/^\d+$/)) {
alert('test');
} else {
return false;
}
}
}
});
.valid {
background: #f7fff7 !important;
border: 1px solid #459b40 !important;
}
.invalid {
background: #fff7f7 !important;
border: 1px solid #ff0000 !important;
}
.clear {
clear: both;
}
#config-steps li:nth-child(odd) {
background: #f6f8f9;
}
#config-steps li {
border-bottom: 1px solid #e1e6ea;
padding: 20px;
list-style: none;
}
#config-steps li .step-number {
color: #FFF;
font-size: 16px;
display: inline-block;
background: #f08f02;
border: 1px solid #d98c1a;
padding: 8px 11px;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
min-width: 8px;
text-align: center;
margin: 0 15px 0 0;
-moz-box-shadow: inset 0px 0 1px #FFF;
-webkit-box-shadow: inset 0px 0 1px #FFF;
box-shadow: inset 0px 0 1px #FFF;
}
#config-steps li .valid-step {
background: #55ad50;
border: 1px solid #2b8825;
}
#config-steps li .unvalid-step {
background: #ed7171;
border: 1px solid #cf0000;
}
#config-steps li .step-description {
font-size: 14px;
float: left;
padding: 10px 0 0 0;
}
#config-steps li .step-action {
float: right;
}
#config-steps li .step-action .textfield {
background: #f1f9ff;
border: 1px solid #9eabb6;
padding: 7px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#config-steps li .step-action input[type="text"] {
width: 180px;
text-align: right;
}
#config-steps li .step-action input[type="text"]:focus {
background: #fffcf6;
border: 1px solid #f6a41d;
}
#config-steps li .step-action select {
margin: 7px 3px 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="config">
<ul id="config-steps">
<li> <span class="step-number">1</span>
<p class="step-description">Width (mm)</p>
<div class="step-action">
<input autofocus type="text" class="textfield" id="width" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">2</span>
<p class="step-description">Height (mm)</p>
<div class="step-action">
<input type="text" class="textfield" id="height" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">3</span>
<p class="step-description">Glasstype (mm)</p>
<div class="step-action">
<select id="type">
<option value="">-- Select glasstype --</option>
<option value="1">Mat</option>
<option value="2">Glossy</option>
</select>
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
</ul>
<!--End config-steps-->
</form>
<!--End config-->

Use $('#width').change for checking
$('input,select').change(function(){
var width = $("#config-steps #width").val();
var height = $("#config-steps #height").val();
var size = $("#config-steps select").val();
if (width.match(/^\d+$/)&&height.match(/^\d+$/)&&size.match(/^\d+$/)) {
alert('Well done!');
} else {
return false;
}
});
Updated here:
jQuery(document).ready(function($) {
// Validate text fields
$("#config-steps #width, #config-steps #height").on('input', function() {
var input = $(this);
var width = input.val();
if (width.match(/^\d+$/)) {
input.removeClass('invalid').addClass('valid');
input.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
input.removeClass('valid').addClass('invalid');
input.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Validate select box
$("#config-steps #type").change(function() {
var slct = $(this);
var type = slct.val()
if (type) {
slct.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
slct.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Check all fields filled in.
$('input,select').change(function() {
var width = $("#config-steps #width").val();
var height = $("#config-steps #height").val();
var size = $("#config-steps select").val();
if (width.match(/^\d+$/) && height.match(/^\d+$/) && size.match(/^\d+$/)) {
alert('Well done!');
} else {
return false;
}
});
});
.valid {
background: #f7fff7 !important;
border: 1px solid #459b40 !important;
}
.invalid {
background: #fff7f7 !important;
border: 1px solid #ff0000 !important;
}
.clear {
clear: both;
}
#config-steps li:nth-child(odd) {
background: #f6f8f9;
}
#config-steps li {
border-bottom: 1px solid #e1e6ea;
padding: 20px;
list-style: none;
}
#config-steps li .step-number {
color: #FFF;
font-size: 16px;
display: inline-block;
background: #f08f02;
border: 1px solid #d98c1a;
padding: 8px 11px;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
min-width: 8px;
text-align: center;
margin: 0 15px 0 0;
-moz-box-shadow: inset 0px 0 1px #FFF;
-webkit-box-shadow: inset 0px 0 1px #FFF;
box-shadow: inset 0px 0 1px #FFF;
}
#config-steps li .valid-step {
background: #55ad50;
border: 1px solid #2b8825;
}
#config-steps li .unvalid-step {
background: #ed7171;
border: 1px solid #cf0000;
}
#config-steps li .step-description {
font-size: 14px;
float: left;
padding: 10px 0 0 0;
}
#config-steps li .step-action {
float: right;
}
#config-steps li .step-action .textfield {
background: #f1f9ff;
border: 1px solid #9eabb6;
padding: 7px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#config-steps li .step-action input[type="text"] {
width: 180px;
text-align: right;
}
#config-steps li .step-action input[type="text"]:focus {
background: #fffcf6;
border: 1px solid #f6a41d;
}
#config-steps li .step-action select {
margin: 7px 3px 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="config">
<ul id="config-steps">
<li> <span class="step-number">1</span>
<p class="step-description">Width (mm)</p>
<div class="step-action">
<input autofocus type="text" class="textfield" id="width" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">2</span>
<p class="step-description">Height (mm)</p>
<div class="step-action">
<input type="text" class="textfield" id="height" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">3</span>
<p class="step-description">Glasstype (mm)</p>
<div class="step-action">
<select id="type">
<option value="">-- Select glasstype --</option>
<option value="1">Mat</option>
<option value="2">Glossy</option>
</select>
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
</ul>
<!--End config-steps-->
</form>
<!--End config-->

You will need to call the
check_field();
Function after each input has been updated. I've created an example of how you can achieve this.
http://jsfiddle.net/EsBTg/6/

You can use .each() function in jQuery to test several elements at once:
function validate_width() {
var error = 0;
$("#width, #height, #type").each(function () {
if (!$(this).val().match(/^\d+$/)) {
error++;
}
});
if (!error){
alert("Everything's fine!");
}
}
jQuery(document).ready(function($) {
// Validate text fields
$("#config-steps #width, #config-steps #height").on('input', function() {
var input = $(this);
var width = input.val();
if (width.match(/^\d+$/)) {
input.removeClass('invalid').addClass('valid');
input.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
input.removeClass('valid').addClass('invalid');
input.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Validate select box
$("#config-steps #type").change(function() {
var slct = $(this);
var type = slct.val()
if (type) {
slct.parents('li').find('.step-number').removeClass('unvalid-step').addClass('valid-step');
} else {
slct.parents('li').find('.step-number').removeClass('valid-step').addClass('unvalid-step');
}
});
// Check all fields filled in.
function validate_width() {
var error = 0;
$("#width, #height, #type").each(function() {
if (!$(this).val().match(/^\d+$/)) {
error++;
}
});
if (error) {
alert("There were " + error + " errors.");
} else {
alert("Everything's fine!");
}
}
$("#check").click(function() {
validate_width();
})
});
.valid {
background: #f7fff7 !important;
border: 1px solid #459b40 !important;
}
.invalid {
background: #fff7f7 !important;
border: 1px solid #ff0000 !important;
}
.clear {
clear: both;
}
#config-steps li:nth-child(odd) {
background: #f6f8f9;
}
#config-steps li {
border-bottom: 1px solid #e1e6ea;
padding: 20px;
list-style: none;
}
#config-steps li .step-number {
color: #FFF;
font-size: 16px;
display: inline-block;
background: #f08f02;
border: 1px solid #d98c1a;
padding: 8px 11px;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
float: left;
min-width: 8px;
text-align: center;
margin: 0 15px 0 0;
-moz-box-shadow: inset 0px 0 1px #FFF;
-webkit-box-shadow: inset 0px 0 1px #FFF;
box-shadow: inset 0px 0 1px #FFF;
}
#config-steps li .valid-step {
background: #55ad50;
border: 1px solid #2b8825;
}
#config-steps li .unvalid-step {
background: #ed7171;
border: 1px solid #cf0000;
}
#config-steps li .step-description {
font-size: 14px;
float: left;
padding: 10px 0 0 0;
}
#config-steps li .step-action {
float: right;
}
#config-steps li .step-action .textfield {
background: #f1f9ff;
border: 1px solid #9eabb6;
padding: 7px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#config-steps li .step-action input[type="text"] {
width: 180px;
text-align: right;
}
#config-steps li .step-action input[type="text"]:focus {
background: #fffcf6;
border: 1px solid #f6a41d;
}
#config-steps li .step-action select {
margin: 7px 3px 0 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="config">
<ul id="config-steps">
<li> <span class="step-number">1</span>
<p class="step-description">Width (mm)</p>
<div class="step-action">
<input autofocus type="text" class="textfield" id="width" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">2</span>
<p class="step-description">Height (mm)</p>
<div class="step-action">
<input type="text" class="textfield" id="height" />
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
<li> <span class="step-number">3</span>
<p class="step-description">Glasstype (mm)</p>
<div class="step-action">
<select id="type">
<option value="">-- Select glasstype --</option>
<option value="1">Mat</option>
<option value="2">Glossy</option>
</select>
</div>
<!--End step-action-->
<div class="clear"></div>
</li>
</ul>
<!--End config-steps-->
</form>
<!--End config-->
<input id=check value=Check type=button>