Remove URL Input field Validations but accept only URL without https

Question

I want to accept a URL in my input field. But i don't care about https:// or https://. I just want to remove this validation. But it should only accept a URL.

Example like this www.example.com or example.com should be acceptable.

<form action="" method="POST" class="form-box d-flex justify-content-between" enctype="multipart/form-data">                            
    <input type="url" class="form-control" name="url">
    <button type="submit" class="btn search-btn">Find</button>
</form>

Use the html input pattern attribute, and match .. That should be all required for a web address. And no special chars. See: w3schools.com/tags/att_input_pattern.asp — gilbert-v
– gilbert-v, Commented Mar 2, 2019 at 18:04

Cipher · Accepted Answer · 2019-03-02 18:23:32Z

2

Here i made the answer for my question. I am using Regular Expression for validation.

<input                      
pattern="^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$" 
placeholder="Find your website ranking... Eg - site.com" class="form-control" name="url"
oninvalid="setCustomValidity('Please Enter URL.')"
onchange="try{setCustomValidity('')}catch(e){}"
>

URL Cheker Regex - ^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$

I am using bellow javascript to change the message of validation -

oninvalid="setCustomValidity('Please Enter URL.')"
onchange="try{setCustomValidity('')}catch(e){}"

answered Mar 2, 2019 at 18:23

Cipher

2,1304 gold badges38 silver badges62 bronze badges

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

1 Comment

RwwL Over a year ago

Possibly worth noting for future folks that this solution requires removing the type="url" attribute because browsers automatically apply a check for a protocol (http(s)) in addition to whatever pattern you set on that input type: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… As a result, you won't get whatever custom keyboard a given mobile device would supply for the url input type.

Collectives™ on Stack Overflow

Remove URL Input field Validations but accept only URL without https

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related