How to use jQuery validation for the input type url without the protocol?

Question

In my input field validation, I set the input type as "url".

URL that have the protocol "http://" or "https://" is valid. Without it, the url is invalid.

Invalid: www.foo.com

Invalid: foo.com

In my code, everytime an URL link has no "http://" or "https://", a function, "checkURL()", is going to add it like the following code below.

// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

function checkURL(url) {
    var string = url.value;
    
    if (!~string.indexOf("http")) {
        string = "http://" + string;
    }
    
    url.value = string;
    return url;
}

<form id="myform">
	<label for="field">Required, URL: </label><br>
	<input type="url" id="field" name="field" onblur="checkURL(this)">
</form>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

On the snippet, I enter "www.yahoo.com".

The moment I click outside of the field, the function checkURL adds "http://" to my input, so I get "http://www.yahoo.com".

The problem is after it adds "http://", jQuery validation still thinks the URL is invalid.

I have to click on the input field and then click outside of it again to make it knows it's valid.

Is there a way to make the validation valid after we enter an url without the protocol (ie: www.yahoo.com)?

EDIT: I forgot to put in my code type="url" for the input field.

It shouldn't be change to type="text"

Possible duplicate of How to extend jquery.validate URL validation? — Dekel
– Dekel, Commented Nov 3, 2016 at 1:27
@Dekel I forgot to add type="url" for the input tag. The link you gave me only work when type is set as "text", but when it's set as "url", the code can't update the field and still see www.site.com or site.com as an error. — Lord Rixuel
– Lord Rixuel, Commented Nov 3, 2016 at 16:44

Community · Accepted Answer · 2017-05-23 12:25:02Z

Try using onchange instead of onblur

// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

function checkURL(url) {
    var string = url.value;
    
    if (!~string.indexOf("http")) {
        string = "http://" + string;
    }
    
    url.value = string;
    return url;
}

<form id="myform">
	<label for="field">Required, URL: </label><br>
	<input type="url" id="field" name="field" onchange="checkURL(this)">
</form>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

What is the difference between onBlur and onChange attribute in HTML?

RaymondM · Accepted Answer · 2017-02-16 08:46:19Z

1

I think it is much more correct to use jquery.validation own way.

Ref link: https://jqueryvalidation.org/normalizer/

rules: {
        website: {
            url: true,
            normalizer: function (value){
                value = value.replace(/^https?:\/\//, '');
                return 'http://' + value;
            }
        }

answered Feb 16, 2017 at 8:46

RaymondM

3281 silver badge10 bronze badges

Comments

Sam · Accepted Answer · 2022-10-08 12:59:04Z

0

Please check this one:

$( "#myform" ).validate( {
  rules: {
    url_input: {
      required: true,
      url: true,
      normalizer: function( value ) {
        var url = value;
 
        // Check if it doesn't start with http:// or https:// or ftp://
        if ( url && url.substr( 0, 7 ) !== "http://"
            && url.substr( 0, 8 ) !== "https://"
            && url.substr( 0, 6 ) !== "ftp://" ) {
          // then prefix with http://
          url = "http://" + url;
        }
 
        // Return the new url
        return url;
      }
    }
  }
} );

answered Oct 8, 2022 at 12:59

Sam

312 bronze badges

Collectives™ on Stack Overflow

How to use jQuery validation for the input type url without the protocol?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related