How can I restrict my url only accept linked-n link as an input

Question

I make a user profile where user only can add LinkedIn URL

I tried

pattern="^http(s)?:\/\/(www)?\.linkedin\.com\/in\/.*$";

regular expression in html but it restrict any thing. I also added in js that user-linkedin only except linked-in link. but if I put abc_name it will show

https://www.linkedin.com/in/abcname

but if I put https://www.google.com then it exact show the url.

html:

<input type="text" class="user-linkedin" id="user-linkedin" placeholder="LinkedIn Profile ID">

js:

userDetails.linkedin = 'http://www.linkedin.com/in/' + userDetails.linkedin.replace('http://www.linkedin.com/in/', '').replace('https://www.linkedin.com/in/','');

$(subpage.selector + ' .user-linkedin').val(userDetails.linkedin);
$(subpage.selector + ' .linkedin-link').attr('href',userDetails.linkedin);

Answer 1

If I understood your requirements correctly and you need a regex to match only linked in profile link, the following one should meet your demand:

^http(s)?:\/\/(www\.)?linkedin\.com\/in\/.*$

 <form> <input pattern="^http(s)?:\\/\\/(www\\.)?linkedin\\.com\\/in\\/.*$" /> <button>Submit</button> </form> 

---

If you need to check that the input is a valid link and insert it somewhere in DOM using Jquery, you can do that as follows:

 $(".user-linkedin").on('input', function(event) { var validLink = /^http(s)?:\\/\\/(www\\.)?linkedin\\.com\\/in\\/.*$/.test(event.target.value) ? event.target.value : ''; $(".linkedin-link") .text(validLink || 'invalid link') .attr("href", validLink); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="user-linkedin" /> <br> Link: <a href="" class="linkedin-link"></a>