We Keep Coding

jQuery - How do I use AND with Selector?

My code's function is to alert user if the ptype textfield is empty.
$("input[name*='ptype']").each(function() {
if ($(this).val() == "") {
$(this).css({'background-color' : '#feffe3'});
e.preventDefault();
alert("Enter Value!");
}
});
However, I need to add another criteria where another field amount is not 0. So that the function get triggered when ptype="" && amount!=0. I'm very new in jQuery, and I'm not sure how to use AND operator in here. I've tried to do some based on other questions but it seems not working.
$("input[name*='ptype'][amount!='0']").each(function() {
$("input[name*='ptype'] , [amount!='0']").each(function() {
What am I missing ?

You can do it with && sign. Code depends on where your amount field is located and what it is. If I guess right it should be something like this:
$("input[name*='ptype']").each(function() {
if ($(this).val() == "" && $(this).parent().find(input[name='amount']).val() != 0) {
$(this).css({'background-color' : '#feffe3'});
e.preventDefault();
alert("Enter Value!");
}
});

That code $("input[name*='ptype'][amount!='0']").each(function() { is valid. You have to check the CSS selectors list.
The problem maybe in your *= selection. input[name*="ptype"] means Selects every element whose name attribute value contains the substring "ptype".
$('input[name*="ptype"][amount!="0"]').each(function() {
if ($(this).val() == "") {
$(this).css({'background-color' : '#feffe3'});
e.preventDefault();
alert("Enter Value!");
}
});
Take a look at this test https://jsfiddle.net/xpvt214o/211871/

« where another field» is the key in question.
So you need a selector to check if a selected element is empty and another element is not zero.
Holà!
Logic problem here.
with $(selector) you can look up for some elements.
There is no AND / OR in selectors for many sets of matching element.
A selector is ONE set of matching elements.
No way this selector can check for an attribute value of another set.
So you have to know your markup and navigate a bit... And take care of variable types.
$("input[name*='ptype']").each(function() {
if ( parseInt( $(this).next("input").val() ) != 0) {
$(this).css({"background-color" : "red"});
alert("Enter Value!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ptype: <input type="text" name="ptype"><br>
amount: <input type="text" name="amount" value="1">
You have to look for another element's value here, from my understanding. So you have to know what is that "other" element and the methods to use may vary a lot depending on your HTML...

You can use this function in your button.
function check(e){
var verror = false;
$("input[name*='ptype']").each(function(index, value) {
var amount = $($("input[name='amount[]']").get(index)).val();
var ptype = $(this).val();
if(ptype.length <= 0 && amount.length > 0 ){
verror = true;
$(this).focus();
return false;
}
});
if(verror){
e.preventDefault();
alert("Enter Value!");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
ptype: <input type="text" name="ptype[]">
amount: <input type="text" name="amount[]" value="1"> <br>
ptype: <input type="text" name="ptype[]">
amount: <input type="text" name="amount[]" value="2"> <br>
<button type="button" onclick="check(event)">Click</button>
</form>

How do I put a min and max value in an input text for a custom date

I would like to know how I can add a min value and a max value in my input text for a date.
The format that I would like to have is : dd/mm/yyyy
So I've put a maxlenght to my input and I have added automatically "/" after the user type 2 numbers.
When I test it, everything is fine but I still can write "67/34/8888" and not a correct date for example.
Here's my code :
<form method="post" action="#" id="formStep2">
<input type="text" id="txtDate" class="selector" placeholder="dd/mm/yyyy" maxlength="10" required />
</form>
<script>
$(document).ready(function() {
$("#txtDate").keyup(function(){
if ($(this).val().length == 2){
$(this).val($(this).val() + "/");
}else if ($(this).val().length == 5){
$(this).val($(this).val() + "/");
}
});
});
</script>
Is it possible to add something like :
if ($(this).val().length == 2 && $(this).val().min == 1 && $(this).val().max == 31){...}
Thanks a lot for your help

You should be using type="date":
<input type="date" min="1970-01-01" max="2017-06-08" required>

Jquery Unfocus field if value equals

What I am trying to achieve in the below code is when "0" has been entered into the input field it gets unfocused and other stuff triggers.
$(".val-0").keyup(function() {
if ($(this).val() === 0) {
$(this).blur();
// Do other Stuffss
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="val-0" type="number">

You are missing an opening quotation on the class name, for one thing.
For another, you are using === to compare which requires same data type (strict comparison). input.val() returns data of type string not integer.
Deeper explanation here.
You want to compare using $(this).val() == 0) or $(this).val() === '0')
$(".val-0").keyup(function() {
if ($(this).val() == 0) {
$(this).blur();
// Do other Stuffss
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="val-0" type="number">

Due to some reason you cannot attached keyup event to input type of number. I tried to put working example here. I hope it will help you.
$(".val-0").keyup(function(event) {
console.log(event.which + ", " + $(this).val());
if ($(this).val() === 0) {
$(this).blur();
console.log($(this));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="val-0" type="text" />

Check for empty fields and adding style properties

There is a form with two required fields
<input type="password" id="passsword" />
<input type="password" id="conf_password" />
and submit button
Need to implement a simple check 2 fields are blank if one of the fields is empty, the button is not active when entered at least some characters in both fields button should do in css file:
#login_form{
visibility: hidden;
}
#thanks{
visibility: visible;
}
Prompt how to implement it in JavaScript or in JQuery?

You need to check both on the keyup event:
The Basic Answer:
$(document).ready(function(){
$("#password").keyup(function(){
if($(this).val().length > 0 && $("#password_conf").val().length > 0)
$("#submit").removeAttr("disabled");
else
$("#submit").attr("disabled", "disabled");
});
$("#password_conf").keyup(function(){
if($(this).val().length > 0 && $("#password").val().length > 0)
$("#submit").removeAttr("disabled");
else
$("#submit").attr("disabled", "disabled");
});
});
JSFiddle
Setting a minimum password length:
Furthermore, you can set a minimum password length by using an instance variable:
var minLength = 3;
$(document).ready(function(){
$("#password").keyup(function(){
if($(this).val().length >= minLength && $("#password_conf").val().length >= minLength)
$("#submit").removeAttr("disabled");
else
$("#submit").attr("disabled", "disabled");
});
$("#password_conf").keyup(function(){
if($(this).val().length >= minLength && $("#password").val().length >= minLength)
$("#submit").removeAttr("disabled");
else
$("#submit").attr("disabled", "disabled");
});
});
Remember that you should always validate lengths server-side as well. Don't rely on JavaScript to do your checking for you.
Editing CSS with jQuery:
You mentioned that you did not know how to modify CSS with jQuery. This is how:
$("selector").css("css-property", "value");
For example:
$("#submit").css("border-color", "blue");
You can also edit multiple properties by wrapping them in brackets:
$("#submit").css({"border-color": "blue", "visibility":"visible"});
Putting it all together:
If you want to hide the submit button instead of disabling it, while using a minimum password length, do the following:
var minLength = 3;
$(document).ready(function(){
$("#password").keyup(function(){
if($(this).val().length >= minLength && $("#password_conf").val().length >= minLength)
$("#submit").css("visibility", "visible");
else
$("#submit").css("visibility", "hidden");
});
$("#password_conf").keyup(function(){
if($(this).val().length >= minLength && $("#password").val().length >= minLength)
$("#submit").css("visibility", "visible");
else
$("#submit").css("visibility", "hidden");
});
});

<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<input type="text" class="req" id="pass" />
<input type="text" class="req" id=c_pass" />
<input type="submit" class="btn" id="button" onClick='alert("hi");' disabled/>
<script>
$(function (){
$('.req').change(function(){
if ($('#pass').val() == '' || $('#c_pass').val() == '')
{
$('#button').attr('disabled',true);
}
else
{
$('#button').attr('disabled',false);
}
});
});
</script>

Template;
<form id="test">
<input type="password" id="passsword" />
<input type="password" id="conf_password" />
<input type="submit" value="ok" id="btnSubmit">
</form>
Jquery Code;
$(document).ready(function () {
$('#test #btnSubmit').attr('disabled', 'disabled');
$('#test #passsword').keyup(function () {
if ($(this).val().length > 0 && $('#test #conf_password').val().length > 0) {
$('#test #btnSubmit').removeAttr('disabled');
}
});
$('#test #conf_password').keyup(function () {
if ($(this).val().length > 0 && $('#test #passsword').val().length > 0) {
$('#test #btnSubmit').removeAttr('disabled');
}
});
});

jQuery Class Selector Problem

I'm trying to write code that makes an alert sound if focus has left the text field with a class "mandatory", and that field is empty.
Basically if a user leaves a mandatory text field without writing anything, it will prompt them.
Here's my code, it doesn't work:
$(document).ready(function(){
$('.mandatory').blur(function(){
if($(this.id).val() == "")
{
alert('Field:' + this.id + ' is mandatory!');
}
});
});

You're using this.id when you should be using this:
if($(this).val() == "")
{
alert('Field:' + this.id + ' is mandatory!');
}
To explain: inside an event handler, this is the DOM element upon which the event was triggered. As you can see from the documentation for the $ function (note that the jQuery function and the $ function are the same thing), you can use a DOM element to build a jQuery selection.
Note that you could optimise this further by discarding the jQuery constructor and simply using this.value instead.

Assuming you're using jquery:
$(document).ready(function(){
$('.mandatory').blur(function(){
if($(this).val() == "") {
alert('Field:' + $(this).attr('id') + ' is mandatory!');
}
});
});

Your code wont work if the user has entered white space
Use
$.trim()
instead
$(document).ready(function(){
$('.mandatory').blur(function(){
if($.trim($(this).val()) == "")
{
alert('Field:' + this.id + ' is mandatory!');
}
});
});

Guess you were tryin to do this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
$(function(){
$('.mandatory').each(function (){
$(this).blur(
function(){
if($(this).val() == ""){
alert("empty");
}
})
});
});
</script>
<div id='header'>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
</div>
and this is working