Using JQuery, how do I check that at least one textbox is not empty?

Question

Sounds simple but it's giving me grief:

Tried this:

function validateAddress() {

    if (!($('<%=txtPlaceName.ClientID%>').val() === "")
         || !($('<%=txtStreet.ClientID%>').val() === "")
         || !($('<%=txtAddress.ClientID%>').val() === "")
         || !($('<%=txtPostcode.ClientID%>').val() === "")) {

        return true;
    }

    return false;
}

and this:

function validateAddress() {

    if ($('<%=txtPlaceName.ClientID%>').val().length > 0
         || $('<%=txtStreet.ClientID%>').val().length > 0
         || $('<%=txtAddress.ClientID%>').val().length > 0
         || $('<%=txtPostcode.ClientID%>').val().length > 0) {

        return true;
    }

    return false;
}

but neither seem to work, am I doing it correctly?

Answer 1

It looks like you're missing the "#" in your jquery selectors for ids. Try this:

if ($('#<%=txtPlaceName.ClientID%>').val().length > 0 
     || $('#<%=txtStreet.ClientID%>').val().length > 0 
     || $('#<%=txtAddress.ClientID%>').val().length > 0 
     || $('#<%=txtPostcode.ClientID%>').val().length > 0) { 

Answer 2

You're forgetting the hash mark to select something by id. Try:

function validateAddress() {

    if ($('#<%=txtPlaceName.ClientID%>').val().length > 0
         || $('#<%=txtStreet.ClientID%>').val().length > 0
         || $('#<%=txtAddress.ClientID%>').val().length > 0
         || $('#<%=txtPostcode.ClientID%>').val().length > 0) {

        return true;
    }

    return false;
}

Answer 3

are you adding # to the ID of the element when you check it, in other words, is the produced text like this:

$('#IDOfElement').val()

Answer 4

For a #ID selector you need a #, like this:

$('#<%=txtPlaceName.ClientID%>').val().length

But the quicker way could be to give them a class, e.g. CssClass="checkMe", then check those elements:

function validateAddress() {
  return $('.checkMe[value!=""]').length > 0;
}

Answer 5

I've been using classes to group functionality, so for your example give each of the element a class of address then your function would be:

function validateAddress() {
  $('.address').each(function() {
    if ($(this).val().length > 0) {
      return true;
    }
  }
  return false;
}