We Keep Coding

Jquery change input class on typing

As the title suggests, i've built a form using Bootstrap 4. The validation is being made in a PHP file via an AJAX call. Everything working fine except one detail. I need to change the input class from "invalid" to "valid" as soon the user starts typing something into the input field. How can I achieve this using Jquery?

Use add and remove class in jquery to change class attribute of input
$("#check").keypress(function(e){
$(this).removeClass('invalid')
$(this).addClass('valid')
})
.invalid
{
border:1px solid red;
}
.valid
{
border:1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input class="invalid" id="check">

$(document).on('keyup', '#myInput', function(){
$myInput = $('#myInput'); //Object DOM Jquery, $.
$myInput.removeClass('invalid');
if($myInput.val().length == 0){
$myInput.removeClass('valid');
if(!$myInput.hasClass('invalid')){
$myInput.addClass('invalid');
console.log('invalid!');
}
}else{
$myInput.removeClass('invalid');
if(!$myInput.hasClass('valid')){
$myInput.addClass('valid');
console.log('this valid!');
}
}
})
<style>
.invalid
{
border:1px solid red;
}
.valid
{
border:1px solid green;
}
</style>
use 'document' as this will work at any time

Add an outline to the currently hovered element

I would like all elements with the class "hoverOutline" to have an outline when you hover over them. This CSS works mostly fine:
.hoverOutline :hover {
outline: 2px solid black;
}
Only problem is this causes any parent elements with that class to have an outline as well. I understand that this is intended (as you are hovering over them too), but I would like to only outline the innermost child.(the one that would trigger an event first onclick).
I would like to add that I have looked into this, and most people use JQuery or some hacky work-around in pure CSS. For me, Javascript is 100% okay.
EDIT: This is for a bookmarklet, so I can't know in advance what elements will be on the page. This must work for ALL elements with that class, but that don't have a child with that class..

The element Selector are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.
that mean you can have the same class but define the tag with that class to handle see examlpe
a.hoverOutline:hover {
outline: 2px solid black;
}
a {
width:220px;
height:50px;
display:inline-block;
background-color:blue;
color:white;
line-height:50px;
text-align:center;
margin:auto;
}
div.hoverOutline{
width:420px;
height:100px;
display:inline-block;
background-color:green;
}
<div class="hoverOutline"><a class="hoverOutline"> This a tag mast outline on hover</a></div>

Update
Demo 2 uses JavaScript to isolate and outline elements that meet two requirements:
Must have the .hover class
Must not have any descendants with the class .hover
Note: The <legend> has .hover class as well (actually everything has .hover), so as it fulfills the requirements, it too has the hover effects.
If the post you have submitted has no typos then the problem is pretty simple. A pseudo-class like :hover has a specific syntax in that it suffixes the targeted selector like so:
.hoverOutline:hover {
outline: 2px solid black;
}
To address the parent having the same class and you need to exclude the parent, try using the parent's tagName like so:
.hoverOutline:hover {
outline: 2px solid black;
}
section.hoverOutline:hover {
outline: 0 none transparent;
}
In these 2 rulesets the second one is applied to the parent by specifying it's a <section> and placing it after the original ruleset which is more general and lower in specificity.
Demo 1
.hoverOutline :hover {
outline: 2px solid black;
}
.hover:hover {
outline: 2px solid black;
}
fieldset.hover:hover{
outline:0 none transparent;
}
<fieldset>
<legend>Incorrectly Syntax</legend>
<button class='hoverOutline'>HOVER</button>
<button class='hoverOutline'>HOVER</button>
<button class='hoverOutline'>HOVER</button>
<button class='hoverOutline'>HOVER</button>
<button class='hov'>hover</button>
<button class='hoverOutline'>HOVER</button>
<button class='hoverOutline'>HOVER</button>
</fieldset>
<fieldset class='hover'>
<legend>Correct Syntax</legend>
<button class='hover'>HOVER</button>
<button class='hover'>HOVER</button>
<button class='hover'>HOVER</button>
<button class='hover'>HOVER</button>
<button class='hov'>hover</button>
<button class='hover'>HOVER</button>
<button class='hover'>HOVER</button>
</fieldset>
Demo 2
window.addEventListener('mouseover', mouseEnter, false);
window.addEventListener('mouseout', mouseLeave, false);
function mouseEnter(e) {
/* if hovered node is NOT the registered
|| event listener...
*/
if (e.target !== e.currentTarget) {
// Reference hovered element
var tgt = e.target;
// Reference the first child with .hover
var kid = tgt.querySelector('.hover');
/* if hovered node has class .hover and
|| does NOT have a child with class .hover...
*/
if (tgt.classList.contains('hover') && !kid) {
// add class .outline to hovered node
tgt.classList.add('outline');
// Otherwise do nothing and end function
} else {
return;
}
// Stop the bubbling phase
e.stopPropagation();
}
}
function mouseLeave(e) {
if (e.target !== e.currentTarget) {
var tgt = e.target;
tgt.classList.remove('outline');
}
e.stopPropagation();
}
form {
border: 1px solid black;
}
.outline {
outline: 3px solid red
}
<form id='form' class='hover'>
<fieldset class='hover'>
<legend class='hover'>Correct Syntax</legend>
<button class='hover'>HOVER</button>
<button class='hover'>HOVER</button>
<button class='hover'>HOVER</button>
<button class='hover'>HOVER</button>
<button class='hov'>hover</button>
<button class='hover'>HOVER</button>
<button class='hover'>HOVER</button>
</fieldset>
</form>

try this
$(".hoverClass1").hover(function(){
$(".hoverClass2").removeClass("hoverClass2");
$(this).addClass("hoverClass2");
},function(){
$(this).removeClass("hoverClass2");
});
.hoverClass:hover{
border:1px solid red
}
.hoverClass1{
}
.hoverClass2{
border:1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverClass1">
<input type="text" class="hoverClass1" placeholder="hover me !!">
</div>

How to let onclick disappear after clicking on something else

I am just working on my new webspace and I have a small problem.
I know have to input tags with an onclick function
<script>
function mark( el ) {
el.style.borderBottom= "3px solid white";
}
</script>
When I click on the first input the border appears as I want but when I click on the other input the border of the first input tag is still there.
So how can I let the function only work when it's only clicked on the input tag itself and not when another input is clicked as well
Thanking you in anticipation

Just use CSS's :focus pseudo class:
input:focus {
border-bottom:3px solid red;
}
<input type="text">
<input type="text">
MDN Docs

You can easily use CSS Focus selector. input:focus
input:focus {
background-color: yellow;
border-bottom:3px solid white;
}
<div><input type="text"></div>
<br/>
<div><input type="text"></div>

Before you add style to this specific element you can remove style of all inputs or something like this:
function mark( el ) {
var input = document.getElementsByTagName("input");
for(var i =0;input.length>i;i++){
input[i].removeAttribute("style");
}
el.style.borderBottom= "3px solid white";
}

Here is what I would do. First, create a mark and an unmark functions. Then trigger the mark function at "onmousedown" and unmark at "onmouseup" event. Therefore, this border will only be shown when you have the mouse button pressed.
<script>
function mark( el ) {
el.style.borderBottom= "3px solid white";
}
function unmark( el ) {
el.style.borderBottom= "none";
}
</script>

Jquery Use Image As CheckBox

I am in pursuit of implementing images as checkboxes. For now I am trying out a sample.
The code below contains a simple image with a submit button next to it. On clicking the submit button I want the image to develop a border around it and on clicking the submit button, I want the checkbox value to be passed.
<html>
<script>
$(document).ready(function() {
$('#blr').click(
function(){
$('#blr').css('border', 'solid 2px red');
$('#imgCheck').attr('checked', 'checked');
},
function(){
$('#blr').css('border', 'none');
$('#imgCheck').removeAttr('checked');
}
);
});
</script>
<form id="form1">
<img src="icons/blr.jpg" title="blr" id="blr" />
<input type="checkbox" id="imgCheck" name="imgCheck" value="barney" style="visibility: hidden;" />
<input type="submit" value="Submit" />
</form>
</html>
I am relatively new to Jquery and I am not able to figure out where am I going wrong. Any help will be greatly appreciated.
Thanks in advance :)

Here is the solution of your question. I hope this will help you.
CSS
.checked {border:solid 2px red}
HTML Code
<form id="form1">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
<input type="checkbox" id="imgCheck" name="imgCheck" value="barney" />
<input type="submit" value="Submit" />
</form>
jQuery Code
$(document).ready(function() {
$('#blr').on('click', function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('#imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$('#imgCheck').prop('checked', false);
}
})
});
Working Example : Demo

Actually using image as checkbox can be done with HTML & CSS ONLY!
The trick is to style a <label> element (make it an image) and add it a for="checkboxid" parameter - then just make a <checkbox> with a proper id="checkboxid" and hide it. When you click on label => the checkbox gets (un)checked. Also the usage of :checked and + selector is good if you want to change label image on checked / unchecked.
HTML
<input id="checkboxid" type="checkbox" class="css-checkbox">
<label for="checkboxid" class="css-label"></label>
CSS
input[type=checkbox].css-checkbox{ display: none; }
.css-label{
display: inline-block;
padding-left:20px;
height:15px;
background-image:url(http://csscheckbox.com/checkboxes/dark-check-green.png);
background-repeat: no-repeat;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
Fiddle - edited/simplified: http://jsfiddle.net/bdTX2/
Example took from: http://www.csscheckbox.com/

Click doesn't work like that, you can't toggle two functions. You must use an if statement like this
$('#blr').click(function () {
var chk = $('#imgCheck').get(0);
if (!chk.checked) {
$(this).css('border', 'solid 2px red');
$('#imgCheck').prop('checked', true);
} else {
$(this).css('border', 'none');
$('#imgCheck').prop('checked', false);
}
});
DEMO
You could shorten the code even more like this
$('#blr').click(function () {
var chk = $('#imgCheck').get(0);
$(this).css('border', !chk.checked?'solid 2px red':'none');
$('#imgCheck').prop('checked', !chk.checked);
});
DEMO

The click Function doesn't work like what your thinking.... the way you are looking for is for Toggle Try this ..I think This Will help ..Cheers
$('#blr').toggle(function () {
$("#blr").css('border', 'solid 2px red');
$('#imgCheck').prop('checked', false);
}, function () {
$('#blr').css('border', 'none');
$('#imgCheck').prop('checked', true);
});

$('#blr').on('click', function(e) {
var $this = $(this),
$imgCheck = $(this).next().attr('checked'),
border_styles = ['solid 2px red', 'none']
is_checked = $imgCheck.attr('checked');
$this.css('border', border_styles[is_checked]);
$imgCheck.attr('checked', !is_checked);
})

Another Solution for CSS-Only
Use -webkit-apperance: none to 'hide' the original checkbox, and then style it as you want.
To style, when checkbox is checked, simple use this pseudo code: input[type="checkbox"]:checked
HTML
<input type="checkbox">
CSS
input[type="checkbox"] {
-webkit-appearance: none;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid gray;
outline: none;
cursor: pointer;
}
input[type="checkbox"]:checked {
background: url(http://2012.igem.org/wiki/images/7/79/Small-checkmark.png) center no-repeat;
}
Demo Fiddle

Change text box border when it is clicked

I am making a website and would like the border color of the text boxes to change on hover and when they are clicked.
I have searched and found a few people showing the code for how to do it. I tried to run it from my LAMP server (dont know if embedded JS will work on a Lamp server) although it didnt work. The code was javascript which I don't really know so I couldn't understand what what was going wrong.
This is the code:
onload=function(){
var inp=document.getElementsByTagName('input'), i=0, t ;
while(t==inp[i++]){
if(t.type=='text'){
t.onclick=function(){this.style.border='1px solid red'}
}
}
}
</script>
Is there a way to do what I am wanting just with CSS/html or will I need to learn JavaScript as well?
If its not too hard could explain how to do it or show me some example code?
Cheers - Cohen.

Yes this can be done using CSS pseudo-classes
Here is an example:
<style>
.fancyText:hover{border:1px solid red;}
.fancyText:focus{border:1px solid red;}
</style>
<input type='text' class='fancyText' />

#Aaron is right, and you may visit w3school for css learning,
if you want it using java-script you only need function onFocus, onBlur and access the text box via id
function change()
{
var a = document.getElementById('fansy');
a.style.border = '1px solid red';
}

Why dont use jQuery to make it simpler?
$(document).ready(function(){
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
});
Then you'll get multi browser support also....
Don't forget <script src="[the_path_to_jquery_file]" type="text/javascript"></script>
to include the jquery-file.
If you replace this
$('input').each(function(){
if($(this).attr('type')=='text')
{
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
}
});
with this
$('input[type="text"]').each(function(){
$(this).focus(function(){
$(this).css({'border':'1px solid red'});
});
$(this).blur(function(){
$(this).css({'border':'1px solid green'});
});
});
you will automatic get the inputs with attr. type = text.
Here is more fact about jQuery attr selecting

#myTextarea {
border: 2px solid black;
}
#myTextarea:focus {
border-color: red;
outline: none;
}
In the HTML, the textarea element is given an ID of "myTextarea". In the CSS, the #myTextarea selector sets the initial border color to black and the #myTextarea:focus selector changes the border color to red when the textarea is clicked on and has focus. The outline: none; is added to remove the default outline that appears when the textarea is in focus.