www.webdeveloper.com
Results 1 to 14 of 14

Thread: JavaScript to verify URL field starts with "http"

  1. #1
    Join Date
    Feb 2003
    Posts
    70

    JavaScript to verify URL field starts with "http"

    I'm looking for a JavaScript to verify that the optional URL field on my form ( http://www.usedflutes.com/addpage.html )starts with "http" (people sometimes enter "www" or use the field for text, both of which don't work with the database). Anybody have a script that will do this? Many thanks in advance.

    -Bob

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    <input type="text" onchange="if(!/^http:\/\//.test(this.value)) {alert ('Please, this URI needs to start with the HTTP protocol, \'http://\''); this.value = ''; this.focus()}">
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    2,653
    //presuming this will have a url
    var url = document.formName.fieldName.value;

    var url = "ttp://www.cnn.com"
    if(url.charAt(0)=="h"){
    alert("OK")
    }

    cheers

    Khalid

  4. #4
    Join Date
    Feb 2003
    Location
    Britain
    Posts
    1,335
    There is a solution that will insert the http:// is they forget, or leave the URL alone if they dont, already posted @ http://forums.webdeveloper.com/showt...&threadid=3839

  5. #5
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Originally posted by cijori
    There is a solution that will insert the http:// is they forget, or leave the URL alone if they dont, already posted @ http://forums.webdeveloper.com/showt...&threadid=3839
    Except that you might want to let people input the FTP or some other protocol. In either case, this mehtod is a bit cleaner than the one you have suggested.

    <input type="text" onchange="if(!/^\w+:/.test(this.value)) this.value='http://' + this.value">
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  6. #6
    Join Date
    Feb 2003
    Posts
    70
    Thanks Charles for the replies. :-)
    I played around with the code you gave but have come to the conclusion that what I'd like the form to have is the "http://" be the default value. That way, people will see that the "http://" biz comes first and if they add to it, then their link will be in formatted right for the database. However, this means that if they choose not to put something in the URL field, that the default "http://" needs to be stripped. My thoughts are that perhaps this is better handled in the Perl script that processes the form:

    if ( $FORM{'url'} ){
    print MAIL "$FORM{'url'} ";
    }


    Any ideas how to do that?

    Thanks again Charles,

    -Bob

  7. #7
    Join Date
    Feb 2003
    Posts
    28

    Try This...

    Go to your form area and replace your line with this one, you already did it with the USA line so "you can do it"...

    <INPUT TYPE=text NAME=url VALUE="http://" SIZE=40>

    Now what charles was telling you is how to use jscript to verify the info was in proper form after being submitted, try the above and if you still have trouble with your surfers entering the wrong info on that form, then add a jscript function...

    Hope that helps...
    Dick Withem

  8. #8
    Join Date
    Feb 2003
    Posts
    70
    Hi Dick,
    Thanks - but what happens if somebody doesn't provide a URL? Won't the form submit "http://" ? Need to have the code strip the "http://" if the user chooses not to submit a URL.

    Thanks,

    -Bob

  9. #9
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    If the user doesn't input a URL then the field will not change and the "onchange" handler will not be called. Just check for a null value "onsubmit".

    You are right, however, to have some redundant form verification server side. JavaScript fails a minimum of 10% of the time and the script that I posted above will fail more like 12% of the time. I'd need to know more about what your form is doing to give you the Perl version. Please post, over at the CGI forum, a url and a description of what you are trying to accomplish.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  10. #10
    Join Date
    Feb 2003
    Posts
    70
    Hi Charles,
    Thanks for the info. I did post to the CGI page earlier today ( http://forums.webdeveloper.com/showt...&threadid=4408 ).

    1.) if the value for the URL field = "http://" then strip it
    2.) if the value for the URL field = "http://" + text, allow.

    Don't know how that translates in Perl, but that's what I'm looking for.

    Thanks again Charles,

    -Bob

  11. #11
    Join Date
    Feb 2003
    Posts
    70
    Hi Charles,
    Something like this (except that the syntax works!...) ?

    $FORM{'url'} = substr($FORM{'url'}, http:// + text ) unless (length($FORM{'url'}) = http://);


    Thanks,

    -Bob

  12. #12
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    use CGI qw(param);
    my $url = param('url');
    $url =~ s|^http://$||;


    But if that's not enough then "[p]lease post, over at the CGI forum, a url and a description of what you are trying to accomplish."
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  13. #13
    Join Date
    Feb 2003
    Posts
    70
    Hi Charles,
    Thanks for the help. Unfortuantely, the script fails when I put in your fix - I tried placing it both before and after the "use DBI;" directive. Not sure how to install it, I guess.
    Anyhow, I've made a new addpage form with the default URL value equal to "http://" ( see http://www.usedflutes.com/addpage_URL.html )

    Also, I did post to the CGI board yesterday at http://forums.webdeveloper.com/showt...&threadid=4408

    Thanks again Charles,

    -Bob

  14. #14
    Join Date
    Feb 2003
    Posts
    70
    Hi Charles,
    I have posted a new thread on the CGI board http://forums.webdeveloper.com/showt...&threadid=4453

    Thanks,

    -Bob

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles