SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Atlanta
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having trouble with form input required="required"

    I have been working on a form for a project, and cannot get the "required" to work correctly as I am using a 'default value'.
    I have implemented a jquery script that has an onFocus and blur function, and if the form button is pressed the 'default value'
    is being passed on as the submitted entry.

    Any help with a snippet that can fix this would be greatly appreciated.

    Here's an example of my scripts:

    <form action="form_action" method="get">
    Zip Code:
    <input type="text" name="SearchZipCode" required="required" value="Enter Zip Code here" />
    <br />
    <input type="submit" value="Submit" />
    </form>

    ...

    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $('input[type="text"]').addClass("idleField");
    $('input[type="text"]').focus(function() {
    $(this).removeClass("idleField").addClass("focusField");
    if (this.value == this.defaultValue){
    this.value = '';
    }
    if(this.value != this.defaultValue){
    this.select();
    }
    });
    });
    </script>


    ***note: when value="" there is no error***


    Again, I am looking for any help with this script (html or javascript) so that the default value does not get
    passed through as a submitted entry without the user entering a value.

    Thanks!

  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)
    The required attribute only works in HTML5 supported browsers so if you plan on supporting IE8 and below it won't work, see the below jsFiddle for an easy jQuery solution to get around having the default value been sent.

    http://jsfiddle.net/chrisupjohn/qrVgU/

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Atlanta
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    ... see the below jsFiddle for an easy jQuery solution to get around having the default value been sent.
    Quick response! Thanks. Looks like it'll work. I'm gonna go test it on my server now.

    Thanks, again!

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Atlanta
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, SgtLegend! Had to make some modifications, but that script totally did the trick!

  5. #5
    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)
    No problem, glad it worked for you.


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
  •