JQuery form validations plugin regex (pattern method) problems

Question

this is my first post ever on stack overflow!

I've been trying to use the jquery validator plugin to validate my register form on php without submitting it (i already have server-side validations). Well, i don't know much about js (for now) but i'm trying to use jquery validation from this plugin https://jqueryvalidation.org/

I'm also using the additional-methods.js (pattern included) which gives you more validation methods.

Let me explain my situation... I'm using regex on php to validate my html forms and it works like a charm. When i tried to use the same regex for jquery it'd throw and error (i already have some basic code js and it works).

I tried a lot of regex formats and nothing works, i don't know what i'm doing wrong. I also tried to escape the code and it doesn't throw errors but it still doesn't work.

I'm getting "invalid format" all the time and i can't seem to understand why is it not working. All the regex formats i've found on the internet don't work, it's crazy, maybe you can help me.

This is the pattern i'm actually using to validate the nombre (name) input in php: /^\pL+(?>[ ']\pL+)*$/u

*Also I've copied the patterns method inside my local js and removed the additional-methods cdn from my .php but it's the same.

** Ignore the [A-Z] thingy, i've been trying a lot of things, none of them work :(

Here my local.js

$.validator.setDefaults({
    errorClass: 'text-danger position-absolute ml-1',
    highlight: function
 (element) {
        $(element)
            .closest('.form-control')
            .addClass('is-invalid');
    },
    unhighlight: function (element) {
        $(element)
            .closest('.form-control')
            .removeClass('is-invalid');
    },
    errorPlacement: function (error, element) {
        if (element.prop('type') === 'checkbox') {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

$.validator.addMethod("pattern", function (value, element, param) {
    if (this.optional(element)) {
        return true;
    }
    if (typeof param === "string") {
        param = new RegExp("^(?:" + param + ")$");
    }
    return param.test(value);
}, "Invalid format.");

$("#reg_form").validate({
    debug: true,
    rules: {
        nombre: {
            required: true,
            pattern: [A-Z]
        },
        apellido: {
            required: true,
            lettersonly: true
        },
        email: {
            required: true,
            email: true,
        },
        password: {
            required: true,
            strongPassword: true
        },
        cpassword: {
            required: true,
            equalTo: '#password'
        }
    },
    messages: {
        nombre: {
            required: 'Requerido',
            pattern: 'Formato inválido',
            max: 'Muy largo'
        },
        apellido: {
            required: 'Requerido',
            pattern: 'Formato inválido',
            max: 'Muy largo'
        },
        email: {
            required: 'Please enter an email address.',
            email: 'Por favor ingresa un email <em>válido</em>.',
        },
        password: {
            required: true
        }
    }
});

Your regex is perfectly fine. (You can test it on https://regex101.com/ ,they have a section for PHP/PCRE). — Karan Shishoo, Dec 02 '19 at 08:56

score 0 · Answer 1 · answered Dec 02 '19 at 09:10

0

You may have a minor oversight, change your pattern implementation to -

nombre: {
            required: true,
            pattern: "^[A-z\s]+$"
        },

your pattern needs to be a string for it to be implemented. Secondly while \pL does work well to get any letter form any language, but not all programming languages have it implemented. (look here for what you can do in java script) You are better off just adding in the few extra letters you expect to encounter in the regex.

answered Dec 02 '19 at 09:10

Karan Shishoo

2,402
2
17
32

Thank you, but i quickly figured out that php and js regex patterns are not the same thing. Now i'm using equal but different regex patters for each language. Regards. – Joaquin Perez Dec 04 '19 at 17:37

JQuery form validations plugin regex (pattern method) problems

1 Answers1