I have a field within the first panel and third panel. When there is an empty field and I click "Next" on panel one, the validation does not display the "please enter first name". Once I get to the third panel and select "Next", then the validation displays "Please enter name". Is there a way I can have the validation display the notification when there are empty fields based on its specific panel rather than going to the third panel and then seeing the validation?
One aspect I notice: when panel 3 field is not empty, and "Next" is selected, I cant proceed to the fourth panel because the input is empty in panel 1. This occurs vice versa. (if validation displays in panel 1, and then fields are entered, "Next" will not proceed to third panel).
What I tried
I tried to target the buttons and remove the class that is targeted by validation. It did not work because validation value is live on all panels 1-4. If I get a thumbs down please inform me on why, so I can improve on my questions next time. Thank you for your time!
$(document).ready(function() {
var $fieldsets =
$('#panels .sets')
.first()
.addClass('active')
.end()
.not(':first')
.hide()
.end();
var $panelControlButtons =
$('#panelcontrol button')
.filter('.btnPrev')
.prop('disabled', true)
.end();
$('#panelcontrol')
.on('click', 'button', function(e) {
e.preventDefault();
switch (true) {
case $(this).hasClass('btnNext'):
var $newFieldset =
$fieldsets
.filter('.active')
.hide()
.removeClass('active')
.next()
.addClass('active')
.show();
$('.btnNext').click(function(e) {
var focusSet = false;
// validate email - not empty
//FIRST NAME
if (!$('#first').val()) {
if ($("#first").parent().next(".validation").length == 0) {
$("#first").parent().after("<div class='validation' style='color:red;margin-top: -20px;'>Please enter first name</div>");
}
//e.preventDefault();
$('#first').focus();
focusSet = true;
} else {
//ok
$("#first").parent().next(".validation").remove();
}
//after all validate
if (focusSet) {
$("#c").removeClass("btnNext"); //remove class for continue button. Disabling continue
} else {
$("#c").addClass('btnNext'); //adds class for the continue button. Enabling continue
}
//THIRD NAME
if (!$('#third').val()) {
if ($("#third").parent().next(".validation").length == 0) {
$("#third").parent().after("<div class='validation' style='color:red;margin-top: -20px;'>Please enter third name</div>");
}
//e.preventDefault();
$('#third').focus();
focusSet = true;
} else {
//ok
$("#third").parent().next(".validation").remove();
}
//after all validate
if (focusSet) {
$("#c").removeClass("btnNext"); //remove class for continue button. Disabling continue
} else {
$("#c").addClass('btnNext'); //adds class for the continue button. Enabling continue
}
});
if ($newFieldset.is('.two')) {
var $newFieldset =
$fieldsets
.filter('.active')
.hide()
.removeClass('active')
.next()
.addClass('active')
.show();
}
//$('.two').removeClass('active'); this removes the second panel when selecting prev button
if ($newFieldset.is(':nth-child(2)')) {
$panelControlButtons
.next();
}
//enable Prev button
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', false);
$('.btnPrev_one_time').css('display', 'block');
//disabled Next button
if ($newFieldset.is(':last-child')) {
$panelControlButtons
.filter('.btnNext')
.prop('disabled', true);
$(':last-child').find(".btnNext_one_time").text("Place Payment"); //once last child element, btn will change text
}
break; // btnNext
var $input =
$('input')
.filter('.active')
.end();
case $(this).hasClass('btnPrev'):
var $newFieldset =
$fieldsets
.filter('.active') //selects the current fieldset
.hide() //hide it
.removeClass('active') //remove active flag
.prev() //move to the previous fieldset
.addClass('active') //flag as active
.show();
// testing only $('.two').css('display','none').removeClass('active').next().addClass('active').show().filter();
$('.two').css('display', 'none').filter('.active')
.filter('.active') //selects the current fieldset
.hide() //hide it
.removeClass('active') //remove active flag
.prev() //move to the previous fieldset
.addClass('active') //flag as active
.show();
//and show it
// enable Next button
$panelControlButtons
.filter('.btnNext')
.prop('disabled', false);
// disable Prev button
if ($newFieldset.is(':first-child')) {
$panelControlButtons
.filter('.btnPrev')
.prop('disabled', true);
}
break; // btn Prev
}
}); // panelcontrol button handler
$('.check_box').on('change', function() {
if (this.checked) {
$("#second_panel").removeClass('two');
} else {
$("#second_panel").addClass('two');
}
});
});
.sets {
display: none;
}
.active {
display: block;
}
<!doctype html>
<html lang="engl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="jquery/main.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="panels">
<div class="sets active">
<h1>PANEL 1</h1><button>Attach/detach paragraphs</button>
<div>
<label for="first">First Name</label>
<input type="first" id="first" placeholder="" />
</div>
</div>
<div id="second_panel" class="sets two">
<h1>PANEL 2</h1>
<p>w</p>
<div>
<label for="second">Second Name</label>
<input type="second" id="second" placeholder="" />
</div>
</div>
<div class="sets three">
<h1>PANEL 3</h1>
<div>
<label for="third">Third Name</label>
<input type="third" id="third" placeholder="" />
</div>
</div>
<div class="sets active">
<h1>PANEL 4</h1>
<div><input name="ss4" value="" /></div>
</div>
</div>
<form action="">
<input type="checkbox" name="vehicle" value="Bike" class="check_box">check for panel 2<br>
</form>
</div>
<div id="panelcontrol">
<button class="btnPrev">Prev</button>
<button class="btnNext" id="c">Next</button>
<button class="btnNext_one_time">CONTINUE</button>
</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</body>
</html>
There's quite a bit you could do to clean up your code. But if you want to show the validation message as soon as the user does something incorrect then you need your validation function to return as soon as it runs and encounters an issue. Below is an example which shows an error immediately if user doesnt enter and value for first name.
EDIT:
var next = document.getElementById('btnNext');
var previous = document.getElementById('btnPrev');
var inputs = [document.getElementById('first'), document.getElementById('second'), document.getElementById('third')];
function init() {
//show first panel and hide other initially
document.getElementById('first_panel').className = 'active';
document.getElementById('second_panel').className = 'sets';
document.getElementById('third_panel').className = 'sets';
document.getElementById('fourth_panel').className = 'sets';
//disable the buttons initially
previous.disabled = true;
previous.addEventListener('click', displayPreviousPanel);
next.disabled = true;
next.addEventListener('click', displayNextPanel);
//add keyup event listeners to the text inputs
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('keyup', function() {
//addEventListener has 'this' bound to current element
if (validateInput(this.value)) {
next.disabled = false;
} else {
next.disabled = true;
}
});
}
}
function displayPreviousPanel() {
//should only be 1 active at a time
var currentlyVisible = document.getElementsByClassName('active')[0];
var keyupEvt = new Event('keyup');
switch (currentlyVisible.id) {
case 'second_panel':
document.getElementById('second_panel').className = 'sets';
document.getElementById('first_panel').className = 'active';
document.getElementById('first').dispatchEvent(keyupEvt);
this.disabled = true;
break;
case 'third_panel':
document.getElementById('third_panel').className = 'sets';
document.getElementById('second_panel').className = 'active';
document.getElementById('second').dispatchEvent(keyupEvt);
break;
case 'fourth_panel':
document.getElementById('fourth_panel').className = 'sets';
document.getElementById('third_panel').className = 'active';
document.getElementById('third').dispatchEvent(keyupEvt);
break;
}
}
function displayNextPanel() {
//disable next button again
this.disabled = true;
//undisable previous btn
previous.disabled = false;
//should only be 1 active at a time
var currentlyVisible = document.getElementsByClassName('active')[0];
switch (currentlyVisible.id) {
case 'first_panel':
document.getElementById('first_panel').className = 'sets';
document.getElementById('second_panel').className = 'active';
previous.disabled = false;
break;
case 'second_panel':
document.getElementById('second_panel').className = 'sets';
document.getElementById('third_panel').className = 'active';
break;
case 'third_panel':
document.getElementById('third_panel').className = 'sets';
document.getElementById('fourth_panel').className = 'active';
break;
}
}
//the function used to validate..add whatever you need here
function validateInput(value) {
var isValid = true;
if (value.length < 1) {
isValid = false;
}
return isValid;
}
init();
.sets {
display: none;
}
.active {
display: block;
}
<div id="container">
<div id="validationMsg"></div>
<div id="panels">
<div id="first_panel" class="sets active">
<h1>PANEL 1</h1><button>Attach/detach paragraphs</button>
<div>
<label for="first">First Name</label>
<input type="first" id="first" placeholder="" />
</div>
</div>
<div id="second_panel" class="sets two">
<h1>PANEL 2</h1>
<p>w</p>
<div>
<label for="second">Second Name</label>
<input type="second" id="second" placeholder="" />
</div>
</div>
<div id="third_panel" class="sets three">
<h1>PANEL 3</h1>
<div>
<label for="third">Third Name</label>
<input type="third" id="third" placeholder="" />
</div>
</div>
<div id="fourth_panel" class="sets active">
<h1>PANEL 4</h1>
<div>
<label for="second">Fourth Name</label>
<input name="ss4" value="" /></div>
</div>
</div>
<form action="">
<input type="checkbox" name="vehicle" value="Bike" class="check_box">check for panel 2<br>
</form>
</div>
<div id="panelcontrol">
<button class="btnPrev" id="btnPrev">Prev</button>
<button class="btnNext" id="btnNext">Next</button>
<button class="btnContinue">CONTINUE</button>
</div>
Related
I have two input fields i.e. VimeoLink and YTLink, I am trying to disable YTLink until and unless the VimeoLink input field is empty, and if the user clicked on the disabled YTLink input field an alert needs to be shown, but an alert is not working!
I have tried several solutions for alerts like -
$("YTLink").click(function (evt) {
console.log('disabled input clicked!');
});
//for disabling input on first
$(document).ready(function() {
document.getElementById('YTLink').disabled = true;
});
checking
if vimeolink input is empty or not
$('input[name=vimeoLink]').change(function() {
if (document.getElementById('vimeoLink').value !== '') {
document.getElementById('YTLink').disabled = false;
} else {
document.getElementById('YTLink').disabled = true;
}
});
//alert on click YTLink input
var container = document.querySelector('#YTLink');
container.addEventListener('click', function() {
console.log('disabled input clicked!');
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group last mb-3">
<label for="name">VimeoLink</label>
<input type="text" class="form-control" placeholder="" name="vimeoLink" id="vimeoLink">
</div>
<div class="form-group last mb-3">
<label for="name">YTLink</label>
<input type="text" class="form-control formcheck" placeholder="" name="YTLink" id="YTLink">
</div>
Ans is NO. Disabled inputs don't fire click event. Solution is wrap your input with div, and fire click on that div using class or ID.
Example:
//for disabling input on first
$(document).ready(function() {
document.getElementById('YTLink').disabled = true;
});
//checking
//if vimeolink input is empty or not
$('input[name=vimeoLink]').change(function() {
if (document.getElementById('vimeoLink').value !== '') {
document.getElementById('YTLink').disabled = false;
} else {
document.getElementById('YTLink').disabled = true;
}
});
//alert on click YTLink input
var container = document.getElementById('tempdisable');
container.addEventListener('click', function(event) {
var inp = document.getElementById('YTLink');
if (inp.disabled) {
console.log('disabled input clicked!');
}
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group last mb-3">
<label for="name">VimeoLink</label>
<input type="text" class="form-control" placeholder="" name="vimeoLink" id="vimeoLink">
</div>
<div class="form-group last mb-3">
<label for="name">YTLink</label>
<div id="tempdisable">
<input type="text" class="form-control formcheck" placeholder="" name="YTLink" id="YTLink">
</div>
</div>
Since disabled control elements can't have events bound to them, you'd need to bind an event to an ancestor element and make a check to see whether the target was the input.
You can then go on to check if it's disabled, and if so, show your alert:
$(document).on('click',function(e){
if(e.target.id == "Travellerpaymentinfo_cc_number" && e.target.disabled){
alert("The textbox is clicked.");
}
});
This is code for a button, but when it is checked it should print "checked" but everytime I press it, it logs "not checked" no matter the status of the button. How do I fix this?
document.addEventListener('DOMContentLoaded', function() {
var checkbox = document.querySelector('#auto-admit .mdc-switch');
function isChecked() {
if (checkbox.checked ) {
// do this
console.log('Checked');
} else {
// do that
console.log('Not checked');
}
}
checkbox.addEventListener('change', function() {
isChecked();
});
isChecked();
}
);
<div id="auto-admit">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input
type="checkbox"
id="autoadmit-switch"
class="mdc-switch__native-control"
role="switch"
aria-checked="false"
/>
</div>
</div>
<label
id="autoadmit-switch-label"
class="mdc-button switch-label"
for="autoadmit-switch"
>Auto admit</label
>
</div>
You are trying to get the div container, rather than input.
var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');
document.addEventListener('DOMContentLoaded', function() {
var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');
function isChecked() {
if (checkbox.checked ) {
// do this
console.log('Checked');
} else {
// do that
console.log('Not checked');
}
}
checkbox.addEventListener('change', function() {
isChecked();
});
isChecked();
}
);
<div id="auto-admit">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input
type="checkbox"
id="autoadmit-switch"
class="mdc-switch__native-control"
role="switch"
aria-checked="false"
/>
</div>
</div>
<label
id="autoadmit-switch-label"
class="mdc-button switch-label"
for="autoadmit-switch"
>Auto admit</label
>
</div>
I have a dropdown menu with checkboxes inside. I want to close the dropdown when the users click outside.
My code is:
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
</select>
</div>
<div class="checkboxes" id="checkboxes">
#{
if (ViewBag.DataActiveEmployee == null || ((IEnumerable<MvcApplication1.Models.ActiveUsersList>)ViewBag.DataActiveEmployee).Count() == 0)
{
//#:<h3>No records were processed.</h3>
}
else
{
foreach (var usr in ViewBag.DataActiveEmployee)
{
<label id="userName">#usr.EmployeeName</label>
<input class="checked" type="checkbox" name="search_emp" id="search_emp" value=#usr.EmployeeName>
#:
}
}
}
</div>
</div>
JS
<script>
var expanded = false;
checkboxes.style.display = "none";
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
$('multiselect').click(function () {
$("#checkboxes").hide();
});
The problem is inside the second function of JavaScript because when I press outside, nothing is happening.
Please help.
Try using the event.target to handle click events:
UPDATE
$(document).on('click', '.multiselect .selectBox', function(e) {
e.stopImmediatePropagation();
$('#checkboxes').show();
});
$('body').on('click', function(e) {
if (e.target.id != 'checkboxes' && $(e.target).closest('#checkboxes').length == 0) {
$('#checkboxes').hide();
}
});
#checkboxes,
.multiselect {
padding:15px;
border:1px solid #d8d8d8;
}
.selectBox { display: inline; }
#checkboxes { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="multiselect">
<div class="selectBox">
<select>
</select>
</div>
<div class="checkboxes" id="checkboxes">
<label id="userName">Employee 1</label>
<input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
<label id="userName">Employee 1</label>
<input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
</div>
</div>
Check if the target click on dom is the dropdown itself or not as
$(document).on("click", function(event){
var $trigger = $(".checkboxes");
if($trigger !== event.target && !$trigger.has(event.target).length){
$(".checkboxes").hide();
}
});
It should work.
I have tried all the solutions i could find but i am stuck. I have 2 checkboxes, HBO and Marvin. Marvin needs to show a div. HBO needs to show nothing. It works until I need to click the checkbox twice for it to show/hide. usually this would be a $apply() issue but that does not seem to be the case. I believe I am not updating the model correctly. I forgot to mention that the checkboxes need to reset to false when the other is true.
plunker
var ctrl = this;
ctrl.showMeMarvin = function () {
if (ctrl.show === true) {
//$timeout(function () {
ctrl.marvin = false;
ctrl.show = false;
ctrl.hbo = false;
//})
}
else {
//$timeout(function () {
ctrl.marvin = true;
ctrl.show = true;
ctrl.hbo = false;
//})
}
};
ctrl.showMeHBO = function () {
if (ctrl.show === true) {
// $timeout(function () {
ctrl.show = false;
ctrl.hbo = true;
ctrl.marvin = false;
//})
}
else {
//$timeout(function () {
ctrl.marvin = false;
ctrl.hbo = true;
//})
}
};
Just change the div ng-show like this:
<div class="col-xs-12" ng-show="checkedHBO == 1">
And it will work without any additional functions calls.
Edit:
To have it working with the condition to reset the prev selected value you can use this:
<div ng-controller="ShowController as ctrl">
<div class="col-xs-12">
<label for="checkedHBO" class="ts-label">HBO</label>
<input id="checkedHBO" name="mygroup" type="radio" value="hbo" ng-model="checkedHBO" ng-change="checkedMarvin = undefined"/>
<label for="checkedMarvin" class="ts-label">Marvin</label>
<input id="checkedMarvin" name="mygroup" type="radio" value="marvin" ng-model="checkedMarvin" ng-change="checkedHBO = undefined"/>
</div>
<div class="col-xs-12" ng-show="checkedHBO">
<center>
<div class="jumbotron">
DIV 1
</div>
<div class="jumbotron">
DIV 2
</div>
<div class="jumbotron">
DIV 3
</div>
</center>
</div>
</div>
You should be using a radio input instead of checkboxes. http://plnkr.co/edit/hE68w9RKUoFamAWGgRzR?p=preview
<input name="radio" id="checkedHBO" type="radio" ng-model="ctrl.show" ng-value="false" />
<input name="radio" id="checkedMarvin" type="radio" ng-model="ctrl.show" ng-value="true"/>
There are 8 divs and an empty div. Also there are 8 checkboxes. Initially 4 divs are displayed and the remaining are display:none and 4 checkboxes are checked and remaining are uncheked
The Fiddle link is here
This is my code
<div class="container">
<div class="empty" style="display:none;"></div>
<div class="content div_box_1">
<div class="box " style="background:black;"></div>
</div>
<div class="content div_box_2">
<div class="box " style="background:blue;"></div>
</div>
<div class="content div_box_3">
<div class="box " style="background:yellow;"></div>
</div>
<div class="content div_box_4">
<div class="box " style="background:orange;"></div>
</div>
<div class="content div_box_5">
<div class="box " style="background:pink; display:none;"></div>
</div>
<div class="content div_box_6">
<div class="box " style="background:indigo; display:none;"></div>
</div>
<div class="content div_box_7">
<div class="box " style="background:red; display:none;"></div>
</div>
<div class="content div_box_8">
<div class="box " style="background:skyblue; display:none;"></div>
</div>
<div class="checks">
<input type="checkbox" name="box1" checked value="1" class="css-checkbox"/>black
<input type="checkbox" name="box2" checked value="2" class="css-checkbox"/>blue
<input type="checkbox" name="box3" checked value="3" class="css-checkbox"/>yellow
<input type="checkbox" name="box4" checked value="4" class="css-checkbox"/>orange
<input type="checkbox" name="box5" value="5" class="css-checkbox"/>pink
<input type="checkbox" name="box6" value="6" class="css-checkbox"/>indigo
<input type="checkbox" name="box7" value="7" class="css-checkbox"/>red
<input type="checkbox" name="box8" value="8" class="css-checkbox"/>sky-blue
When I uncheck any of these 4 checked boxes the respective div must hide and the class=empty div must be shown eg if I uncheck checkbox with value=2 then div with class="div_box_2 must be hidden and in that place div with class=empty must be displayed and again when checkbox with value=5 or value=6 or value=7 or value=8 is checked then the div with class=empty must be hide and the corresponding div with class=div_box_5 or class=div_box_6 or class=div_box_7 or class=div_box_8 must be displayed in the place of empty div.
Its like removing a div and putting a default div in that place and when again some other div is to be displayed then that div must be displayed in the place of default div
How is this possible?
Please anyone help.
Thank you in advance
What you need is a empty container is each of the content element. You can use a script to add it
//add an empty container to all content elements
$('.container .content').append('<div class="empty" style="display:none;"></div>');
$("input.css-checkbox:checkbox").click(function () {
var cval = $(this).val();
var $div = $(".div_box_" + this.value).slideToggle("fast");
$div.next()[this.checked ? 'slideUp' : 'slideDown']("fast");
})
Demo: Fiddle
EDIT
JSfiddle: click
I changed a few thing:
I removed your style from your HTML and put it in your CSS;
You want to replace the divs so there is no need to hide any;
Let me explain the JS:
var divs = [];
divs.push('<div class="content" id="empty">' +
'<div class="box div_box_0 empty"></div>' +
'</div>');
$('.box').each(function (index) {
divs[index+1] = $(this).parent();
$(this).parent().remove();
});
var selected = [];
var max_boxes = 4;
$('.css-checkbox').each(function () {
if ($(this).is(':checked') && selected.length < max_boxes) {
selected.push(divs[selected.length + 1]);
} else {
$(this).attr('checked', false);
}
});
while (selected.length < 4) {
selected.push(divs[0]);
}
for (var i in selected) {
$('.container').append(selected[i]);
}
$(".css-checkbox").click(function(){
if ($('.css-checkbox:checked').length > 4) {
$(this).attr('checked', false);
} else {
var cval = $(this).val();
var checked = $(this).is(':checked');
if (checked) {
var empty = $.inArray(divs[0], selected);
selected[empty] = divs[cval];
$('#empty').replaceWith(divs[cval]);
} else {
var filled = $.inArray(divs[cval], selected);
selected[filled] = divs[0];
$('.container').find(divs[cval]).replaceWith(divs[0]);
}
}
});
First I create an array with the divs so you can place and replace them. The empty div has to be put in manually, since you want this one more than once. In the array you get a reference to the element. Next i remove each div out of your html.
Next I get the selected boxes and put the div by value in the selected array. After that I append the first 4 selected divs to the container.
The click function checks if there are 4 boxes clicked, when you click on a 5th one it removes the check immediately. Next there is a check to see if you checked or unchecked the checkbox. When you check it, replaces the first empty div with the selected div. If you uncheck it replaces the selected div with an empty div.
Try this Demo
$(function() {
var selectCheckBox = $(".checks input:checkbox")
$(selectCheckBox).click(function() {
var checkingValue = $(this).val()
if(checkingValue == 1){
$('.div_box_1').toggle();
}
else if(checkingValue == 2){
$('.div_box_2').toggle();
}
else if(checkingValue == 3){
$('.div_box_3').toggle();
}
else if(checkingValue == 4){
$('.div_box_4').toggle();
}
})
var selectHiddenChecks = $('.checks input:checkbox')
$(selectHiddenChecks).click(function() {
var checkingValue = $(this).val();
if(checkingValue == 5) {
$('.div_box_5').toggle();
}
else if(checkingValue == 6) {
$('.div_box_6').toggle();
}
else if(checkingValue == 7) {
$('.div_box_7').toggle();
}
else if(checkingValue == 8) {
$('.div_box_8').toggle();
}
})
})