CODEWITHSUNDEEP
jqueryvalidationhttpurlinput
Lord Rixuel
Lord Rixuel

Reputation: 1233

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

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.

Valid: http://www.foo.com

Valid: https://www.foo.com

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"

Upvotes: 0

Views: 5079

Answers (3)

Sam
Sam

Reputation: 31

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;
      }
    }
  }
} );

Upvotes: 0

RaymondM
RaymondM

Reputation: 328

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;
            }
        }

Upvotes: 1

J.Doh
J.Doh

Reputation: 135

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?

Upvotes: 5

Related Questions