We Keep Coding

Hide/Show button + not valid HTML

First Question: On W3 HTML Validator I get the following error:
Attribute value not allowed on element input at this point.
But, in my code, I am using the 'value' to change images so how could I fix this?
Second question: I need the image to remain the same even when I refresh. I am new to Javascript, but I know I need to utilise cookies or local storage in some way. Can someone help with this?
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).val() == "Hide") {
$(this).val("Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).val("Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" value="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>

If you just want to make the HTML valid, the simplest tweak would be to use a class or data attribute instead.
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).data('status') == "Hide") {
$(this).data('status', "Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).data('status', "Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" data-status="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>
To persist the value, retrieve the status on pageload and run the handler
const initialStatus = localStorage.imageStatus || 'Hide';
$('#button').data('status', initialStatus);
$('#button').click();
and set it after a change
localStorage.imageStatus = $('#button').data('status');

javascript form verification

<div class="masterform type-selection">
<div class="radio"><span><input type="radio" name="feature_value_6" value="10" required=""></span></div><label>Cool</label>
function ShowLoading() {
var verif = true;
$(".masterform input").each(function() {
if($(this).val() == ""){
verif = false;
}
});
var radio = false;
$(".type-selection div.radio span").each(function() {
if($('.masterform input[type=radio]:checked').size() > 0){
radio = true;
}
});
if(verif == true && radio == true){
window.loading_screen = window.pleaseWait({
blabla }); }
}
i tried everything , the variable send me true but when i use this verification on radio input nothing work. my function work only when i stop the submit on my form by clicking on the cross of my safari navigator !
Everything works fine on chrome but cant make it work on safari

I cleaned up your code. Looks like you just need to use length instead of $.size()
var radio = false;
$(".type-selection div.radio span").each(function() {
if ($('.masterform input[type=radio]:checked').length > 0) {
radio = true;
}
console.log(radio);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="masterform type-selection">
<div class="radio">
<span>
<input type="radio" name="feature_value_6" value="10" required="" checked>
</span>
</div>
<label>Cool</label>
</div>

Try to use the "prop" property of jQuery, like this:
$(".type-selection div.radio span input[type='radio']").each(function(elemIndex, domElement) { //Each radio
if($(domElement).prop('checked')){
radio = true;
}
});

.blur not firing on previously hidden tables

So the issue I seem to having is a bit of a weird one. So I have a form that is hidden until a button is clicked, once it's clicked the table is visible and has a .blur function on the inputs to check if they're empty. I've tried adding alert() throughout the pcontroller and it just never get's into the function.
Here's what's in the controller (document ready is done earlier on)
var newQuestionName = $('#questionName');
function basicValidate(object) {
var val1 = object.val();
if (val1 != null && val1 != ' ' && val1 != '') {
// invalid
object.removeClass('error');
return true;
// alert('true');
} else {
// true
object.addClass('error');
return false;
// alert('invalid');
}
}
newQuestionName.blur(function () {
alert('TEST');
if (basicValidate($(this))) {
add_newQuestionName_valid = true;
alert('new question true')
} else {
add_newQuestionName_valid = false;
alert('new question false')
}
});
Here's the HTML
<form action="">
<div class="row">
<label for="questionName">
FAQ Question:
</label>
<div class="input-container">
<input id="questionName" type="text" class="text" value="">
</div>
</div>
<div class="row">
<label for="questionAnswer">
FAQ Answer:
</label>
<div class="input-container">
<textarea id="questionAnswer" cols="30" rows="10"></textarea>
</div>
</div>
<div class="row">
<div class="submit-container submit" >
<div type="submit" ng-click="newFaq()" id="addNew" class="button" value="save">save</div>
</div>
</div>
</form>

Since I don't have all your code, I can't for sure know whether this is your problem. But I am, however, almost certain that it is, so hear me out.
The problem is that when this statement is run:
var newQuestionName = $('#questionName');
the element with id questionName hasn't yet loaded, due to the order that the DOM loads in. In order to solve this, you can wrap your JavaScript code in:
$(document).ready(function() {
...
});
Try replacing your JavaScript with the following:
$(document).ready(function() {
var newQuestionName = $('#questionName');
function basicValidate(object) {
var val1 = object.val();
if (val1 != null && val1 != ' ' && val1 != '') {
// invalid
object.removeClass('error');
return true;
// alert('true');
} else {
// true
object.addClass('error');
return false;
// alert('invalid');
}
}
newQuestionName.blur(function () {
alert('TEST');
if (basicValidate($(this))) {
add_newQuestionName_valid = true;
alert('new question true')
} else {
add_newQuestionName_valid = false;
alert('new question false')
}
});
});
EDIT: Not sure if it was added afterwards, but since you're saying that "document ready" is done earlier on, the problem is still probably related to that, considering that it works fine when I use the code I provided. Make sure that the newQuestionName variable is referring to what you want. You can check it using alert(newQuestionName.length).

Javascript radio button validation error pops up for less than a second while it should not disappear

Alright after reading like 30 examples and also testing them out I finally decided to post my question since all the examples are not working for me.
So I am not a javascript expert but validating a simple radio button shouldn't be to hard, at least that was what I thought.
I am trying to output a nice css error handling when the form is incorrect. Though, for some reason my radio button error pops up for less than a second and then disappears again. The other errors (non-radio) do work though. For this question I'll just post the code bit of the radio button part.
The HTML:
<div align="left"><form name="myForm" method="post" style="display:inline" onsubmit="return(validate());">
<div class="radio">
<input type="radio" class="radio" name="automatisering" value="1">Automatisering
<input type="radio" class="radio" name="automatisering" value="2">Software
<div id="Fout" style="display:none" color="white"></div>
</div>
input type="submit" value="Submit" />
</form></div>
The validation block:
function validate()
{
if(document.myForm.automatisering[0].checked != true && document.myForm.automatisering[1].checked != true)
{
document.getElementById("Fout").style.display = 'inherit';
document.getElementById("Fout").setAttribute("title", "Some error message");
document.myForm.automatisering.focus() ;
return false;
}
else
{
document.getElementById("Fout").style.display = 'none';
}
~~~~~Other validation with text, email, phone, etc. that DOES work. All starting with the if and returning false with div displaying like the radio example.
return( true );
}
Things i tried (but didn't work - outputs the error for less than a second while it should not disappear):
1# Based on some fancy for I found
var elem=document.forms['myForm'].elements['automatisering'];
len=elem.length-1;
chkvalue='';
for(i=0; i<=len; i++)
{
if(elem[i].checked)chkvalue=elem[i].value;
}
if(chkvalue=='')
{
document.getElementById("Fout").style.display = 'inherit';
document.getElementById("Fout").setAttribute("title", "Some error message!");
document.myForm.automatisering.focus() ;
return false;
}
document.getElementById("Fout").style.display = 'none';
2# Based on the values (manual given) of the radio's
if(document.myForm.automatisering.value != 1 && document.myForm.automatisering.value != 2)
{
document.getElementById("Fout").style.display = 'inherit';
document.getElementById("Fout").setAttribute("title", "Some error message!");
document.myForm.automatisering.focus() ;
return false;
}
else
{
document.getElementById("Fout").style.display = 'none';
}
3# Based on the array of the radio
if(document.myForm.automatisering[0].checked != true && document.myForm.automatisering[1].checked != true)
{
document.getElementById("Fout").style.display = 'inherit';
document.getElementById("Fout").setAttribute("title", "Some error message!");
document.myForm.automatisering.focus() ;
return false;
}
else
{
document.getElementById("Fout").style.display = 'none';
}
All things I've tried result in the same, I get the error message (div) for 0,5 seconds and it immediately disappears. Also tried to remove the display = 'none' on the else but this results in the same issue.

This code is not valid:
document.myForm.automatisering.focus() ;
document.myForm.automaterising is a NodeList, you can only focus on a specific DOM element. When it gets an error from this statement, it never executes return false, so the form gets submitted.
Try changing it to:
document.myForm.automatisering[0].focus() ;

It is acutally working for me. I fixed a syntax error in your HTML (input missed its opening tag)
http://codepen.io/anon/pen/PwRXbr
EDIT:
The issue is that obviously the onsubmit method does not stop the <form> from being submitted when you return false. You could create a button that checks the values and then calls document.myForm.submit() Here is an example for that:
http://codepen.io/anon/pen/ZYxVJy
Here is the working code:
HTML
<div align="left">
<form name="myForm" action="#" style="display:inline" onsubmit="return(validate());">
<div class="radio">
<input type="radio" class="radio" name="automatisering" value="1">Automatisering
<input type="radio" class="radio" name="automatisering" value="2">Software
<div id="Fout" style="display:none" color="white">bla</div>
</div>
<input type="submit" value="Submit" />
</form>
</div>
JavaScript
function validate()
{
if(document.myForm.automatisering[0].checked != true && document.myForm.automatisering[1].checked != true)
{
document.getElementById("Fout").style.display = 'block';
document.getElementById("Fout").setAttribute("title", "Some error message");
document.myForm.automatisering.focus() ;
return false;
}
else
{
document.getElementById("Fout").style.display = 'none';
}
return true;
}

"search" field to filter content

I'm trying to create a simple "search field", what it does is it searches if typed in text is equal to any data-attr of the boxes in the content and if so, hide everything but what found, something similar (this ain't working):
css:
.filter-div {
display: none;
}
html:
<label for="search">Search Input:</label>
<input type="search" name="filter" id="search" value="" />
<div class="filter-div" data-filter="one">one</div>
<div class="filter-div" data-filter="two">two</div>
<div class="filter-div" data-filter="three">three</div>
<div class="filter-div" data-filter="four">four</div>
<div class="filter-div" data-filter="five">five</div>
jquery:
// save the default value on page load
var filter = $('.input').val();
// on submit, compare
if ( $('.input').val() = $("data-filter") {
$(this).show();
} ​
I am also not sure if the content should be filtered with a button click or found content should pop up as click-able text in the search, or should all happen auto? Finally probably I will have to check it against more than one data-attr.
Anyone?

$('#search').on('keyup', function() {
var val = $.trim(this.value);
if (val) {
$('div[data-filter=' + val + ']').show();
} else $('div[data-filter]').hide();
});
Working sample
According to demo fiddle example in comment
var divs = $('div[data-filter]');
$('#search').on('keyup', function() {
var val = $.trim(this.value);
divs.hide();
divs.filter(function() {
return $(this).data('filter').search(val) >= 0
}).show();
});
divs.on('click', function() {
divs.not(this).hide();
var text = $.trim($(this).text());
$('#search').val(text);
});
Working sample

JavaScript:
var filter_div = $('[data-filter]');
$('#search').keyup(function(){
var val = $.trim(this.value);
filter_div.hide();
if(val.length == 0) return;
filter_div.filter(function(){
return $(this).data('filter').indexOf(val)>-1
}).show();
});
Fiddle: http://jsfiddle.net/iambriansreed/xMwS5/
​