jQuery Validation Normalizer on array of input

Question

i am having issue in jquery validation Normalizer on array of input

problem is validation is not working well it should validate below patterns

i.e. (example.com) or (http://example.com) or (http://www.example.com)

here's the code

Html

<form name="xyz">
 ...
   <input type="url" name="url[]">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
 ...
</form>

Javascript

$('form').validate({
    rules: {
        'url[]': {
            url: true,
            normalizer: function( el) {
                var url = el.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://" ) {
                // then prefix with http://
                url = "http://" + url;
                }

                // Return the new url
                return url;
            }
        }
    }
 });

As a side-note, I'd suggest using toLowerCase() before comparing the substrings. Https:// is not the same as https://, so you could end up with links like http://Https://google.com. — Tyler Roper
– Tyler Roper, Commented Mar 17, 2017 at 13:21
@Santi it's not the issue either i do lower case or upper case can you please read the question what the issue i got — Abdul Rafay
– Abdul Rafay, Commented Mar 17, 2017 at 13:23

Community · Accepted Answer · 2017-05-23 12:17:18Z

Have a look at this document.

validate function set the value of input element as parameter, so you don't have to access it in funcion body.

var url = el.value;

become

var url = el;

[update]

I tried to run the snippet question provided, it acted like it just validate one field, and ignore else fields.

$('form').validate({
    rules: {
        'url[]': {
            url: true,
            normalizer: function( el) {
                var url = el;

                // Check if it doesn't start with http:// or https:// or ftp://
                if ( url && url.substr( 0, 7 ) !== "http://"
                        && url.substr( 0, 8 ) !== "https://" ) {
                // then prefix with http://
                url = "http://" + url;
                }

                // Return the new url
                return url;
            }
        }
    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form name="xyz">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
   <input type="url" name="url[]">
</form>

This issue says

the name attribute to be unique for each field or group of fields (for radio/checkbox).

And then I see this post, people provide two method to deal with this:

modify the source code of jquery.validate.js
use ignore: []

So I tried the second one, it do validate all inputs, but the problem is that the warning message would appear after first edited input.

except for modify jquery.validate.js, maybe you can change the name of url[] to url[1],url[2],url[3]... , and add rules to every url-input class, like this:

$('form').validate();
 
 $(".url-input").each(function(){
     $(this).rules( "add",{
            url: true,
            normalizer: function( el) {
                var url = el;

                // Check if it doesn't start with http:// or https:// or ftp://
                if ( url && url.substr( 0, 7 ) !== "http://"
                        && url.substr( 0, 8 ) !== "https://" ) {
                // then prefix with http://
                url = "http://" + url;
                }

                // Return the new url
                return url;
            }
         });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form name="xyz">
   <input type="url" name="url[0]" class="url-input" >
   <input type="url" name="url[1]" class="url-input">
   <input type="url" name="url[2]" class="url-input">
   <input type="url" name="url[3]" class="url-input">
</form>

i have tried that already no luck, and the way in example defining is it returns value but for me it's returning whole element instead

Collectives™ on Stack Overflow

jQuery Validation Normalizer on array of input

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related