Develop Reference

how to validate on blank input search box

how to get the search input to recognize that there is a string of input?
the code below works but even without entering any input it still does the search if I click search or enter. In other words even if the search input is blank it still searches. This is just a project, anyone has any ideas?
<input type="text" id="textInput" name="" class="query">
<script>
let query = document.querySelector('.query');
let searchBtn = document.querySelector('.searchBtn');
searchBtn.onclick = function(){
let url = 'https://www.google.com/search?q='+query.value;
window.open(url,'_self');
}
</script>
<script>
var input = document.getElementById("textInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("searchButton").click();
}
});
</script>

Simply check for a (valid) length, either greather than zero or greater than maybe three characters for any meaningful results (depends on your searches).
<script>
let query = document.querySelector('.query');
let searchBtn = document.querySelector('.searchBtn');
searchBtn.onclick = function(){
if(query.value.trim().length){ // maybe length>3 ?
let url = 'https://www.google.com/search?q='+query.value;
window.open(url,'_self');
}
}
</script>
<script>
var input = document.getElementById("textInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("searchButton").click();
}
});
</script>

You have to check if the value of input exists or it is not empty.
You can also check:
input.value.length
input.value !== ""
input.value
let query = document.querySelector('.query');
let searchBtn = document.querySelector('.searchBtn');
searchBtn.onclick = function() {
let url = 'https://www.google.com/search?q=' + query.value;
window.open(url, '_self');
}
var input = document.getElementById("textInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13 && input.value) {
event.preventDefault();
document.getElementById("searchButton").click();
}
});
<input type="text" id="textInput" name="" class="query">
<button class="searchBtn">Search</button>
Working Fiddle

If you wrap your inputs in a <form></form> you can use HTML5's built in validation.
In my example:
pattern="[\S]+" means all characters except space are valid
required means the input length must be at least 1 valid character
Also, I'm toggling the button's disabled property based on the input's validity. In my opinion it makes for a better user experience letting the user know something is incorrect BEFORE clicking the button.
let button_search = document.querySelector('button.search');
let input_query = document.querySelector('input.query');
button_search.addEventListener('click', function() {
if (input_query.validity.valid) {
window.open('https://www.google.com/search?q=' + input_query.value, '_self');
}
});
input_query.addEventListener('keyup', function(event) {
button_search.disabled = !input_query.validity.valid; //visual indicator input is invalid
if (event.keyCode === 13) {
button_search.click();
}
});
<form>
<input class="query" pattern="[\S]+" required>
<button class="search" disabled>Search</button>
</form>
Last thought, unless there is a specific reason you need to run your code in separate scopes, you can put all of your code in a single <script></script>

Control an input which filled automatically by a script

I have this script which checking if the value of variable is match or not value of a hidden input and return a confirmMessage.
the value of var maybe filled manually or automatically by another script.
when its manually there is a result, but when the input is filled automatically with a script i got no confirmmessage.
<script>
$('#vr').on('keyup change', function() {
var vr = document.getElementById('vr');
var confirm_vr = document.getElementById('confirm_vr');
var message = document.getElementById('confirmMessage');
if(vr.value == confirm_vr.value){
message.innerHTML = "MATCH";
}else{
message.innerHTML = "! Not match";
}
});
</script>
<span id='confirmMessage' ></span>
<input id='vr' name='vr' />
<input type='hidden' id='confirm_vr' name='confirm_vr' />

How do you set the input value "automatically with a script"? just by document.getElementById('vr').value = 'hello'? As easiest solution I would suggest to extract your handler logic into the global function and call it when you change the input via code:
<script>
function processChange() {
var vr = document.getElementById('vr');
var confirm_vr = document.getElementById('confirm_vr');
var message = document.getElementById('confirmMessage');
if(vr.value == confirm_vr.value){
message.innerHTML = "MATCH";
}else{
message.innerHTML = "! Not match";
}
};
$(function() {
$('#vr').on('keyup change', processChange);
});
</script>
<span id='confirmMessage' ></span>
<input id='vr' name='vr' />
<input type='hidden' id='confirm_vr' name='confirm_vr' />
<script>
$(function() {
document.getElementById('vr').value = 'hello';
processChange();
});
</script>

