Custom social media validations with validator jquery

custom social media validations with validator jquery

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>

 

Hi, I'm Saurav, the developer behind usingphp. Donate to help me keep usingphp free and maintained.

Please let me know what your thoughts or comments are on this article. If you have any suggestion or found any mistake in this article then please let us know.

Latest Comments

Add your comment