How to check the url is given empty string

Question

Hi there is there possible to validate the input tag with url type?

I currently have an input tag with URL type for user to key in the url, it is okay if the user key in value that is not a url.

But when user key in "http://www.", my input field accept it and posted the form to the server which is not a proper value. How to check the empty value in the input field to validate empty url?

Here are few scenario my form accepted the url link with empty url:

http://www.
www.
http://

Is there any way to validate and stop the form to submit when there are empty value in the url link with javascript or php? thanks

My FORM's CODE:

<form class="form" id="form" action="" method="POST" enctype="multipart/form-data">
                                    <div class="box-body">
                                        <input type="hidden" name="banner_id" value="1"></input>
                                        <div class="form-group" >
                                            <label for="bannerName">Banner Name 旗帜名称</label>
                                            <input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
                                        </div>
                                        <div class="form-group" >
                                            <label for="bannerUrl">Banner URL </label>
                                            <input type="url" autocomplete="on" class="form-control" name="bannerUrl" id="bannerUrl" placeholder="Please Enter Url" onChange="checkDisabled(testing);" required>
                                        </div>
                                         <div class="form-group">
                                            <label for="exampleInputFile">File input</label>
                                            <input type="file" id="uploaded_file" name="uploaded_file"  onChange="checkDisabled(testing);"><br>
                                            <p class="help-block">Your picture size not more than 2MB.  (Only JPEG or JPG is allowed)</p>
                                        </div>  

                                        <div class="checkbox">
                                            <button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>      
                                        </div>
                                    </div><!-- /.box-body -->


                                </form>                  <!-- Date range -->

Follow the approach: http://stackoverflow.com/questions/161738/what-is-the-best-regular-expression-to-check-if-a-string-is-a-valid-url — Ashwani Goyal, Apr 15 '15 at 05:49
If i understood ur question correctly, are you asking for this ? `` — phpfresher, Apr 15 '15 at 06:06
@phpfresher Yes, i'm using , but what i wanted to counter is when user enter empty url link like "http://www." , my form should not submit the form. Get it? — Marcus Tan, Apr 15 '15 at 06:10
ok i got it... Why don't you just check for NULL, `if(document.getElementById('field_id').value=="") { alert("Please Enter URL"); }` — phpfresher, Apr 15 '15 at 06:15
@phpfresher your way won't work, it wont check the url value is null or not. Because when i trying to type "http://www." it still can accept my field value — Marcus Tan, Apr 15 '15 at 06:23

Narendrasingh Sisodia · Accepted Answer · 2015-04-15T09:39:56.477

If I'm not wrong to understand your question then this will work for you.

Form page

<div class="form-group" >
   <label for="bannerUrl">Banner URL </label>
   <input type="url" autocomplete="on" class="form-control" name="bannerUrl" id="bannerUrl" placeholder="Please Enter Url" onChange="checkDisabled(testing);" required>
   <span class="error_label"></span>
</div>

jQuery Way

$('#form').validate({
    rules : {
        bannerUrl : {
            required : true,
            url : true
        }
    },
    messages : {
        bannerUrl : {
            required : "This field is required",
            url : "Please enter valid URL"
        }
    },
    submitHandler: function(form) {  
        if ($(form).valid()) 
            form.submit(); 
            return false; // prevent normal form posting
    },
    errorPlacement: function(error, element) {      
        $(element).closest('span').find('.error_label').html(error);
    }
})

Regex Way

$('#bannerUrl').on('keyup', function (e) {
    var checkUrl = checkWebUrl($(this).val());
    console.log(checkUrl);
    if (!checkUrl) {
        // your error message
        alert('Please enter valid url');
        return false;
    } else {
        // your message
        alert('Valid url')
    }
});

function checkWebUrl(url)
{
    //regular expression for URL
    //console.log(learnRegExp('http://www.google-com.123.com')); // true
    //console.log(learnRegExp('http://www.google-com.123')); // false
    //console.log(learnRegExp('https://www.google-com.com')); // true
    //console.log(learnRegExp('http://google-com.com')); // true
    //console.log(learnRegExp('http://google.com')); //true
    //console.log(learnRegExp('google.com')); //false
    //console.log(learnRegExp('www.google')); //false
    //console.log(learnRegExp('http://www.google')); //false
    var urlregex = new RegExp(
        "^(http:\/\/www.|https:\/\/www.|ftp:\/\/www.|www.){1}([0-9A-Za-z]+\.)");
    return urlregex.test(checkWebUrl.arguments[0]);
}

@MarcusTan I have updated code with regex and simple jquery function to check you can use any of these ways — Narendrasingh Sisodia, Apr 15 '15 at 06:37
How to change after i click submit only check for the url link? Because now everytime i enter one character it check once... — Marcus Tan, Apr 15 '15 at 06:46
Its because code is for `on keyup` function you can check that using server side validation — Narendrasingh Sisodia, Apr 15 '15 at 06:48
I currently have a jquery submit function, when your code return false, it still call my submit button. Is there anyway to avoid that? — Marcus Tan, Apr 15 '15 at 06:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/75253/discussion-between-narendra-sisodia-and-marcus-tan). — Narendrasingh Sisodia, Apr 15 '15 at 07:01

score 1 · Answer 2 · answered Apr 15 '15 at 06:43

You can use the jQuery Form Validation. (You can import jQuery Validation in your application and use it for all your form fields).

$('#form').validate({
rules : {
    'bannerUrl' : {
        required : true,
        url : true
    }
},
messages : {
    'bannerUrl' : {
        required : "This field is required",
        url : "Please enter valid URL"
    }
},

})

score 0 · Answer 3 · answered Apr 15 '15 at 05:48

You can use following regex to validate URL.

_^(?:(?:https?|ftp)://)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)(?:\.(?:[a-z\x{00a1}-\x{ffff}0-9]+-?)*[a-z\x{00a1}-\x{ffff}0-9]+)*(?:\.(?:[a-z\x{00a1}-\x{ffff}]{2,})))(?::\d{2,5})?(?:/[^\s]*)?$_iuS

If the url matches with the above regex then with high probability the given url is valid syntactically. If you don't want such a lengthy and full proof way then you can choose one of the regex from URL Valid Regex.

If you want to modify the regex based on your requirement, please test regex and then proceed.

score 0 · Answer 4 · answered Apr 15 '15 at 05:51

0

var urlexp = new RegExp('(http|ftp|https)://[a-z0-9\-_]+(\.[a-z0-9\-_]+)+([a-z0-9\-\.,@\?^=%&;:/~\+#]*[a-z0-9\-@\?^=%&;/~\+#])?', 'i');

Use this regex in javascript, if valid pass the value back to php else post an alert saying error.

answered Apr 15 '15 at 05:51

Niranj Rajasekaran

586
5
17

score 0 · Answer 5 · answered Apr 15 '15 at 05:54

Pass the input field value to this function on a if condition it will return true or false

    <script>
    function isValidUrl(url) {
         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?     (\/|\/([\w#!:.?+=&%@!\-\/]))?/
         return regexp.test(url);
     }

      isValidUrl(yourURL);
     </script>

How to check the url is given empty string

5 Answers5