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 : http://stackoverflow.com/questions/2256930/how-to-check-the-valid-youtube-url-using-jquery — Amirouche Douda, Sep 16 '12 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](http://fiddle.jshell.net/codyatfiny/Qa2ep/) — temporalslide, Sep 16 '12 at 13:59

score 11 · Accepted Answer · edited May 23 '17 at 11:51

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 '17 at 11:51

Community

1
1

answered Sep 16 '12 at 13:13

yckart

32,460
9
122
129

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 Sep 16 '12 at 13:50
Made some adjustments and finaly got it working thanks to your awnser! – r2get Sep 16 '12 at 14:26
1

@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 Feb 08 '13 at 10:49
@yckart Seems like my edit wasn't approved (yet).. Maybe you can!? – eyecatchUp Feb 08 '13 at 12:52

score 1 · Answer 2 · edited Oct 16 '14 at 13:29

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",
            }
        }
    });
});

validate youtube URL using jquery javascript

2 Answers2