HTML5 지연 : 첫 번째 이벤트까지 유효하지 않은 의사 클래스

HTML5 지연 : 첫 번째 이벤트까지 유효하지 않은 의사 클래스

---

최근 에 페이지가로드 되 자마자 :invalid가상 클래스가 required양식 요소에 적용 된다는 사실을 발견했습니다 . 예를 들어 다음 코드가있는 경우 :

<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />

그러면 페이지가 빈 분홍색 입력 요소와 함께로드됩니다. HTML5에 유효성 검사가 내장되어있는 것은 훌륭하지만 대부분의 사용자는 값을 입력하기 전에 양식이 유효성을 검사 할 것으로 기대하지 않습니다. 해당 요소에 영향을 미치는 첫 번째 이벤트 (양식 제출, 흐림, 변경 등)가 발생할 때까지 의사 클래스의 적용을 지연시킬 수있는 방법이 있습니까? JavaScript 없이도 가능합니까?

---

http://www.alistapart.com/articles/forward-thinking-form-validation/

포커스가있는 필드가 유효하지 않다는 것만 표시하고 싶기 때문에 포커스 의사 클래스를 사용하여 유효하지 않은 스타일을 트리거합니다. (당연히 모든 필수 필드를 처음부터 유효하지 않은 것으로 표시하는 것은 잘못된 디자인 선택입니다.)

이 논리를 따르면 코드는 다음과 같습니다.

<style>
    input:focus:required:invalid {background-color: pink; color: white;}
    input:required:valid {background-color: white; color: black; }
<style>

여기에 바이올린을 만들었습니다 : http://jsfiddle.net/tbERP/

짐작 하시겠지만 바이올린에서 볼 수 있듯이이 기술은 요소에 포커스가있을 때만 유효성 검사 스타일을 보여줍니다. 포커스를 이동하면 스타일이 유효한지 여부에 관계없이 스타일이 삭제됩니다. 결코 이상적이지 않습니다.

---

순수 CSS에서는 불가능하지만 JavaScript로 수행 할 수 있습니다. 다음은 jQuery 예제입니다 .

// use $.fn.one here to fire the event only once.
$(':required').one('blur keydown', function() {
  console.log('touched', this);
  $(this).addClass('touched');
});

/**
 * All required inputs initially are yellow.
 */
:required {
  background-color: lightyellow;
}

/**
 * If a required input has been touched and is valid, it should be white.
 */
.touched:required:valid {
  background-color: white;
}

/**
 * If a required input has been touched and is invalid, it should be pink.
 */
