Reputation: 1
I'm trying to create a tool that allows users to generate CSS code. At the moment I'm working on input - when a user leaves a text input empty, I'd like a message to appear. The code I have at the moment doesn't seem to work in doing so, any ideas?
$("#btn-css").click(function() {
if( $('input').attr(value) = "" ) {
$('#output').append('All boxes must be completed');
} else {
$('.preview').attr('style', 'box-shadow: ' + $("#h-value").val() + 'px ' + $("#v-value").val() + 'px ' + $("#blur").val() + 'px ' + $("#spread").val() + 'px #' + $("#colour").val() + ';');
$('#output').append('box-shadow: ' + $("#h-value").val() + 'px ' + $("#v-value").val() + 'px ' + $("#blur").val() + 'px ' + $("#spread").val() + 'px #' + $("#colour").val() + ';');
}
});
Upvotes: 0
Views: 129
Reputation: 36551
use .val()
.. val()
does the exact same thing you mentioned..
if( $('input').val() == "" ) {
to check for all input..
var inputVallength=$('input').filter(function(){
return this.value==""
}).length;
if(inputVallength == 0 || inputVallength < $('input').length){
$('#output').append('All boxes must be completed');
}
Upvotes: 1
Reputation: 3612
How about this it will select all text inputs on the page then filter them to be the ones that are empty.
$("#btn-css").click(function() {
var emptyInputs = $('input:text').filter(function() { return this.value == ""; });
if (emptyInputs.length === 0) {
// Everything filled in
} else {
$('#output').append('All boxes must be completed');
}
});
You might also want to do:
var emptyInputs = $('input:text').filter(function() { return $.trim(this.value) == ""; });
This will also pick up text inputs with just whitespace.
Upvotes: 1
Reputation: 50808
Just do
$(':input').each(function(){
if(!$(this).val()){
//logic
}
});
Upvotes: 0
Reputation: 7898
$('input').attr(value)
This selects ALL input elements on the entire page.
And also what @Mike Christensen said, you need at least 2 equal signs.
Upvotes: 0