Develop Reference

How do next input box does have value on focus

I have 4 input boxes and there is common key down function:
$(".pincode-input-text").keydown(function(e) {
if($(this).val()=="") {
$(this).attr('type','number');
} else if($(this).val()!="") {
$(this).attr('type','password');
}
// check if input is numeric
var enteredValue = e.key;
if ($.isNumeric(enteredValue)) {
$(this).val(enteredValue);
$(this).next().attr('type', 'number');
$(this).next().focus();
$(this).next().val('');
$('.fn-mtd_pin_validate').nextAll('span:first').html(" ");
} else if(!$.isNumeric(enteredValue)) {
// check if input is non numeric
$(this).val('');
if(e.keyCode == 8 || e.key == "Backspace") {
$(this).prev().focus();
var elemt = new mtdMobilePin($(window.pinvalidateElemnt).attr('id'));
elemt.validate();
return false;
}
$(this).focus();
$('.fn-mtd_pin_validate').nextAll('span:first').html("Invalid Characters");
$('.fn-mtd_pin_validate').nextAll('span:first').show();
}
// Update the value of input type password after value change on any input type.
var elemt = new mtdMobilePin($(window.pinvalidateElemnt).attr('id'));
elemt.validate();
});
<span class="fn-mtd_pin_validate">
<input type="password" min="0" step="1" maxlength="1" autocomplete="off" class="form-control pincode-input-text first mtd_pin_first" tabindex="30">
<input type="password" maxlength="1" autocomplete="off" min="0" step="1" class="form-control pincode-input-text second mtd_pin_second" tabindex="31">
<input type="password" maxlength="1" autocomplete="off" min="0" step="1" class="form-control pincode-input-text third mtd_pin_third" tabindex="32">
<input type="password" maxlength="1" autocomplete="off" min="0" step="1" class="form-control pincode-input-text fourth mtd_pin_fourth" tabindex="33">
</span>
I am unable to understand, why there is value appeared on second box as soon as value entered on first one. However I am using $(this).next().val('');

The problem here is your logic on focus needs to occur on the keyup event, not the keydown event. When the keydown event occurs you move the focus before it has finished so the keypress event is finishing after you move it. So the only way around it is to do the focus logic after the key event is done.
$(".pincode-input-text").on("keydown", function(e) {
//backspace logic
}).on("keyup", function(e) {
//number logic
})

How do I refocus on an input field after tabbing past the last one?

I have thee input fields. Two require input one is type submit. Like you see below.
<input id="cs1" type="text" value="" placeholder="Call Sign" onkeyup="showHint(this.value);" maxlength="16" onmousedown="isKeyPressed(event)" autofocus="autofocus" />
<input id="Fname" type="text" value="" name="Fname" placeholder="First Name" onkeyup="nameHint(this.value);" onblur="checkIn();" />
<input id="ckin1" type="submit" value="Check In" />
The usual method is input into cs1, which drops hints at possible values. Select a possible value and tab to the Name input. At which time a name may have been automatically filled or not. Either enter the name or accept the one there. Then tab to the submit input and either click on it or press tab.
This is where the problem is, if you tab you are placed on the URL (address bar) which is bad. If you click the submit the cursor is returned correctly to the cs1 input again.
I've tried all kinds of stuff like you see below, but none of it works.
$(document).ready(function () {
$('#ckin1').on('keydown', function (e) {
if (e.keyCode == 9) {
document.body.firstElementChild.focus();
e.preventDefault();
return false;
}
});
})
$(document).ready(function () {
$( "#ckin1" ).click(function() {
$( "#cs1" ).focus();
});
});
How do I get the cursor to return automatically to the cs1 input filed after a tab from the ckin1 submit?

This seems to work just fine. Since you are already using jQuery, use it to focus the first element.
$("#ckin1").on('keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9 && !e.shiftKey) {
e.preventDefault();
$('#cs1').focus();
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cs1" type="text" value="" placeholder="Call Sign" maxlength="16" />
<input id="Fname" type="text" value="" name="Fname" placeholder="First Name" />
<input id="ckin1" type="submit" value="Check In" />

Jquery input text allow decimal and value between 0.00 and 100

Jquery input text allow decimal and value between 0.00 and 100
HTML :
<input name="score type="number" min="0.01" max="100" step="0.01">
is showing invalid when i enter "1111" but i want to validation after i click the submit button
<input type="text" name="score">
<input type="submit">
Script:
if($(this).val()<= 0.01 && ($(this).val() <=100)){ // allow 0.01 to 100 100
return true;
}
i want to allow only decimal in the Field

You can use HTML for this:
<input type="number" min="0" max="100" step="0.01">
If you don't want to use HTML:
$(document).on("ready", function() {
$("#form").submit(function(e) {
var scoreVal = $("#score").val();
if(parseInt(scoreVal) <= 0 || parseInt(scoreVal) > 100) {
e.preventDefault();
console.log("Wrong value was entered!");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input id="score" type="text" name="score">
<input type="submit">
</form>

#Martijn Bots solution seems fair to me, in case you want to do it otherwise, then you can check specifically for 0.00 and then correct your logic to validate range >=0.01 to 100
function validate()
{
if ( jQuery("#mytext").val() == "0.00"
|| ( $("#mytext").val() >= 0.01 && $("#mytext").val() <=100)
)
{
alert(true);
}
else {
alert(false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="mytext" type="text" name="score" onblur="return validate();">

How to restrict use of Leading and Trailing spaces in the textbox using jquery?

I have multiple input fields with different values. I can edit them but cannot be empty (if empty show an alert). When I am editing if I edit them with blank spaces i used trim to not allow that.But,I am able to edit the input with more spaces at the start and end with a word in between.I don't need this.
How to achieve the following ?
a)Should not start with space.
b)No spaces after the word,if i have one word.
<input type="text" class="selector" value="new">
<input type="text" class="selector" value="old">
<input type="text" class="selector" value="newest">
<input type="text" class="selector" value="oldest">
<input type="text" class="selector" value="older">
$('.selector').on('blur',function () {
var current_value = $.trim($(this).val());
$(this).attr('value',current_value);
console.log(current_value);
if ($('.selector[value="' + current_value + '"]').not($(this)).length > 0 || current_value.length == 0 ) {
$(this).focus();
alert('You cannot use this');
}
});
My fiddle here

You should use this
$(this).val(current_value);
instead of this
$(this).attr('value', current_value);

Check if first index of space is 0 or last index is end of string then show alert.
Add the following Condition:
if($(this).val().indexOf(" ") == 0 || $(this).val().lastIndexOf(" ") == ($(this).val().length -1) ){
alert('You cannot use this');
}
Check updated fiddle
or Snippet:
$('.selector').on('blur', function() {
var current_value = $.trim($(this).val());
$(this).attr('value', current_value);
console.log(current_value);
if ($('.selector[value="' + current_value + '"]').not($(this)).length > 0 || current_value.length == 0) {
$(this).focus();
alert('You cannot use this');
} else
if ($(this).val().indexOf(" ") == 0 || $(this).val().lastIndexOf(" ") == ($(this).val().length - 1)) {
alert('You cannot use this too');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="selector" value="new">
<input type="text" class="selector" value="old">
<input type="text" class="selector" value="newest">
<input type="text" class="selector" value="oldest">
<input type="text" class="selector" value="older">

See the updated fiddle
$('.selector').on('blur',function () {
$(this).val($.trim($(this).val()));
if($(this).val() == "") {
alert("Empty values not allowed!");
this.focus();
}
});
Explanation:
First trim the values, then check if empty. If empty raise the alert and focus the box

I would use input pattern attribute:
<input type="text" class="selector" value="new" pattern="^[^\s]+(\s+[^\s]+)*$" />
Regex found in this answer.

To remove spaces at the start and get the value (removes all spaces from left and right edges of the string.):
var value = $.trim($("input").val());

Javascript to validate element values and checkboxes

I want to use js to check a form in the case that none of my checkboxes are checked and the input field hasn't been filled. When this is the case, the user should get a message that tells them to make at least one choice or formulate their own.
The form elements...
<input type="checkbox" name="checkboxA" id="checkboxA" value="X" />
<input type="checkbox" name="checkboxB" id="checkboxB" value="Y" />
<input type="checkbox" name="checkboxC" id="checkboxC" value="Z" />
<input type="text" id="Text" class="textfield" value="please enter text." maxlength="100" size="40" onblur="if (this.value == '') {this.value = 'please enter text';}" onfocus="if (this.value == 'please enter text') {this.value = '';}" />
...are checked by this js function when the POST method is performed:
function checkFormElement() {
if ((document.getElementById("text").value == "please enter text.")
&& (document.getElementById("checkboxA").checked == false)
&& (document.getElementById("checkboxB").checked == false)
&& (document.getElementById("checkboxC").checked == false)){
alert("Please choose out of X Y Z or formulate your own choice .");
document.getElementById("checkboxA").focus();
return false;
}
return true;
}
I guess using jQuery should be much easier but I still love to know how to solve this in pure js.

Case matters with ID values so change this:
document.getElementById("text").value
to this to match what you have in your HTML:
document.getElementById("Text").value
Once I fix the case issue and put in code to actually call checkFormElement(), it seems to work fine here: http://jsfiddle.net/jfriend00/9DHxF/

You're missing a submit or similar type of button\option that will run checkFormElement().
Once you include something that calls this function, you shouldn't experience any problems.

You have a few errors in your code. Mostly mismatched IDs and such.
Working example here: http://jsfiddle.net/E8SBq/
This should work for you:
<input type="checkbox" name="checkboxA" id="checkboxA" value="X" />
<input type="checkbox" name="checkboxB" id="checkboxB" value="Y" />
<input type="checkbox" name="checkboxC" id="checkboxC" value="Z" />
<input type="text" id="Text" class="textfield" value="please enter text" maxlength="100" size="40" onblur="if (this.value == '') {this.value = 'please enter text';}" onfocus="if (this.value == 'please enter text') {this.value = '';}" />
<input type="submit" value="Submit" onClick="checkFormElement()" />
And the JS function:
function checkFormElement() {
if (document.getElementById("Text").value != null
&& document.getElementById("checkboxA").checked == false
&& document.getElementById("checkboxB").checked == false
&& document.getElementById("checkboxC").checked == false) {
alert("Please choose out of X Y Z or formulate your own choice .");
document.getElementById("checkboxA").focus();
return false;
}
return true;
}