Xác thực tùy chỉnh JQuery và HTML5 không hoạt động như dự định

Question

Tôi vừa bắt đầu học JS, Jquery và HTML trực tuyến. Tôi có một câu hỏi, và đã cố gắng làm những điều được kể trong câu trả lời của các câu hỏi tương tự trên SO, nhưng nó sẽ không giúp ích gì.

Tôi có biểu mẫu mật khẩu chỉ chấp nhận đầu vào có ít nhất 6 ký tự, một chữ hoa và một số. Tôi muốn hiển thị thông báo xác thực tùy chỉnh có thể chỉ nêu rõ các điều kiện này.

Đây là mã HTML của tôi -

<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> 

Tôi đang sử dụng JS để thiết lập các thông điệp xác nhận tùy chỉnh.

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

    }); 

}); 

Tuy nhiên, thông điệp xác nhận tùy chỉnh không hiển thị. Hãy giúp tôi. Cảm ơn trước! :)

CẬP NHẬT 1

tôi đã thay đổi mô hình mật khẩu để (?=.*\d)(?=.*[A-Z])(.{6,}). Dựa trên lời khuyên của 4castle, tôi nhận ra có một vài lỗi trong javascript của tôi, và thay đổi chúng cho phù hợp. Tuy nhiên, thông báo xác thực tùy chỉnh vẫn không hiển thị.

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

    }); 

}); 

Một lần nữa, so với tất cả các bạn trước!

Answer 1

Thứ nhất, cập nhật này:

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

này:

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

... vì $ (đây) đã là hộp văn bản .passwrdforsignup, bạn không thể tự tìm thấy nó!

Sự cố với setCustomValidity là, nó chỉ hoạt động khi bạn gửi biểu mẫu.Vì vậy, có những lựa chọn để thực hiện chính xác rằng:

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

Xin lưu ý getPW.setCustomValidity(""); mà resets thông điệp đó là quan trọng bởi vì nếu bạn không làm điều này, getPW.checkValidity() sẽ luôn được false!

Để làm việc này, hộp văn bản (và nút gửi) phải nằm trong một số form.

Working JSFiddle

Answer 2

Có một số vấn đề xảy ra ở đây.

1. Mẫu không có nhóm chụp, vì vậy về mặt kỹ thuật không có gì có thể khớp với nó. Thay đổi mẫu thành (?=.*\d)(?=.*[A-Z])(.{6,})
2. $(this).value() không đề cập đến giá trị của thẻ input, nó đề cập đến giá trị của .password là div vùng chứa.
3. getPW.checkValidity() và getPW.setCustomValidity("blah") đang chạy trên chuỗi, không có định nghĩa cho các chức năng đó, chỉ các đối tượng DOM làm.

Dưới đây là những gì bạn nên làm thay vì (mã JS từ 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>