Adding another answer because #dhilt's answer requires that you change the code that sets the input value everytime you add a new listener.
$('#vr').on('keyup change', function() {
var vr = document.getElementById('vr');
var confirm_vr = document.getElementById('confirm_vr');
var message = document.getElementById('confirmMessage');
if(vr.value == confirm_vr.value){
message.innerHTML = "MATCH";
}else{
message.innerHTML = "! Not match";
}
});
$('#vr').on('keyup change', (e) => {
// This will get called without the code that sets
// input.value having to know about this handler
console.log('Value changed', e);
});
$('button').on('click', function() {
var vr = document.getElementById('vr');
vr.value += 'X';
// Notice that you don't need to know what handlers are set
$(vr).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id ="vr"/>
<span id='confirmMessage' ></span>
<input id='vr' name='vr'>
<input type='hidden' id='confirm_vr' name='confirm_vr' value="X"/>
<hr />
<button>Set text value</button>

JavaScript function/event listener not functioning properly

I'm completely new to JavaScript, and don't know why this isn't working. When I click on the input box, and type in less than 5 characters, i want a message to display. The message is simply not showing. Source code: https://jsfiddle.net/015por64/
<html>
<body>
<form id="form>">
<input id="input">
<div id="text"> Test </div>
</input>
</form>
</body>
</html>
<script>
function checkUserName(e, minLength) {
var username = document.getElementById("input");
var usernameLength = username.textContent;
if (usernameLength.value.length < 5) {
msg = "Your username must consist of at least five characters."
};
else {
msg = "";
text.innerHTML=msg
};
}
var text = document.getElementById("text");
text.addEventListener("blur", function(e) {checkUserName(e, 5)}, false)
</script>

Few issues with your code:
you need to attach the event to #input and not the div#text.
you need to read value of #input and not textcontent
; after if is wrong because then else will give syntax error.
<html>
<body>
<form id="form>">
<input id="input">
<div id="text"> Test </div>
</input>
</form>
</body>
</html>
<script>
function checkUserName(e, minLength) {
var username = document.getElementById("input");
var usernameLength = username.value;
if (usernameLength.length < 5) {
msg = "Your username must consist of at least five characters.";
text.innerHTML=msg;
}else {
msg = "";
text.innerHTML=msg;
};
}
var text = document.getElementById("text");
document.getElementById('input').addEventListener("blur", function(e) {checkUserName(e, 5);}, false)
</script>

It should be the input where you have to put the blur event listener.
var input = document.getElementById("input");
And since you have no use for text outside the function, better define it inside.

Autofocus on input and accept letters, digits and scanned barcodes

I have to accept either input from keyboard or 2d barcode scanner.
The input is mixture of alpha numeric, also I want user to be able to use Ctrl+v to paste their input. Currently if I try Ctrl+v, only v key is detected and shown.
Also my cursor autofocus does not work, no matter what I try.
See below the javascript.
<script>
var codes = "";
var codes_el = document.getElementById('codes');
var output_el = document.getElementById('output');
function process_key(event) {
var letter = event.key;
if (letter === 'Enter') {
event.preventDefault();
letter = "\n";
event.target.value = "";
}
// match numbers and letters for barcode
// if (letter.match(/^[a-z0-9]$/gi)){
if (letter.match(/^[a-z0-9\n-]$/gi)) {
codes += letter;
}
codes_el.value = codes;
output_el.innerHTML = codes;
}
</script>
<script>
function testAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else
return false;
}
window.onload = function() {
if (!testAttribute('input', 'autofocus'))
document.getElementById('codes').focus();
//for browser has no autofocus support, set focus to Text2.
}
</script>
and here is the html part.
Formatted HTML:
<div class="barcode_box">
<br>
<form method="POST" action="scanned.php">
<input onkeydown="process_key(event)" />
<input type="submit" value="Submit" />
<input type="hidden" name="codes" id="codes" autofocus/>
</form>
<pre id="output">
</pre>
<br>
</div>

How to make a word a link if the user has input # before it?

I am using this code:
<form oninput="x.value=a.value">Account Info <br>
<input type="text" id="a">First Name<br>
UserName <output name="x" for="a"></output>
</form>
I want i such a way that if the user inputs a word and he has place # before the word without space then how to make the word as a link. Means the tag which happens in facebook. Can it be done with java script and how.
This was just the example to demonstrate i want to intergrate this type in my project as comments. And it will be with php.
Thanks

Here's one example to check. It works with enter keypress and even prevents for adding same tags over again: http://codepen.io/zvona/pen/KpaaMN
<input class='input' type="text" />
<output class='output'></output>
and:
'use strict';
var input = document.querySelector('.input');
var output = document.querySelector('.output');
input.addEventListener('keyup', function(evt) {
if (evt.keyCode !== 13 || !input.value.length || ~output.textContent.indexOf(input.value)) {
return;
}
var tag = document.createElement('a');
tag.appendChild(document.createTextNode(input.value));
if (input.value.startsWith("#")) {
tag.setAttribute("href", input.value);
}
output.appendChild(tag);
input.value = "";
}, false);

<form>Account Info <br>
<input type="text" id="a">First Name<br/>
<output id="result" name="x" for="a"></output>
<button type="button" onclick="changeVal(document.getElementById('a').value)">Click</button>
</form>
<script>
function changeVal(value1){
var dt = value1.split(" ");
document.getElementById("result").innerHTML = "";
for(var t=0; t < dt.length; t++){
if(dt[t].startsWith("#")){
document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+" <a href='#'>"+dt[t]+"</a>";
}
else{
document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+" "+dt[t];
}
}
}
</script>
Checkout Jsfiddle demo
https://jsfiddle.net/tum32675/1/

You could use a textarea to input and a render to show the output. Then hiding the input and showing the output only. But that's another
story.
If you use a contentEditable div, you can actually insert and render the html from it in the same component. Check it out!
$(document).on("keyup","#render", function(){
var words = $(this).text().split(" ");
console.log(words);
if (words){
var newText = words.map(function(word){
if (word.indexOf("#") == 0) {
//Starts with #
//Make a link
return $("<div/>").append($("<a/>").attr("href", "#").text(word)).html();
}
return word;
});
}
$(this).empty().append(newText.join(" "));
placeCaretAtEnd( $(this)[0]);
});
Here is the Plunker
Thanks for the attention.