.touched:required:invalid {
  background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label>
    Name:
    <input type="text" required> *required
  </label>
</p>
<p>
  <label>Age:
    <input type="text">
  </label>
</p>

---

이 답변은 오래되었습니다. 이제 CSS로 자리 표시 자 의사 클래스를 확인하여이를 수행 할 수 있습니다.

input:not(:placeholder-shown):invalid {
    background-color: salmon;
}
form:invalid button {
    background-color: salmon;
    pointer-events: none;
}

<form>
    <input type="email" placeholder="me@example.com" required>
    <button type="submit">Submit</button>
</form>

정상적인 배경으로 시작하여 불완전한 이메일 주소를 입력하면 분홍색으로 바뀝니다.

---

내 코드베이스에서 이것을 처리하기 위해 작은 심을 만들었습니다. 속성과 함께 속성을 <form/>갖는 요소로 시작 합니다. 이것은 해당 유형의 첫 번째 이벤트를 감시합니다. 이렇게 하면 양식 스타일링에 기본 CSS 선택기를 계속 사용할 수 있습니다 .novalidatedata-validate-on="blur":invalid

$(function () {
    $('[data-validate-on]').each(function () {
        var $form = $(this);
        var event_name = $form.data('validate-on');

        $form.one(event_name, ':input', function (event) {
            $form.removeAttr('novalidate');
        });
    });
});

---

Mozilla는 상호 작용 한 후에 만 ​​양식에 적용되는 고유 한 : -moz-ui-invalid 가상 클래스로이를 처리합니다. MDN은 지원이 부족하기 때문에 이것을 사용하지 않는 것이 좋습니다. 그러나 Firefox 용으로 수정할 수 있습니다.

비슷한 동작을 제공 하는 : user-invalid 사양에 대한 레벨 4 사양 이 있습니다.

도움이되지 않으면 미안하지만, 맥락을 알 수 있기를 바랍니다.

---

HTML5 양식 유효성 검사를 사용하는 동안 휠을 다시 발명하는 대신 브라우저를 사용하여 잘못된 제출 / 필드를 감지하십시오.

invalid양식에 '잘못된'클래스를 추가하는 이벤트를 수신합니다 . '유효하지 않은'클래스가 추가되면 CSS3 :pseudo선택기를 사용하여 양식을 스타일링하여 마을로 이동할 수 있습니다 .

예를 들면 :

// where myformid is the ID of your form
var myForm = document.forms.myformid;

var checkCustomValidity = function(field, msg) {
    if('setCustomValidity' in field) {
        field.setCustomValidity(msg);
    } else {
        field.validationMessage = msg;
    }
};

var validateForm = function() {

    // here, we're testing the field with an ID of 'name'
    checkCustomValidity(myForm.name, '');

    if(myForm.name.value.length < 4) {
        checkCustomValidity(
            // alerts fields error message response
            myForm.name, 'Please enter a valid Full Name, here.'
        );
    }
};

/* here, we are handling your question above, by adding an invalid
   class to the form if it returns invalid.  Below, you'll notice
   our attached listener for a form state of invalid */
var styleInvalidForm = function() {
    myForm.className = myForm.className += ' invalid';
}

myForm.addEventListener('input', validateForm, false);
myForm.addEventListener('keyup', validateForm, false);
myForm.addEventListener('invalid', styleInvalidForm, true);

이제 첨부 한 '유효하지 않은'클래스를 기반으로 적합하다고 생각되는 양식의 스타일을 지정하십시오.

예를 들면 :

form.invalid input:invalid,
form.invalid textarea:invalid {
    background: rgba(255, 0, 0, .05);
    border-color: #ff6d6d;
    -webkit-box-shadow: 0 0 6px rgba(255, 0, 0, .35);
    box-shadow: 0 0 6px rgba(255, 0, 0, .35);
}

---

checkValidity를 통과하지 않는 각 요소에 대해 이벤트가 발생 invalid하기 전에 양식 요소에서 발생 하는 html5 이벤트가 submit있습니다. 이 이벤트를 사용하여 예를 들어 주변 양식에 클래스를 적용하고이 이벤트가 발생한 후에 만 ​​: invalid 스타일을 표시 할 수 있습니다.

 $("form input, form select, form textarea").on("invalid", function() {
     $(this).closest('form').addClass('invalid');
 });

CSS는 다음과 같습니다.

:invalid { box-shadow: none; }
.invalid input:invalid,
.invalid textarea:invalid,
.invalid select:invalid { border: 1px solid #A90909 !important; background-color: #EEC2C2; }

첫 번째 줄은 기본 스타일을 제거하므로 페이지로드시 양식 요소가 중립적으로 보입니다. 유효하지 않은 이벤트가 발생하면 (사용자가 양식을 제출하려고 할 때) 요소가 시각적으로 유효하지 않게 렌더링됩니다.

---

이것은 kzh 의 대답 의 VanillaJS (jQuery 없음) 버전입니다.

{
  let f = function() {
    this.classList.add('touched')
  }
  document
    .querySelectorAll('input')
    .forEach((e) => {
      e.addEventListener('blur', f, false)
      e.addEventListener('keydown', f, false)
    })
}

/**
 * All required inputs initially are yellow.
 */
:required {
  background-color: lightyellow;
}

/**
 * If a required input has been touched and is valid, it should be white.
 */
.touched:required:valid {
  background-color: white;
}

/**
 * If a required input has been touched and is invalid, it should be pink.
 */
.touched:required:invalid {
  background-color: pink;
}

<p><label>
  Name:
  <input type="text" required> *required
</label></p>
<p><label>Age:
  <input type="text">
</label></p>

---

당신은 그래서 그들에 특정 클래스가있는 경우에만 요소가 있음을 만들 수 및 필요는 핑크입니다. 요소를 떠날 때 해당 클래스를 추가하는 각 필수 요소에 이벤트 핸들러를 추가하십시오.

다음과 같은 것 :

<style>
  input.touched:invalid { background-color: pink; color: white; }
  input.touched:valid { background-color: white; color: black; }
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var required = document.querySelectorAll('input:required');
    for (var i = 0; i < required.length; ++i) {
      (function(elem) {
        function removeClass(name) {
          if (elem.classList) elem.classList.remove(name);
          else
            elem.className = elem.className.replace(
              RegExp('(^|\\s)\\s*' + name + '(?:\\s+|$)'),
              function (match, leading) {return leading;}
          );
        }

        function addClass(name) {
          removeClass(name);
          if (elem.classList) elem.classList.add(name);
          else elem.className += ' ' + name;
        }

        // If you require a class, and you use JS to add it, you end up
        // not showing pink at all if JS is disabled.
        // One workaround is to have the class on all your elements anyway,
        // and remove it when you set up proper validation.
        // The main problem with that is that without JS, you see what you're
        // already seeing, and stuff looks hideous.
        // Unfortunately, you kinda have to pick one or the other.


        // Let non-blank elements stay "touched", if they are already,
        // so other stuff can make the element :invalid if need be
        if (elem.value == '') addClass('touched');

        elem.addEventListener('blur', function() {
          addClass('touched');
        });

        // Oh, and when the form submits, they need to know about everything
        if (elem.form) {
          elem.form.addEventListener('submit', function() {
            addClass('touched');
          });
        };
      })(required[i]);
    }
  });
