Custom social media validations with validator jQuery

• 22 Mar 2020
• |
0 comments

In this blog I'm going to create custom validation for social media URLs. Fo this I'm going to use jQuery Validation Plugin. I will create validation for Facebook page, Twitter page, YouTube page and Instagram page. For this we have to make custom rules using addMethod in jQuery validator.

In below example I've added custom validate rule for social medias link.

HTML

<form class="formcustom" id="formcustom" method="get" action=""> 
<fieldset>
<legend>My form</legend>
<p>
<label for="facebook">facebook</label>
<input id="facebook" name="facebook" type="text">
</p>
<p>
<label for="twitter">twitter</label>
<input id="twitter" name="twitter" type="text">
</p>
<p>
<label for="youtube">youtube</label>
<input id="youtube" name="youtube" type="text">
</p>
<p>
<label for="instagram">instagram</label>
<input id="instagram" name="instagram" type="text">
</p>
<input class="submit" type="submit" value="Submit">
</form>

jQuery

<script>

	$().ready(function() {
	jQuery.validator.addMethod("facebookUrl", function(val, elem) {
        var p= '(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?';
        if(val.match(p)){
            return true;
        }
    },"incorrect link."
    );
	jQuery.validator.addMethod("twitterUrl", function(val, elem) {
        var p= '(?:(?:http|https):\/\/)?(?:www.)?twitter.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?';
        if(val.match(p)){
            return true;
        }
    },"incorrect link."
    );

    jQuery.validator.addMethod("instagramUrl", function(val, elem) {
        var p='(?:(?:http|https):\/\/)?(?:www.)?instagram.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?';
        if(val.match(p)){
            return true;
        }
    },"incorrect link."
    );

    jQuery.validator.addMethod("youtubeUrl", function(val, elem) {
        var p= '^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+';
        if(val.match(p)){
            return true;
        }
    },"incorrect link."
    );
	
		$("#formcustom").validate({
			rules: {
				youtube: {
					required: true,
					youtubeUrl: true
				},
				twitter: {
					required: true,
					twitterUrl: true
				},
				facebook: {
					required: true,
					facebookUrl: true
				},
				instagram: {
					required: true,
					instagramUrl: true
				},
			},
			messages: {
				facebook: {
					required: "This field is required",
				},
				instagram: {
					required: "This field is required",
				},
				twitter: {
					required: "This field is required",
				},
				youtube: {
					required: "This field is required",
				},
			}
		});

	});
</script>

<form class="formcustom" id="formcustom" method="get" action=""> 
<fieldset>
<legend>My form</legend>
<p>
<label for="facebook">facebook</label>
<input id="facebook" name="facebook" type="text">
</p>
<p>
<label for="twitter">twitter</label>
<input id="twitter" name="twitter" type="text">
</p>
<p>
<label for="youtube">youtube</label>
<input id="youtube" name="youtube" type="text">
</p>
<p>
<label for="instagram">instagram</label>
<input id="instagram" name="instagram" type="text">
</p>
<input class="submit" type="submit" value="Submit">
</form>

<script>

	$().ready(function() {
	jQuery.validator.addMethod("facebookUrl", function(val, elem) {
        var p= '(?:(?:http|https):\/\/)?(?:www.)?facebook.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?';
        if(val.match(p)){
            return true;
        }
    },"incorrect link."
    );
	jQuery.validator.addMethod("twitterUrl", function(val, elem) {
        var p= '(?:(?:http|https):\/\/)?(?:www.)?twitter.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?';
        if(val.match(p)){
            return true;
        }
    },"incorrect link."
    );

    jQuery.validator.addMethod("instagramUrl", function(val, elem) {
        var p='(?:(?:http|https):\/\/)?(?:www.)?instagram.com\/(?:(?:\w)*#!\/)?(?:pages\/)?(?:[?\w\-]*\/)?(?:profile.php\?id=(?=\d.*))?([\w\-]*)?';
        if(val.match(p)){
            return true;
        }
    },"incorrect link."
    );

    jQuery.validator.addMethod("youtubeUrl", function(val, elem) {
        var p= '^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+';
        if(val.match(p)){
            return true;
        }
    },"incorrect link."
    );
	
		$("#formcustom").validate({
			rules: {
				youtube: {
					required: true,
					youtubeUrl: true
				},
				twitter: {
					required: true,
					twitterUrl: true
				},
				facebook: {
					required: true,
					facebookUrl: true
				},
				instagram: {
					required: true,
					instagramUrl: true
				},
			},
			messages: {
				facebook: {
					required: "This field is required",
				},
				instagram: {
					required: "This field is required",
				},
				twitter: {
					required: "This field is required",
				},
				youtube: {
					required: "This field is required",
				},
			}
		});

	});
</script>