validate youtube URL using jquery javascript

Question

I want users to submit youtube URLs. I want to check "on the fly" if a youtube link is correct and change the text next to the input to OK if the check succeeds.

I managed to make a validation function but it doesn't work. What am I doing wrong?

UPDATE

It still doesnt work, it should say not ok when the URL is incorrect and OK when URL is correct while typing:

            $('form #youtube').bind("change keyup input", validYT());
        function validYT()
        {

            var url = $('form #youtube').val();
            var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
            if (url.match(p)) {
                $('#ytInfo').removeClass().addClass('fieldok ').text('OK');
                return true
            }
            else
            {
                $('#ytInfo').removeClass().addClass('fieldok ').text('NOT OK');
                return false
            }
        }

HTML:

youtubelink<BR>
<input type="text" name="youtube" id ="youtube" value="" /><div id="ytlInfo">dd</div>

Possibility duplicate : stackoverflow.com/questions/2256930/… — Amirouche Douda
– Amirouche Douda, Commented Sep 16, 2012 at 13:10
Your edited code has an error in it, the HTML says the status div has an id of ytlInfo, but in your code you're calling $('#ytInfo'), which is why nothing is happening. See this fiddle of your code — temporalslide
– temporalslide, Commented Sep 16, 2012 at 13:59

Community · Accepted Answer · 2017-05-23 11:51:29Z

11

function validYT(url) {
  var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
   return (url.match(p)) ? RegExp.$1 : false;
}

Thanks @eyecatchUp https://stackoverflow.com/a/10315969/1250044

Update

function ytVidId(url) {
    var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
    return (url.match(p)) ? RegExp.$1 : false;
}

$('#youtube').bind("change keyup input", function() {
    var url = $(this).val();
    if (ytVidId(url) !== false) {
        $('#ytlInfo').addClass('fieldok');
    } else {
        $('#ytlInfo').removeClass('fieldok');
    }
});

Demo

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Sep 16, 2012 at 13:13

yckart

33.6k11 gold badges126 silver badges133 bronze badges

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

4 Comments

r2get Over a year ago

I see.. but how to attach it like i do to a input. and give message OK or NOT ok on key event. Basicly i want a input field witch tels you realtime if your link is ok...

r2get Over a year ago

Made some adjustments and finaly got it working thanks to your awnser!

eyecatchUp Over a year ago

@yckart Hey, since your answer was a direct quote of mine (thanks for the mention), I updated the pattern in your answer to match the update to my cited answer. Hope that's fine for you?! :) Cheers

eyecatchUp Over a year ago

@yckart Seems like my edit wasn't approved (yet).. Maybe you can!?

coDe murDerer · Accepted Answer · 2014-10-16 13:29:57Z

1

I have created an Method by using the Above method

$(document).ready(function(){

    $.validator.addMethod("youtube", function(value, element) {
     var p = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/;
     return (value.match(p)) ? RegExp.$1 : false;
    }, "Enter correct URL");

    var validator = $("#frmAddvideo").validate({
        errorElement:'div',
        rules: {
            useravideo: {
                required: true,
                youtube: "#useravideo"
            }

        },
        messages: {
            useravideo: {
                required: "Enter user A video URL",
            }
        }
    });
});

edited Oct 16, 2014 at 13:29

coDe murDerer

1,8744 gold badges21 silver badges28 bronze badges

answered Feb 4, 2013 at 6:50

user1948368

1653 silver badges3 bronze badges

Collectives™ on Stack Overflow

validate youtube URL using jquery javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related