Form Validation not working

JavaScript
1

Hi all,

I am trying to validate search fields in a search form. I want to make sure both fields are filled in before the form is allowed to be submitted.

I have started with the following code to get the first field validated:

<script type="javascript">
function validateForm()
{
var x=document.forms["custom-search"]["ls"].value;
if (x==null || x=="")
  {
  alert("Please enter something to search for");
  return false;
  }
}
</script>

But when I submit the form, it doesn’t even validate that field. So before I even go ahead and attempt to validate both fields - I am wondering why the validation isn’t working.

This is the form:

<form NAME="custom-search" onsubmit="return validateForm()"  method="get" action="http://cbresources.co.uk">
<label for="search-text">
<span class="search-title">Search For </span><span class="search-help">(e.g. restaurant, web designer, florist)</span>
</label>

<div class="input-cont h39">
<div class="left h39"></div>
<div class="mid h39">
<input type="text" name="ls" id="search-text" class="text" value="" />
</div>
<div class="right h39"></div>
</div>
</div>

<div class="search-location">
<label for="search-location">
<span class="search-title">Near </span><span class="search-help">(city, country)</span>
</label>
<div class="input-cont h39">
<div class="left h39"></div>
<div class="mid h39">
<input type="text" name="location" id="search-location" class="text" value="" />
</div>
<div class="right h39"></div>
</div>
</div>

<div class="search-button">
<!-- <input type="image" src="http://cbresources.co.uk/wp-content/themes/vantage/images/search.png" value="Search" /> -->
<button type="submit" id="search-submit" class="rounded-small">Search</button>
</div>
</div>
</form>

Should I be doing something different because the “Method” is GET and not POST or because the Action directs it back to the same page instead of an external search script?

This is quite an urgent request so anybody who is available to help me figure this out tonight would be a hero!

Also, like I said before, I need to be able to validate BOTH fields - I want to make sure both “ls” and “location” are filled in before the user is allowed to search.

The test page can be viewed at http://cbresources.co.uk

Regards,
Chris

2

Try changing the name attribute for your form element to lowercase letters as mixing cases can lead to unexpected results like this.

3

Hi Chris,

I changed “<form NAME” to “<form name”

It has had no effect. I can still submit the search without even entering anything in either box.

Any other ideas?

4

I got it to work in the end - I changed the form name from “custom-search” to “customsearch” - It seems it didn’t like the hyphen.

My next task is to figure out how to limit the search results to show only the 50 newest entries. I know how I would do this if I was calling upon a “search.php” script from the form’s action attribute but this is the first time I’ve worked with a form that submits to itself… so does anyone know how to do this?