</script>

And of course, it won't work as is in IE8 or below, as (a) DOMContentLoaded is relatively new and wasn't standard when IE8 came out, (b) IE8 uses attachEvent rather than the DOM-standard addEventListener, and (c) IE8 isn't going to care about :required anyway, as it doesn't technically support HTML 5.

---

A good way is to abstract :invalid, :valid with a CSS classes and then some JavaScript to check if the input field was focused or not.

CSS:

input.dirty:invalid{ color: red; }
input.dirty:valid{ color: green; }

JS:

// Function to add class to target element
function makeDirty(e){
  e.target.classList.toggle('dirty');
}

// get form inputs
var inputs = document.forms[0].elements;

// bind events to all inputs
for(let input of inputs){
  input.addEventListener('invalid', makeDirty);
  input.addEventListener('blur', makeDirty);
  input.addEventListener('valid', makeDirty);
}

DEMO

---

Here is my method to avoid the default styling of any unfocused input as invalid, you just have to add a simple js command onFocus to let the webpage to identify focused and unfocused inputs, so all the input will not appear in the style of invalid at first place.

<style>
input.focused:required:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" class="notfocused" onFocus="document.activeElement.className='focused';" required />

Try it yourself below:

input.focused:required:invalid {
  background-color: pink;
  color: white;
}

input:required:valid {
  background-color: darkseagreen;
  color: black;
}

<label>At least 1 charater:</label><br />
<input type="text" name="foo" class="notfocused" onFocus="document.activeElement.className='focused';" required />

---

I can't comment, but to go with @Carl's very useful answer regarding using :not(:placeholder-shown). As another comment mentioned, this will still show the invalid state if you have NO placeholder (as some form designs call for).

To solve this, simply add an empty placeholder like so

<input type="text" name="username" placeholder=" " required>

Then your CSS, something like

:not(:placeholder-shown):invalid{ background-color: #ff000038; }

Worked for me!

---

Following on from agouseh's idea, you can have a bit of javascript to tell when the submit button has been focussed, and have validation show up at that time.

The javascript will add a class (eg. submit-focussed) to the form field when the submit button is focussed or clicked, which then allows the CSS to style invalid inputs.

This follows the best practice of showing validation feedback after the user has finished filling in the fields, as according to research there is no additional benefit to showing it during the process.

document
  .querySelector('input[type=submit]')
  .onfocus = function() {
    this
      .closest('form')
      .classList
      .add('submit-focussed');
  };

form.submit-focussed input:invalid {
  border: thin solid red;
}

<form>
  <label>Email <input type="email" required="" /></label>
  <input type="submit" />
</form>

jQuery alternative

(function($) {
  $('input[type=submit]').on('focus', function() {
    $(this)
      .parent('form')
      .addClass('submit-focussed');
  });
})(jQuery); /* WordPress compatible */

참고URL : https://stackoverflow.com/questions/7920742/delay-html5-invalid-pseudo-class-until-the-first-event