We Keep Coding

add red border on click jquery on inputs

Using jQuery and HTML
When user clicks on button, I just want to put red border if value is empty. Otherwise do not put border.
Issue: first when you click on a button it works fine, but than if you enter a value, and hit button, than red border should be removed
$('.mybutton').click(function() {
if ($(".input").val().trim() == '')
$(".input").css('border-color', 'red');
else
$(".input").css('border-color', '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

Since you have more than one .input class, you have to iterate through them and check whether each input has some value or not.
JSFiddle can works the way you expected.
$(function () {
$('.mybutton').click(function () {
$(".input").each(function () {
if ($(this).val().trim() == '')
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});
});
});

Loop each input after every click
Use .addClass() and .removeClass()
use this context to refer to current input to be evaluated if needed to add class or remove class
$('.mybutton').click(function() {
$(".input").each(function() {
if ($(this).val().trim() == '')
$(this).addClass('border');
else
$(this).removeClass('border');
})
});
.border {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

You're currently selecting all inputs with your selector .input. When you do this and access the value it would return the value of the first selected element. (You'll notice that the highlighting works based on the value of the first input).
What you should instead do is iterate through the matched elements using .each and check the value/set style using this.
e.g.
$('.mybutton').click(function() {
$(".input").each(function() {
if (this.value.trim().length === 0)
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">
You should also have a look at the required attribute which is a much simpler way of displaying required fields.

You need to add an event handler for the input.
$('.input').on("input", function () {
if ($(".input").val().trim() == '')
$(".input").css('border-color', 'red');
else
$(".input").css('border-color', '');
});
You could go one step further and put this in a function.
Something like this
<script>
function validateInput() {
if ($(".input").val().trim() == '')
$(".input").css('border-color', 'red');
else
$(".input").css('border-color', '');
}
$(function () {
// The JQuery "on" function is generally preferred for
// attaching event handlers
$('.mybutton').on("click" ,validateInput);
$('.input').on("input", validateInput);
});
</script>

Disable button unless specific fields have values

I have an ASPX form and I need to disable the submit button if any one of six specific fields are empty. I'm trying to do this via Javascript or jQuery, but so far I can only find examples of either a single field on the form being empty, or ALL fields on the form. In my case, I don't care about several fields - only the six specific ones.
So basically, I have six conditions and one action. I found one example, but it was stringing together six different IF statements. I'd like to find a more streamlined way if possible. So, for example, I might do THIS for a single field... but how to do it for field2, field3, field4, etc. as well?
$(document).ready(function(){
$('#submit_btn').prop('disabled',true);
$('#field1').keyup(function(){
$('#submit_btn').prop('disabled');
})
});
Using Javascript or jQuery, what's the most efficient way to disable an input button if any of six input fields is blank?

You can add the same class name to all the elements and then do a validation foreach class element. Like in below code, i added the same class name to all the input for which the validation is required using class="valid" and then use the jquery class selector and the keyup method that you used to control the state of the button.
(function() {
$('.valid').keyup(function() {
var isEmpty = false;
$('.valid').each(function() {
if ($(this).val() == '') {
isEmpty = true;
}
});
if (isEmpty) {
$('#button1').attr('disabled', 'disabled');
} else {
$('#button1').removeAttr('disabled');
}
});
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
1<input type="text" class="valid" /><br />
2<input type="text" class="valid" /><br />
3<input type="text" class="valid" /><br />
4<input type="text" class="valid" /><br />
5<input type="text" class="valid" /><br />
6<input type="text" class="valid" /><br />
<input type="button" id="button1" value="Test Me!" disabled="disabled" />
</form>

If your requirements will allow it, you can use HTML 5 field validation. The browser will not allow the form to submit.
<form>
<label for="choose">Foo</label>
<input name="bar" required>
<input type="submit" /> <!-- <--- This will generate an error message if the user clicks it when the field is empty -->
</form>

You have the start of it correct; create an array with six variables, one for each of the fields, and create a new function to validate everything that is called on each keyup. So you would have
var[] array
$('#field1').keyup(function() {
array[0] = $('#field1').val();
validate();
}
${'#field2').keyup(function() {
array[1] = $('#field2').val();
validate();
}
...create one each for each field
function validate() {
for (var i = 0; i < array.length; i++) {
if(!arrays[i]) {
$('#submit_btn').prop('disabled');
return;
}
}
$('#submit_btn').prop('enabled'):
}
What this does is it listens to the fields for changes and updates the array. A blank value is falsy so you can just go through the array and disable the button if it's blank or null or something. Break out of the for loop in that case; you don't care about whatever else. If nothing disables the button and breaks the for loop then it's valid and the button is enabled.
This approach is useful because it's easily extendable. You can just push extra things into the array if you want to check them without rewriting the validation function.
This assumes you do not want to just use standard form validation and do it manually.

Add a common class to each of the required inputs. Then check the length of that object against the length of a filtered object where value is not empty. Then you can use that condition to set the prop value of the button to true/false.
http://api.jquery.com/filter/
JQuery:
$('form .required-valid').on('input paste change', function() {
var $required = $('form .required-valid');
//filter required inputs to only ones that have a value.
var $valid = $required.filter(function() {
return this.value != '';
});
//set disabled prop to false if valid input count is != required input count
$('#submit_btn').prop('disabled', $valid.length != $required.length);
});
HTML:
<form>
<label>Field1</label>
<input type="text" id="field1" class="required-valid" />
<label>Field2</label>
<input type="text" id="field2" class="required-valid" />
<label>Field3</label>
<input type="text" id="field3" class="required-valid" />
<label>Field4</label>
<input type="text" id="field4" class="required-valid" />
<label>Field5</label>
<input type="text" id="field5" class="required-valid" />
<label>Field6</label>
<input type="text" id="field6" class="required-valid" />
<label>Field7</label>
<input type="text" id="field7" class="not-required" placeholder="not required" />
<button id="submit_btn" disabled>
Submit
</button>
</form>
Example:
https://jsfiddle.net/SeanWessell/q2msc80L/

$(document).ready(function() {
$('#submit_btn').prop('disabled', true);
$('#field1').keyup(function() { // on keyup
var value = $(this).val(); // retrieve the value of the input
if (value.length == 0) // if the value's length is 0 (empty)
$('#submit_btn').prop('disabled', true); // disable the button
else // if not
$('#submit_btn').prop('disabled', false); // enable it
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="field1"/>
<input id="submit_btn" type="submit"/>
</form>
Just note that the form can be submitted using enter key, so instead of checking on every keyup, it would be better if you check onsubmit instead.

Compare values in two input fields

I have two input fields and i am wondering how do i compare value's between these two fields.
<input id="start" type="numeric" value="" />
<input id="end" type="numeric" value="" />
In above input fields, if the value in input field with id='start' is greater than id='end', i want to display an alert.
I tried below but not working
if ($("#end").val() > $("#start").val()) {
//do something
}else {
alert('Wrong Input');
}
What am i doing wrong???

You should bind an event handler such as 'keypress' to one of the fields. When that even is triggered, you should compare the values of both the input fields and show alert if necessary.
Additionally, type="number" is correct not "numeric" .
Here's a working fiddle-
http://jsfiddle.net/pe2ZE/

Use type="number", As per my knowledge there is type as such numeric
Code
if (+$("#end").val() > +$("#start").val()) {
//do something
} else {
alert('Wrong Input');
}
Here I have use + to convert value to integer

you are comparing strings $("#end").val() > $("#start").val() so you have to compare in numbers, and dont forget about the radix
if(parseInt($("#end").val(),10) > parseInt($("#start").val(),10))
and type="numeric" is a wrong syntax, use type="number"
<input id="start" type="number" value="" />

You need to use type="number" to make the script work:
<input id="start" type="number" value="" />
<input id="end" type="number" value="" />
Demo
Or you can use input type text and then parse the input using parseInt(val) and compare them. somethink like this:
if (parseInt($("#end").val()) > parseInt($("#start").val())){
//rest code
}

you can't use type="numeric" to make input numeric only
to solve this proplem use this code
HTML
<input type="tel" name="name">
jQuery
// HTML Text Input allow only Numeric input
$('[type=tel]').on('change', function(e) {
$(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
keys = ['0','1','2','3','4','5','6','7','8','9','.']
return keys.indexOf(event.key) > -1
})

You have to type cast the value to int just like
if (parseInt($("#end").val()) > parseInt($("#start").val())) {
//do something
}else {
alert('Wrong Input');
}

Check all input fields have been filled out with jQuery

I have 3 divs, each with a dfew input fields and next button on.
I want to write a snippet of jQuery that when the next button is clicked it checks to ensure all input fields WITHIN the same div as the button, are not null.
I've tried the following with no luck but Im 100% certain its wrong, only I cant find the relevant information online...
http://jsfiddle.net/xG2KS/1/

You could use filter to reduce the set of all input elements to only those that are empty, and check the length property of what remains:
$(".next").click(function() {
var empty = $(this).parent().find("input").filter(function() {
return this.value === "";
});
if(empty.length) {
//At least one input is empty
}
});
Note that the definition of empty in the above code is an empty string. If you want to treat blank spaces as empty too, you may want to trim the value before comparing.
Also note that there is no need to pass this into jQuery inside the filter function. The DOM element itself will have a value property, and it's much faster to access that instead of using val.
Here's an updated fiddle.

$('.next').click(function() {
var emptyInputs = $(this).parent().find('input[type="text"]').filter(function() { return $(this).val() == ""; });
if (emptyInputs.length) {
alert('Fail!');
}
});

Because there is no jQuery selector for this case you can extend jQuery’s selector capabilities.
Assuming you select all :text elements, the extension is:
$.extend($.expr[':'],{
isEmpty: function(e) {
return e.value === '';
}
});
Hence, you can select all empty text fields:
$(this).closest('div').find(':text:isEmpty');
$.extend($.expr[':'], {
isEmpty: function (e) {
return e.value === '';
}
});
$('.next').click(function () {
var missingRequired = $(this).closest('div').find(':text:isEmpty');
console.log('Empty text fields: ' + missingRequired.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="next" class="next" />
</div>
<div>
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="next" class="next" />
</div>
<div>
<input type="text" /><br />
<input type="text" /><br />
<input type="submit" value="next" class="next" />
</div>

$('.next').click(function() {
var inputs = $(this).parent().find('input[value=""]');
if (!inputs.length) {
// you have empty fields if this section is reached
}
});

use jQuery to move the cursor to another field when a certain character is typed?

I have two text fields in my web page. The user is supposed to enter two numbers seperated by a hyphen ("-") character. The numbers may be between 1 and 10 digits each. I need the cursor to move to the next field when the user presses the hyphen key.
I can easily move the cursor using $('#txtField2').focus(). However, I still have the problem that the hyphen character remains in the first text field. How can I easily supress the hyphen from appearing in the first text field?

HTML
<form>
<input type='text' class='num' />
<input type='text' class='num' />
</form>
JavaScript
$('.num:first').keydown(function (event) {
// check for hyphen
if (event.which === 189) {
event.preventDefault();
$(this).next('.num').focus();
}
});
Live demo

Assuming a simplified html of:
<form action="#" method="post">
<fieldset>
<label for="numOne">Number:</label>
<input type="text" id="numOne" name="numOne" />
<input type="text" id="numTwo" name="numTwo" />
</fieldset>
</form>
The following should work, or serve as an example:
$('#numOne').keypress(
function(e){
if (e.which == 45) {
$(this).next('input:text').focus();
return false; // prevents the '-' being entered.
}
});
JS Fiddle
Incidentally, I used $(this).next('input:text') rather than an id-based selector to allow for more general application and re-use.
References:
keypress(),
next().

I'd do it like this:
$('#input1').keypress(function(e) {
if(e.keyCode == 45) {
e.preventDefault();
$('#input2').focus();
}
});
see live example here: http://jsfiddle.net/wjNP3/2/

you could "listen" to that character and just focus the other field and prevent it from inputing

Maybe this can help you:
HTML
<div>
<p>Insert Your Number:</p>
<input type="number" value="" id="first" >
<input type="number" value="" id="second" >
<input type="number" value="" id="third" >
<input type="submit" id="submit">
</div>
jQuery
$("#first").on("keypress", function(){
if($("#first").val().length == 4){
$("#second").focus();
}
})
$("#second").on("keypress", function(){
if($("#second").val().length == 4){
$("#third").focus();
}
})
$("#third").on("keypress", function(){
if($("#third").val().length == 5){
$("#submit").focus();
}
})
OR you can check Live DEMO by CLICK HERE!