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, Mar 17 '17 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, Mar 17 '17 at 13:23

score 0 · Answer 1 · edited May 23 '17 at 12:17

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 — Abdul Rafay, Mar 17 '17 at 14:23

jQuery Validation Normalizer on array of input

1 Answers1