Validation by JavaScript

Question

I have a text box , Which i am using for Entering a URL . I would like that when i click on the submit button , the Text box is Validated .

I want that the Value entered in the text box be a valid URL which includes the http://www. part

I basically want that its a valid URL. The Code of the Form is

<form  action="next.php" method="get">
    <input  id="home_page_input" type="text" name="page" value="http://"onfocus="this.value = ( this.value == this.defaultValue ) ? '' : this.value;return true;">
    <input id="url_input_button" type="submit" value="enter it !" />
  </form>

Actully , this form is being send to a php file that is Using Curl /file_get_contents. so i just want it in a format that curl doesnt show up any error's

do you use a library as jquery ?

alexl
– alexl

2011-02-21 14:59:48 +00:00
Commented Feb 21, 2011 at 14:59 — alexl
– alexl, Commented Feb 21, 2011 at 14:59

David Gillen · Accepted Answer · 2011-02-21 15:01:50Z

1

jQuery validation plugin supports URL validation. See the example at http://docs.jquery.com/Plugins/validation

answered Feb 21, 2011 at 15:01

David Gillen

1,1725 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom Gullen · Accepted Answer · 2011-02-21 14:59:23Z

1

Via Regexp

URL's are quite complicated rules. Here's one from the regexp library anyway:

^http\://[a-zA-Z0-9-.]+.[a-zA-Z]{2,3}(/\S*)?$

Via Ajax

Another way would be to use AJAX (via Jquery) that sends a request to the entered URL and returns if it's a 404 or not. The biggest flaw in this though is if the server goes down for an hour or so.

To consider

Does it matter? A lot of these validations actually cause more problems than enhancements. Take for example, email validation.

answered Feb 21, 2011 at 14:59

Tom Gullen

61.9k89 gold badges294 silver badges472 bronze badges

3 Comments

Trinidad Over a year ago

he wants it to include www.

Tom Gullen Over a year ago

@Trinidad, this is the problem you see, there are many valid URL's out there without www. There is a ton of ambiguity around this. Because of this, I would suggest not validating at all, but if it's necessary, an AJAX request would probably be safest.

Yahoo Over a year ago

Actully , this form is being send to a php file that is Using Curl . so i just want it in a format that curl doesnt show up any error's

Community · Accepted Answer · 2017-05-23 10:33:08Z

1

What you need to do is assign an event handler to the submit event of the form and do your checks there.

<form onsubmit="return checkForm();" action="next.php" method="get">
    <input  id="home_page_input" type="text" name="page" value="http://" >
    <input id="url_input_button" type="submit" value="enter it !" />
</form>

And in Javscript somewhere:

// onSubmit - if it returns false, it won't submit, and vice versa
function checkForm () {

    var url_input_button = document.getElementById('url_input_button');
    var ok = /^[a-z]+:\/\//i.test(url_input_button.value);
    if (!ok) {
        alert('url is not correctly formed');
        return false;
    }

    // url is fine, continue
    return true;

}

If you're unsure where to place the javascript code, you can also place it alongside the HTML, like this:

<script type="text/javascript">
// onSubmit - if it returns false, it won't submit, and vice versa
function checkForm () {

    var url_input_button = document.getElementById('url_input_button');
    var ok = /^[a-z]+:\/\//i.test(url_input_button.value);
    if (!ok) {
        alert('url is not correctly formed');
        return false;
    }

    // url is fine, continue
    return true;

}
</script>

<form onsubmit="return checkForm();" action="next.php" method="get">
    <input  id="home_page_input" type="text" name="page" value="http://" >
    <input id="url_input_button" type="submit" value="enter it !" />
</form>

edit: I've been doing jquery for so long, that my vanilla javascript skills have degraded. Don't know how to assign the event without resorting to inline javascript.. I've edited the example

Somewhat related question on Stack Overflow: how can i validate a url in javascript using regular expression

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Feb 21, 2011 at 15:05

arnorhs

10.4k2 gold badges37 silver badges38 bronze badges

2 Comments

Yahoo Over a year ago

This form is being send to a php file that is Using Curl . so i just want it in a format that curl doesnt show up any error's. I am free to use Jquery as well

arnorhs Over a year ago

Yes, the main gist of the validation is the javascript regular expression that validates the URL: var ok = /^[a-z]+:\/\//i.test(url_input_button.value); It's always a good idea to validate on the server side as well.

Collectives™ on Stack Overflow

Validation by JavaScript

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related