CODEWITHSUNDEEP
javascriptvalidation
Yahoo
Yahoo

Reputation: 4187

Validation by JavaScript

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

Upvotes: 0

Views: 339

Answers (3)

arnorhs
arnorhs

Reputation: 10429

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

Upvotes: 1

David Gillen
David Gillen

Reputation: 1172

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

Upvotes: 1

Tom Gullen
Tom Gullen

Reputation: 61773

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.

Upvotes: 1

Related Questions