I'm look for an elegant way to check if input value is not empty and not default.
For example let's say we have input with value Username, this is a default value, and once the user clicks on this input field Username would be deleted so user could enter what he wants. Just to make it clear this is how it would look when the page is loaded:
<input type="text" class="defaultValue" value="Username" />
Now by default this field would never be empty, unless user would do something to make it empty, so just to make sure i need to check for both things. The way i would do this is very simple:
if($(".defaultValue").val().length == 0 || $(".defaultValue").val() == "Username")
alert("Please enter your username");
So this works, but looks ugly as hell. And usually i need to deal with huge forms so my code gets really ugly and hard to manage because of this, any way to improve this?
Thanks.
Try:
if (this.value == '' || this.value == this.defaultValue) {
// value is empty or is default value
}
Try writing a helper function to do this check for you.
var isEmptyOrDefault = function(field, default) {
var value = $(field).val();
return (value.length === 0 || value === default);
};
So you can use it:
if (isEmptyOrDefault($('.defaultValue'), 'Username')) {
alert("Please enter your username");
}
Related
I've been looking at other questions trying to get my head around callbacks but I just can't make sense of it enough to use in my context. I'm writing a text based game which uses purely text input. When needed, I want the game to ask a question with a varying amount of answers and then wait until a valid response is given. Below is an example that doesn't work but explains what I'm trying to do. Can anyone provide me with any guidance? Thanks.
//main code
pEQUIP = ["foo", "foo", "foo"];
exItem = "ball";
function prompt(numPrompts, callback) {
//waits until user types a number <= numPrompts and presses enter, then returns the valid result entered
}
$('#gametext').append("<p>" + "What slot would you like to use to hold this item?" + "</p>");
//where a function would be stopping the code until a valid answer is given
if (prompt == "1") {
pEQUIP[0] = exItem;
} else if (prompt == "2") {
pEQUIP[1] = exItem;
} else if (prompt == "3") {
pEQUIP[2] = exItem;
}
//Just a quick n dirty way of testing it worked below:
$('#gametext').append("<p>" + pEQUIP[0] + pEQUIP[1] + pEQUIP[2] + "</p>");
//parses user info unsure if this could be used or would have to be copied
$(document).ready(function() {
$(document).keypress(function(key) {
if (key.which === 13 && $('#userinput').is(':focus')) {
var value = $('#userinput').val().toLowerCase();
$('#userinput').val("");
//playerInput(value); Is usually here, would lead to
//a switch which parses commands typed by the user.
//Unsure if it can be used for this problem as pausing
//the code I think would stop the switch?
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="gametext"></div>
<input id="userinput">
</body>
It appears as though you're thinking of functions incorrectly.
Functions are:
A series of steps that may return data when they're invoked. You
invoke a function by passing arguments to the function name, even if
the arguments are nothing () - a.e. alert(string) or myFunction()
Not comparable to anything but themselves. In your code you have prompt == "1" this isn't going to work. prompt is a function name and it isn't invoked so you are literally comparing the function itself to the string "1".
Able to return data when invoked. That data can be compared.
Note: Also, very importantly, prompt is the name of a default function(like alert or console) and you shouldn't overwrite it. It isn't considered a reserved keyword by the language but altering it will cause havok if any other library you're using, or any other programmer doesn't know it's been overwritten, and tries to invoke it.
prompt("this is a normal prompt");
Furthermore you have the document setup to check the value of the text box itself on keypress. You should probably change this to an event listener on the text box, but there isn't any reason to continuously loop a function beyond this while waiting for the box to match some predefined input.
The Flow is this:
type in the box
hit enter
check value
if value is 1 or 2 or 3 or any other acceptable answer do something
If that's all you need currently then you do not need to work so hard for the functionality when a single event listener could do the trick:
$("#input_box").on("keypress", function(e) {
if(e.keyCode === 13) {
let value = $("#input_box").val();
if(value === "1" || value === "2" || value === "3") {
//do whatever
}
}
});
$("#input_box").on("keypress", function(e) {
if(e.keyCode === 13) {
let value = $("#input_box").val();
if(value === "1" || value === "2" || value === "3") {
console.log("accepted");
}
$("#input_box").val("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_box">
I'm learning how to program so bear with me. I pretty much need to verify if there are empty spaces in a form that needs to be filled out, I'm using javascript. I did the following but for some reason even if I fill out all the spaces it still tells me that there are empty spaces.
(This his how the HMTML for each id looks like)
<label for="txtNombre">Name</label>
<input type="text" id="txtName" placeholder="Name">
let inputName = document.querySelector('#txtName').value;
let inputLastName = document.querySelector('#txtLastName').value;
let inputPassword = document.querySelector('#txtPassword').value;
let inputConfirm = document.querySelector('#txtConfirm').value;
let inputDate = document.querySelector('#dDate').value;
function validateForm(){
let bError = false;
if(inputPassword === '' || inputConfirm === '' || inputName ==='' || inputLastName === '' || inputDate === ''){
bError = true;
showMessage(bError);
}else if (inputPassword === inputConfirm) {
inputPassword.classList.remove('borderError');
showMessage(bError);
} else{
inputPassword.classList.add('borderError');
bError = true;
showMessage2(bError);
}
}
function showMessage(pbError){
divMessage.innerHTML = '';
divMessage.classList.remove('error');
divMessage.classList.remove('correct');
let spanMessage = document.createElement('span');
let nodeMessage;
if(pbError === true){
divMessage.classList.add('error');
nodeMessage = document.createTextNode('Missing fields to be filled out');
}else{
divMessage.classList.add('correcto');
nodeMessage = document.createTextNode('Data saved');
}
spanMessage.appendChild(nodeMessage);
divMessage.appendChild(spanMessage);
divMessage.classList.remove('invisible');
}
Since your questions doesn't hold any of your html code, and since Im unsure if you javascript is the entire script, or if there is anything defined outside the scope of your functions, my answer is limited to the information you have provided.
First off, since you are a new developer. You should first of, learn
how to use the developer tools of the browser you are using (most
browsers have them). There should be a console there, which will log
all the errors that occurs in your javascript. This is the most
efficient way to debug your code.
As someone have commented on your question here, the most likely error, is that the variables you are trying validate as blank or not, are undefined variables. Thus, they will never match ""
You should refer to the value of the input fields before you check them.
Lets say you have a input field:
<input name="test" type="text" id="testinput" />
Then you define the variable that refers to the value of this input, and check its value:
var testInput = document.getElementById('testinput').value
if( testInput === "" ) //Do something
Note, there are several methods to refer to a DOM-element in javascript, getElementById is just one of them. You should do some research, and choose the solution that fits you best
assuming that you are storing the input value in those varialiables like inputPassword for example:
const inputPassword = document.getElementById('myInput').value
Your code should work as far as I can tell from what you have posted.
Hope it helps
I need to transfer date from one asp form to another based on some checks.
In the source page I do the check and send as following:
if (txtFinalized.Text == "" && rblPhysicalrecords.SelectedValue=="1" && ddlResponsibility.SelectedIndex == 5)
{
//String s = Request.QueryString["finlalisationDate"] = txtFinalized.Text;
Session["finlalisationDate"] = txtFinalized.Text;
}
Then I try to read the value in the target form but so far I can't get the resut inserted into the input field as I need.
txtFinalised.Text = (string)(Session["finlalisationDate"]);
Do I need to write a method in javascript to fetch the result and insert it to the field and if yes how do I do that?
Your condition block has a flaw, it says txtFinalized must be empty to set a value to your session variable.
For learning and and understand session you could write your code like this...
//remove txtFinalized from condition
if (rblPhysicalrecords.SelectedValue=="1" && ddlResponsibility.SelectedIndex == 5)
{
//check if textFinalized NOT is null or empty
if (!String.IsNullOrEmpty)
{
Session["finlalisationDate"] = txtFinalized.Text;
}
//if textFinalized is empty set session to a value just to see some text
else
{
Session["finlalisationDate"] = "n/a";
}
}
Now when you load your second form you will always see something in your textFinalized textbox and from what you see you know if the user made some input in the first form.
You can modify your condition block like below
if (!String.IsNullOrEmpty(txtFinalized.Text) && rblPhysicalrecords.SelectedValue=="1" && ddlResponsibility.SelectedIndex == 5)
{
//String s = Request.QueryString["finlalisationDate"] = txtFinalized.Text;
Session["finlalisationDate"] = txtFinalized.Text;
}
I wrote a simple html file with a textbox and submit button, and it generates and document.write's a response dependant on what you submit. I want to have it generate a response saying to enter content if the box is empty. The textbox's id is chatinput, so I have the following the code in the beginning
var chatinput_box=document.getElementById('chatinput');
var chatinput=chatinput_box.value;
Then a have a conditional, although I can't get it to work correctly; I've tried
if(chatinput==""){}
if(chatinput.length=0){}
if(chatinput=null){}
and others but none have worked correctly. Does anyone have another idea?
It should be this:
var chatinput = document.getElementById("chatinput").value;
if (chatinput == "" || chatinput.length == 0 || chatinput == null)
{
// Invalid... Box is empty
}
Or shorthanded:
if (!document.getElementById("chatinput").value)
{
// Invalid... Box is empty
}
The = assigns a value whereas == checks whether the values are equal.
Just offering an alternative, not trying to steal thunder ...
Create an isEmpty function to reuse on a variety of items.
function isEmpty(val){
return ((val !== '') && (val !== undefined) && (val.length > 0) && (val !== null));
}
Then you can apply it to whatever element you want:
if(!isEmpty(chatinput)){
// hooray its got a value!
}
Not exactly original, its the concept stolen from PHP, but it comes in handy a lot.
Imagine we have a text field that executes the code below on each keydown event:
if( $('#my_input').val() == '' )
$('#my_span').html('my input is blank');
else
$('#my_span').html('My input is not blank');
Obviously we are executing code that possibly sets the state of something (#my_span element) to what it already is and this seems inefficient. But I am curious as to what the alternative is? Adding more checks like:
if ( $('#my_input').val() == '' ){
if ( $('#my_span').html() != 'my input is blank' )
$('#my_span').html('my input is blank');
}
else if ( $('#my_span').html() != 'My input is not blank' )
$('#myspan').html('My input is not blank');
Is the latter more efficient? It would seem to me more 'correct', but obviously it's more code and I'm not sure how much more efficient it is than the first example.
I know that the former always involves a DOM manipulation, which will factor in computing the relative efficiency, but I've encountered situations like this before in non-DOM related code, so wondering what is the best approach in all cases. Should you always do the extra check on the value of something before setting it to a new value?
EDIT:
My final version actually uses a combination of the answers here so thanks to all for the great replies. So to sum, I now:
Cache the jquery objects in a closure
Uses state to determine the assignment to a new state
Also as an aside, the setTimeout on the keydown is a very nice way to get a input fields value immediately. Thanks again.
I would cache the jQuery objects and use a boolean to store the state and not call html when you don't have to :
(function(){
var i = $('#my_input'), s=$('#my_span'), blank, check = function() {
if (i.val()=='') {
if (blank!==true) s.html('my input is blank');
blank = true;
} else {
if (blank!==false) s.html('my input is not blank');
blank = false;
}
};
i.keyup(check);
check(); // so that the span is initially filled
})();
Note that what you need isn't keydown but keyup, so that the value of the input is changed before you get the event.
This method even works if you keep pressing the key ;)
Performance? Go Pure JS. Fiddle
//before event binding
var my_input = document.getElementById('my_input'),
my_span = document.getElementById('my_span');
$(my_input).on('keydown', function () {
//inside event handler
var value = my_input.value
, prevVal = my_input.prevVal
;
if (value && prevVal && prevVal !== value) {
return;
}
//timeout to return event handler execution early
//(ie: differ DOM manipulation from the event handler.
//So, UX will extra smooth ;) )
setTimeout(function () {
fieldStatusUpdater(my_input.value);
}, 1);
});
function fieldStatusUpdater(value) {
if (my_input.value === '') {
my_span.innerHTML = 'my input is blank';
} else {
my_span.innerHTML = 'My input is not blank';
}
my_input.prevVal = value;
}
This is the fastest and nicest I can come up with:
function keyUpEvent(){
var state = null,
input = $('#my_input'),
span = $('#my_span');
return function(){
var test = input.val() === '';
if( test === state) return;
if(test)
span.html('my input is blank');
else
span.html('My input is not blank');
state = test;
}
}
$('#my_input').keyup(keyUpEvent());
http://jsfiddle.net/TMb8T/
This uses closures to store the input and span elements after initialization. And you can use it (almost) as if its a normal function, so u can bind it do multiple events and it still works.
Note that you have to execute keyUpEvent when you bind the event.
Addition:
You can now also do something like this:
function keyUpEvent(input, span){
var state = null;
return function(){
var test = input.val() === '';
if( test === state) return;
if(test)
span.html('My input is blank');
else
span.html('My input is not blank');
state = test;
}
}
$('#my_input').keyup( keyUpEvent($('#my_input'), $('#my_span')) );
$('#my_input2').keyup( keyUpEvent($('#my_input2'), $('#my_span2')) );
http://jsfiddle.net/TMb8T/2/
Like this you can easily check every input of a whole form with one single event handler.
Addition 2: If you want to make version 2 work even when the key is kept down ;)
Replace this:
$('#my_input').keyup( keyUpEvent($('#my_input'), $('#my_span')) );
With this:
$('#my_input').keydown(function(){
setTimeout(keyUpEvent($('#my_input'), $('#my_span')),1);
});
http://jsfiddle.net/TMb8T/4/
It really depends on how often you are executing the code. If it executes only when the user presses a button or something like that it would be fine to use the first one, it it runs on a quick timer then it might not.
Do like this:
var text;
if ( $('#my_input').val() == '' )
text = 'my input is blank';
else
text = 'My input is not blank';
if ( $(#my_span).html() != text )
$('#my_span').html(text);
Init:
var isBlank = true;
$('#my_span').html('my input is blank');
keyup:
if(!isBlank){
if( $('#my_input').val().length == 0){
isBlank = true;
$('#my_span').html('my input is blank');
}
} else {
if($('#my_input').val().length){
isBlank = false;
$('#my_span').html('my input is not blank');
}
}
This way you are only manipulating the DOM if the state changes.
Also testing the length property may actually be faster than testing the string against "", because the interpreter won't have to create a String object from the string literal.
You can simplify it with a ternary
$('#my_span').html( $('#my_input').val() == '' ? 'my input is blank' : 'My input is not blank' );
More readable
var text = $('#my_input').val() == '' ? 'my input is blank' : 'My input is not blank';
$('#my_span').html(text);
And it you care about speed, it comes up is a DOM redraw faster that reading content. That really will depend on the page strucutre/size,browser. JSPerf is your friend if you want to see how many milliseconds you will save with 1000's of iterations. You really should be looking for the fastest if you see a performance problem.
No Check, Writing content
You have the penalty of updating the DOM if data changed or did not change
Check, Writing content
You have the penalty of reading the HTML
You have penalty of updating DOM
Check, no write needed
You have the penalty of reading the HTML
Now Is the HTML most likely going to be different, the same, etc?
The solution depends on what you want to do. Caching the jQuery element will speed up the lookup/write. It will be slower than just a write.
How about saving the current value to a variable and just testing the variable to see if you have to change it. No messing with the DOM until you need to change it. (You could also use a boolean named isBlank to get good effect here):
var currValue;
if ( $('#my_input').val() == '' ) {
if ( currValue != 'my input is blank' ) {
currValue = 'my input is blank';
$('#my_span').html(currValue);
}
} else if ( currValue != 'My input is not blank' ) {
currValue = 'My input is not blank';
$('#my_span').html(currValue);
}
You also mentioned this is in the keydown event handler.
Don't forget to run this code one time at the start so it sets the display field to show the input field is blank to start with.
Don't forget that the user can select the text and right click to choose 'cut' and empty the field or choose 'paste' to add text to the field. Similarly, a drag and drop action can conceivably add or remove text.
Alternate Train of Thought
You might be better off with periodic, timed event that checks. Some people can type bursts of keys around 3 or 4 a second. If you timed it to look at the field every 1 second, you could cut down the short term slowdown due to this code running and replace it with a long term constant use of CPU cycles. But remember that there is no reason to not use CPU cycles if the computer isn't doing anything interesting.