SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form Validation not working

    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:

    Code JavaScript:
    <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:

    Code HTML4Strict:
    <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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try changing the name attribute for your form element to lowercase letters as mixing cases can lead to unexpected results like this.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •