[JQUERY] 설정 사용자 지정 HTML5 필요한 필드 검증 메시지

설정 사용자 지정 HTML5 필요한 필드 검증 메시지

해결법

1. ---

   1.이 대답은 매우 많은 관심을 가지고 있기 때문에, 여기에 내가 생각 해낸 멋진 구성 조각입니다 :

   이 대답은 매우 많은 관심을 가지고 있기 때문에, 여기에 내가 생각 해낸 멋진 구성 조각입니다 :

   /**
     * @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
     * @link https://stackoverflow.com/a/16069817/603003
     * @license MIT 2013-2015 ComFreek
     * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
     * You MUST retain this license header!
     */
   (function (exports) {
       function valOrFunction(val, ctx, args) {
           if (typeof val == "function") {
               return val.apply(ctx, args);
           } else {
               return val;
           }
       }
   
       function InvalidInputHelper(input, options) {
           input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));
   
           function changeOrInput() {
               if (input.value == "") {
                   input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
               } else {
                   input.setCustomValidity("");
               }
           }
   
           function invalid() {
               if (input.value == "") {
                   input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
               } else {
                  input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
               }
           }
   
           input.addEventListener("change", changeOrInput);
           input.addEventListener("input", changeOrInput);
           input.addEventListener("invalid", invalid);
       }
       exports.InvalidInputHelper = InvalidInputHelper;
   })(window);
   

   → jsFiddle

   <input id="email" type="email" required="required" />
   

   InvalidInputHelper(document.getElementById("email"), {
     defaultText: "Please enter an email address!",
   
     emptyText: "Please enter an email address!",
   
     invalidText: function (input) {
       return 'The email address "' + input.value + '" is invalid!';
     }
   });
   

   당신도 문자열 또는 세 가지 속성의 각각에 기능을 할당 할 수 있습니다. 당신이 기능을 지정하면, 입력 요소에 대한 참조 (DOM 노드)을 수용 할 수 있으며 다음 오류 메시지로 표시되는 문자열을 반환해야합니다.

   에서 테스트 :

   https://stackoverflow.com/revisions/16069817/6 : 현재 이전 버전을 볼 수 있습니다

2. ---

   2.당신은 단순히이 사용 oninvalid 속성을 달성 할 수있다, 이 데모 코드를 체크 아웃

   당신은 단순히이 사용 oninvalid 속성을 달성 할 수있다, 이 데모 코드를 체크 아웃

   <form>
   <input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
   <input type="submit"/>
   </form>
   

   Codepen 데모 : https://codepen.io/akshaykhale1992/pen/yLNvOqP

3. ---

   3.HTML :

   HTML :

   <form id="myform">
       <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  type="email" required="required" />
       <input type="submit" />
   </form>
   

   JAVASCRIPT :

   function InvalidMsg(textbox) {
       if (textbox.value == '') {
           textbox.setCustomValidity('Required email address');
       }
       else if (textbox.validity.typeMismatch){{
           textbox.setCustomValidity('please enter a valid email address');
       }
       else {
          textbox.setCustomValidity('');
       }
       return true;
   }
   

   데모 :

   http://jsfiddle.net/patelriki13/Sqq8e/

4. ---

   4.이 시도:

   이 시도:

   $(function() {
       var elements = document.getElementsByName("topicName");
       for (var i = 0; i < elements.length; i++) {
           elements[i].oninvalid = function(e) {
               e.target.setCustomValidity("Please enter Room Topic Title");
           };
       }
   })
   

   나는 크롬과 FF에서이 테스트는 두 브라우저에서 일했다.

5. ---

   5.남자, 나는 결코 HTML 5에 있다는 이루어지지했지만 나는 노력하겠습니다. 이 바이올린을 보라.

   남자, 나는 결코 HTML 5에 있다는 이루어지지했지만 나는 노력하겠습니다. 이 바이올린을 보라.

   좀 jQuery를, HTML5 기본 이벤트 및 특성과 입력 태그에 사용자 지정 특성을 (당신이 당신의 코드를 validade하려고하면이 문제가 발생할 수 있습니다) 사용하고 있습니다. 나는 모든 브라우저에서 테스트하지 않았지만, 나는 그것이 작동하지 않을 수 있습니다 생각합니다.

   이것은 jQuery로 현장 검증 자바 스크립트 코드입니다 :

   $(document).ready(function()
   {
       $('input[required], input[required="required"]').each(function(i, e)
       {
           e.oninput = function(el)
           {
               el.target.setCustomValidity("");
   
               if (el.target.type == "email")
               {
                   if (el.target.validity.patternMismatch)
                   {
                       el.target.setCustomValidity("E-mail format invalid.");
   
                       if (el.target.validity.typeMismatch)
                       {
                            el.target.setCustomValidity("An e-mail address must be given.");
                       }
                   }
               }
           };
   
           e.oninvalid = function(el)
           {
               el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
           };
       });
   });
   

   좋은. 여기에 간단한 양식의 HTML은 다음과 같습니다

   <form method="post" action="" id="validation">
       <input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
       <input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />
   
       <input type="submit" value="Send it!" />
   </form>
   

   속성 requiredmessage 내가 이야기 사용자 정의 속성입니다. 당신은 각 필수 필드는 오류 메시지가 표시됩니다 때 jQuery를 그것에서 얻을 것이다이 원인이 메시지를 설정할 수 있습니다. 당신은 jQuery를 당신을 위해 그것을 수행, 자바 스크립트에 각 필드의 권리를 설정할 필요가 없습니다. 그 정규식은 잘 될 것 같다 (그것은 당신의 테스트 @ .COM을 차단 적어도! 하하)

   당신이 바이올린에 볼 수 있듯이, 나는 형태의 이벤트를 (이 너무 document.ready에 간다) 제출의 추가 검증합니다

   $("#validation").on("submit", function(e)
   {
       for (var i = 0; i < e.target.length; i++)
       {
           if (!e.target[i].validity.valid)
           {
               window.alert(e.target.attributes.requiredmessage.value);
               e.target.focus();
               return false;
           }
       }
   });
   

   나는이 작품을 희망하거나 어쨌든 당신의 도움이됩니다.

6. ---

   6.이것은 나를 위해 잘 작동합니다 :

   이것은 나를 위해 잘 작동합니다 :

   jQuery(document).ready(function($) {
       var intputElements = document.getElementsByTagName("INPUT");
       for (var i = 0; i < intputElements.length; i++) {
           intputElements[i].oninvalid = function (e) {
               e.target.setCustomValidity("");
               if (!e.target.validity.valid) {
                   if (e.target.name == "email") {
                       e.target.setCustomValidity("Please enter a valid email address.");
                   } else {
                       e.target.setCustomValidity("Please enter a password.");
                   }
               }
           }
       }
   });
   

   나는 그것을 사용하고 양식 (절단) :

   <form id="welcome-popup-form" action="authentication" method="POST">
       <input type="hidden" name="signup" value="1">
       <input type="email" name="email" id="welcome-email" placeholder="Email" required></div>
       <input type="password" name="passwd" id="welcome-passwd" placeholder="Password" required>
       <input type="submit" id="submitSignup" name="signup" value="SUBMIT" />
   </form>
   

7. ---

   7.당신은 당신이 필요하고 적절한 메시지를 설정하는 내용에 따라, 모든 걸쳐 '무효'는 동일한 유형의 입력, 또는 단지 하나에 대한 이벤트 리스너까지이 설정을 할 수 있습니다.

   당신은 당신이 필요하고 적절한 메시지를 설정하는 내용에 따라, 모든 걸쳐 '무효'는 동일한 유형의 입력, 또는 단지 하나에 대한 이벤트 리스너까지이 설정을 할 수 있습니다.

   [].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) {
       emailElement.addEventListener('invalid', function() {
           var message = this.value + 'is not a valid email address';
           emailElement.setCustomValidity(message)
       }, false);
   
       emailElement.addEventListener('input', function() {
           try{emailElement.setCustomValidity('')}catch(e){}
       }, false);
       });
   

   이 메시지는 이메일 주소가 수정 된 경우에도 트리거 될 방지 예 : 그렇지 않으면 양식을 제출 할 수 없습니다 때문에 스크립트의 두 번째 부분은, 유효 메시지는 초기화됩니다.

   당신이 입력에 입력을 시작하면 또한 당신은 '무효'가 트리거되기 때문에, 필요에 따라 입력 필드를 설정할 필요가 없습니다.

   여기에 대한 바이올린은 다음과 같습니다 http://jsfiddle.net/napy84/U4pB7/2/ 희망이 도움이!

8. ---

   8.모든 입력 태그의 속성 "제목"을 사용하고 그 위에 메시지를 작성

   모든 입력 태그의 속성 "제목"을 사용하고 그 위에 메시지를 작성

9. ---

   9.그냥 요소를 얻고 방법 setCustomValidity를 사용해야합니다.

   그냥 요소를 얻고 방법 setCustomValidity를 사용해야합니다.

   예

   var foo = document.getElementById('foo');
   foo.setCustomValidity(' An error occurred');
   

10. ---

    10.당신은 단순히이 this.setCustomValidity ()의 EventListener를 bingding과 함께 "oninvalid = 속성을 사용하실 수 있습니다!

    당신은 단순히이 this.setCustomValidity ()의 EventListener를 bingding과 함께 "oninvalid = 속성을 사용하실 수 있습니다!

    여기 내 데모 코드입니다! (당신이 체크 아웃을 실행할 수 있습니다!)

    <메타 캐릭터 = "UTF-8">