Geek Answers Handbook

Custom jQuery and HTML5 validation not working properly

I just started learning JS, jQuery and HTML on the web. I have a question, and I tried to do what was said in the answers to similar questions on SO, but that will not help.

I have a password form that accepts only input that has at least 6 characters, one uppercase letter and one number. I want to show a special message for verification, which could simply formulate these conditions again.

Here is my HTML code -

<div class="password"> <label for="password"> Password </label> <input type="password" class="passwrdforsignup" name="password" required pattern="(?=.*\d)(?=.*[AZ]).{6,}"> <!--pw must contain atleast 6 characters, one uppercase and one number--> </div>

I use JS to set up a special verification message.

Js code

 $(document).ready(function () { $('.password').on('keyup', '.passwrdforsignup', function () { var getPW = $(this).value(); if (getPW.checkValidity() === false) { getPW.setCustomValidity("This password doesn't match the format specified"); } }); });

However, the user verification message is not displayed. Please help. Thank you so much in advance! :)

UPDATE 1

I changed the password pattern to (?=.*\d)(?=.*[AZ])(.{6,}) . Based on the advice of 4castle, I realized that there were several errors in my javascript, and changed them accordingly. However, a custom validation message is not yet displayed.

JavaScript:

 $(document).ready(function () { $('.password').on('keyup', '.passwrdforsignup', function () { var getPW = $(this).find('.passwrdforsignup').get(); if (getPW.checkValidity() === false) { getPW.setCustomValidity("This password doesn't match the format specified"); } }); });

Again than all of you in advance!

+6
source share
2 answers

First update this:

 var getPW = $(this).find('.passwrdforsignup').get();

:

 var getPW = $(this).get(0);

... because $ (this) is already a .passwrdforsignup text box, you cannot find it in yourself!

The problem with setCustomValidity is that it only works after the form is setCustomValidity . Thus, it is possible to do just that:

 $(function () { $('.password').on('keyup', '.passwrdforsignup', function () { var getPW = $(this).get(0); getPW.setCustomValidity(""); if (getPW.checkValidity() === false) { getPW.setCustomValidity("This password doesn't match the format specified"); $('#do_submit').click(); } }); });

Pay attention to getPW.setCustomValidity(""); which discards the message , which is important because if you do not, getPW.checkValidity() will always be false !

To do this, the text field (and the submit button) must be in the form .

Working jsfiddle

+3
source

Here are a few questions.

  • The template has no capture group, so technically nothing can compare with it. Change the pattern to (?=.*\d)(?=.*[AZ])(.{6,})
  • $(this).value() does not refer to the value of the input tag, referring to the value of .password , which is a container div.
  • getPW.checkValidity() and getPW.setCustomValidity("blah") are run on a line that has no definitions for these functions, only DOM objects.

Here is what you should do instead (JS code from this SO answer )

 $(document).ready(function() { $('.passwrdforsignup').on('invalid', function(e) { var getPW = e.target; getPW.setCustomValidity(""); if (!getPW.checkValidity()) getPW.setCustomValidity("This password doesn't match the format specified"); }).on('input', function(e) { $(this).get().setCustomValidity(""); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="password"> <label for="password">Password</label> <input type="password" class="passwrdforsignup" name="password" required pattern="(?=.*\d)(?=.*[AZ])(.{6,})" /> </div> <input type="submit" /> </form>
+3
source

More articles:


All Articles