0

I am busy using a jquery script that validates users password in real time. I would like to adjust it only accept a password if it has a letter, number and special character in it.

  jQuery("#ValidEmail").validate({
                expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
                message: "Please enter a valid Email ID"
            });

   jQuery("#ValidPassword").validate({
                expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
                message: "Please enter a special character"
            });

I am stumped on how to do this as it does not accept normaly regex experesions that I can find off the web eg

(/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])([a-zA-Z0-9]{8,})$/)

Any idea on how to solve this. Im bashing my head in here

  • 2
    Possible duplicate of [Password REGEX with min 6 chars, at least one letter and one number and may contain special characters](https://stackoverflow.com/questions/7844359/password-regex-with-min-6-chars-at-least-one-letter-and-one-number-and-may-cont) – PM 77-1 Apr 10 '18 at 18:55
  • This is pretty bad from a UX standpoint – Luca Kiebel Apr 10 '18 at 18:56
  • 1
    Must read: [Reference - Password Validation](https://stackoverflow.com/questions/48345922/reference-password-validation/). What do you expect to validate if the client turns JavaScript off in their browser? – ctwheels Apr 10 '18 at 18:59
  • @Luca Real-time-validation probably not (with annoying messages popping here and there as-you-type) but 1. Validating using colors or a single icon is great. 2. Validating (with text notice) on timeout or blur is ok. 3. Real-time password-strength is also amazing. – Roko C. Buljan Apr 10 '18 at 19:01
  • Sure, what I meant was, that requiring passwords have special characters is horrible, not what you could possibly to with some regex to a password field – Luca Kiebel Apr 10 '18 at 19:03
  • Setting aside all the meta-argument about whether clientside password validation is a good idea... Is that the correct syntax for adding validation rules to jQuery.validate? I'm not too familiar with that plugin but I've more often seen it done with addMethod, [like this](https://stackoverflow.com/a/4062771/3412322). Including javascript expressions inside a string like you're doing doesn't seem right... – Daniel Beck Apr 10 '18 at 19:06
  • @DanielBeck why set that aside? If it's completely incorrect, can be invalidated and can potentially pose a security risk? – ctwheels Apr 10 '18 at 19:07
  • @ctwheels if a user turns javascript off, 99% of webpages wont be enable for him. I don't think we should bother – Below the Radar Apr 10 '18 at 19:07
  • 1
    @BelowtheRadar can you share the research you conducted to get that value? – ctwheels Apr 10 '18 at 19:08
  • @ctwheels no but I am sure you agree – Below the Radar Apr 10 '18 at 19:08
  • 1
    @ctwheels clientside validation is a common and totally reasonable thing to do. It should be a supplement to serverside validation, of course, not the whole thing; but that's at best tangentially related to this question. – Daniel Beck Apr 10 '18 at 19:09
  • @BelowtheRadar I agree that many webpages won't work, but I don't agree that doing password validation client-side is a good idea in the slightest. What's wrong with using something like AJAX to query server-side script and check validation on the server? – ctwheels Apr 10 '18 at 19:11
  • @ctwheels AJAX wont works if user turns javascript off :P but I agree with you – Below the Radar Apr 10 '18 at 19:13
  • @BelowtheRadar right, but that's only for password validation checks that occur before the form is sent to the server (if it's even needed). For example to perform checks before the user submits the form; this way the form still *works* even if JavaScript is disabled. You guys should give [Why isn't a client-side password complexity check considered secure?](https://security.stackexchange.com/questions/158239/) and [Should user's password strength be assessed at client or at server side?](https://security.stackexchange.com/questions/45594/) a read. – ctwheels Apr 10 '18 at 19:15
  • 1
    I don't think anyone is arguing that the complexity check should **only** be done client side. It definitely should not. It has to be on the server side. However, providing the user a quick heads up before they submit the form is hardly bad UX. Whither that is done through an ajax call or on page script is just an implementation detail. – Taplar Apr 10 '18 at 19:17
  • @BelowtheRadar fair, but let me ask you this: How would you check to ensure a password contains a lowercase letter (Unicode inclusive) client-side? For example, if a user creates the password `é123ABC!` (which is technically valid assuming the majority of *password rules* out there) – ctwheels Apr 10 '18 at 19:18
  • @ctwheels you will tell me – Below the Radar Apr 10 '18 at 19:25
  • 1
    @BelowtheRadar you can't client-side. Not effectively without declaring each Unicode character individually or using **many** ranges of characters to mimic `\p{Ll}` or `\p{Lu}`, but that is a lot of work and definitely convoluted: Not the way to do this. You'd spend hours if not days putting a regex together to match all those characters and it will become incomprehensible and unmanageable. The real (and only) way to do this effectively is to do it server side. Yes, it's not immediate, but that's a performance loss for security gain, which I (and I'm sure the majority) **much** prefer to have. – ctwheels Apr 10 '18 at 19:31

1 Answers1

1

As far as I can tell from the documentation, what you're using is not a supported syntax for adding validation methods to jQuery validate:

/* INCORRECT: */
jQuery("#element").validate({
    expression: "if (/*...*/) return true; else return false;",
    message: "Please enter a valid Email ID"
});

If you need custom validation rules, that is done with addMethod():

/* CORRECT: */
jQuery.validator.addMethod("methodname", function(value, element) {
    // return true if value is valid
}, "message");

jQuery("#myform").validate({
  rules: {
    elementname: "methodname",
    /* ... */
  }
});

Your custom "email" validator is unnecessary; jQuery validate has its own. Here is an example of your password validator in action:

jQuery.validator.addMethod(
  "myPasswordMethod",
  function(value, element) {
    // This is your regex, I have not looked closely at it to see if it is sensible
    return value.match(/^[^\W][a-zA-Z0-9\_\-\.]+([a-zA-Z0-9\_\-\.]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/); 
  },
  "Please enter a valid password"
);


$("#myForm").validate({
  rules: {
    pwd: "myPasswordMethod",
    mail: "email" // don't reinvent the wheel; there is a built-in email validation method
  }
});
<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.17.0/jquery.validate.min.js"></script>

<form id="myForm">
  <label for="mail">Email</label>
  <input id="mail" name="mail"><br>
  <label for="pwd">Password</label>
  <input id="pwd" name="pwd"><br>
</form>

As discussed exhaustively in comments, clientside password validation (or any other clientside validation) is insufficient on its own. Validate on the client for the user's convenience; re-validate on the server to prevent user shenanigans or to handle disabled clientside scripting.

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53