Пользовательская проверка JQuery и HTML5 не работает по назначению

Question

Я только начал изучать JS, Jquery и HTML в Интернете. У меня есть вопрос, и я попытался сделать то, что было сказано в ответах на подобные вопросы по SO, но это не поможет.

У меня есть форма пароля, которая принимает только входные данные, которые имеют как минимум 6 символов, одну заглавную букву и одно число. Я хочу показать специальное сообщение для проверки, которое могло бы просто сформулировать эти условия снова.

Вот мой HTML код -

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

Я использую JS, чтобы установить пользовательское сообщение проверки.

JS код

$(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"); 
     } 

    }); 

}); 

Однако сообщение пользовательские проверки не отображается. Пожалуйста помоги. Огромное спасибо заранее! :)

UPDATE 1

Я изменил шаблон пароля к (?=.*\d)(?=.*[A-Z])(.{6,}). Основываясь на совете 4castle, я понял, что в моем javascript было несколько ошибок, и соответственно изменил их. Однако пользовательское сообщение проверки еще не отображается.

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"); 
     } 

    }); 

}); 

Опять же, чем вы все заранее!

Answer 1

Сначала обновите эту:

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

к этому:

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

... потому что $ (это) уже текстовое поле .passwrdforsignup, вы не можете найти его в себе!

Проблема с setCustomValidity заключается в том, что она работает только после отправки формы.Таким образом, есть возможность сделать именно это:

$(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(); 
     } 
    }); 
}); 

Пожалуйста, обратите внимание на getPW.setCustomValidity("");, который сбрасывает сообщение что важно, потому что если вы не сделаете этого, getPW.checkValidity() будет всегда быть false!

Для этого необходимо использовать текстовое поле (и кнопку отправки) должно быть быть в form.

Working JSFiddle

Answer 2

Здесь несколько вопросов.

1. У шаблона нет группы захвата, поэтому технически ничто не может сравниться с ней. Измените шаблон на (?=.*\d)(?=.*[A-Z])(.{6,})
2. $(this).value() не относится к значению тега input, это относится к значению .password, которое является контейнером div.
3. getPW.checkValidity() и getPW.setCustomValidity("blah") получают пробег в строке, которая не имеет определений для этих функций, только объекты DOM.

Вот что вы должны сделать вместо (JS код из 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)(?=.*[A-Z])(.{6,})" /> 
 
    </div> 
 
    <input type="submit" /> 
 
</form>