адкладзеце HTML5: няправільны псеўда-класа да першага падзеі

Нядаўна я выявіў, што : няправільная псеўда-клас прымяняецца да патрабуецца форменных элементаў, як толькі пры загрузцы старонкі. Напрыклад, калі ў вас ёсць гэты код:

…
<input name="foo" required />

Тады ваша старонка будзе загружацца з пустым ружовым уваходным элементам на ім. Маючы праверкі, убудаваныя ў HTML5 вялікія, але я не думаю, што большасць карыстальнікаў чакаюць, што форма для праверкі, перш чым яны мелі магчымасць ўвесці любыя значэння на ўсіх. Ці ёсць спосаб, каб адкласці прымяненне псеўда-класа да першага падзеі, які ўплывае на гэты элемент (форма ўявіць, размыццё, змена, незалежна ад Дарэчы)? Ці можна гэта зрабіць без JavaScript?

48
Я не магу каментаваць, так што я буду дадаваць гэта дадатак да @ user3284463 The makeDirty не павінен пераключыць брудны клас, ён павінен трымаць яго на будучыню (сіні, несапраўдныя, сапраўдныя) падзеі функцыянуюць makeDirty (е ) {калі) e.target.classList.add ( 'брудная') (e.target.classList.contains ( 'брудны'!); }
дададзена аўтар Abir Stolov, крыніца

9 адказы

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

<�Р> Так як мы толькі хочам, каб пазначыць, што поле з'яўляецца несапраўдным, калі ён мае   фокус, мы выкарыстоўваем фокус псеўда-клас, каб выклікаць недапушчальны стыль.   (Натуральна, маркіроўкі ўсе неабходныя палі несапраўднымі з самага пачатку   будзе дрэнны выбар дызайну.)

Вынікаючы гэтай логіцы, ваш код будзе выглядаць прыкладна так ...

32
дададзена
Я мог сабе ўявіць (не-у цяперашні час адсутнічае) pseduo-клас для формаў, як «ўяўляецца», так што гэта будзе дзейнічаць у якасці бацькоўскага селектара для любога ўваходу, які змяшчаецца, напрыклад #myform: прадстаўлены ўвод: патрабуецца: несапраўдны </код >. Таму што нават калі гэты бягучы сцэнар з'яўляецца неинтуитивным на самай справе, гэта не абавязкова рэалістычна чакаць, што CSS, каб ведаць, што поле з'яўляецца несапраўдным пры пэўных абставінах (чаму ён не павінен рабіць гэта адразу ж, наколькі ён ведае?), Так вы сапраўды хочаце звязаць стыль ўводу ў стане формы, а не сам ўваход (напрыклад, калі патрабуецца поле пуста і бацькоўская форма ўяўляецца).
дададзена аўтар Anthony, крыніца
Адказ: stackoverflow.com/questions/41619497/… на самай справе мае справу з гэтым добра, я думаю, нават калі гэта патрабуе крыху JavaScript. Гэта проста дадае клас «прадстаўлены" у форме (гэтак жа, як я прапаноўваў!), Так што правілы стылю могуць быць form.submitted ўваход: патрабуецца: несапраўдны
дададзена аўтар Anthony, крыніца
Акрамя таго, каб цалкам вычарпаць гэты пункт, і тое ж пытанне павінен прысутнічаць з другога : сапраўдны або : Тыпы ня дзейнічае ўводу. Калі ўваход тыпу лік і нічога не запаўняецца, то яно павінна аказваць як несапраўдныя, так як нарыхтоўка не з'яўляецца дапушчальным лікавым значэннем. Адзіная прычына, гэта не праблема, таму што за межамі патрабуецца <�код /> уласнасці, пустое значэнне лічыцца дапушчальным значэннем.
дададзена аўтар Anthony, крыніца
"Не ідэальна любымі сродкамі.» Сапраўды. Ці ёсць спосаб прымянення стыляў, каб у сіле, але <�я> не </я> неабходнае ўтрыманне, пасля таго, як элемент страціў фокус? Я не выпрацаваў спосаб зрабіць гэта.
дададзена аўтар Donald Jenkins, крыніца

Гэта немагчыма ў чыстым CSS, але можа быць зроблена з дапамогай JavaScript. Гэта jQuery прыклад :

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true"> <div class="snippet-code">

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






</div> </div>
20
дададзена
Гэта рашэнне, якое я аддаю перавагу, але вам не трэба больш JQuery. Гэта можна зрабіць з дапамогай простага JavaScript.
дададзена аўтар micah, крыніца
Гэта простае рашэнне;)
дададзена аўтар fegemo, крыніца

Гэтыя адказы састарэлі. Цяпер вы можаце зрабіць гэта, правяраючы для шаблоннага псеўда-класа з дапамогай CSS.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

input:not(:placeholder-shown):invalid {
    background-color: salmon;
}
form:invalid button {
    background-color: salmon;
    pointer-events: none;
}
<form>
    <input type="email" placeholder="[email protected]" required>
    <button type="submit">Submit</button>
</form>
</div> </div>

Яна пачынаецца з нармальным фонам і ружавее, як вы ўводзіце вас няпоўны адрас электроннай пошты ў яго.

14
дададзена
На жаль, гэта не працуе, калі ваша адзіная праверка праз патрабуецца. Ён павінен паказаць памылку, калі вы дакрануўся абавязковае поле або паспрабаваў адправіць форму з неабходнымі палямі. Пустое поле абавязкова будзе па-ранейшаму паказваць запаўняльнік.
дададзена аўтар Björn Tantau, крыніца
Я дадаў прыклад кнопкі Перадаць Пераключэнне на аснове формы.
дададзена аўтар Carl, крыніца
Варта адзначыць, што калі вы клапоціцеся аб IE або падтрымкі памежным : запаўняльнікам-паказана псеўда-клас не падтрымліваецца на ўсіх. caniuse.com/#feat=css-placeholder-shown
дададзена аўтар Leo Napoleon, крыніца

Існуе html5 несапраўдным падзея, якая спрацоўвае па элементам формы перад прадставіць адбываецца падзея для кожнага элемента, які не праходзіць checkValidity. Вы можаце выкарыстоўваць гэтую падзею, каб прымяніць клас, напрыклад, каб навакольныя формы і адлюстраванне: недапушчальны стыляў толькі пасля таго, як гэтая падзея адбываецца.

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

Першы радок выдаляе стылі па змаўчанні, так што элементы формы выглядаюць нейтральна на старонцы загрузкі. Як толькі несапраўдныя пажары падзей (калі карыстальнік спрабуе адправіць форму), элементы відавочна несапраўдныя.

2
дададзена

Пры выкарыстанні формы праверкі HTML5, паспрабуйце выкарыстоўваць браўзэр для выяўлення несапраўдных прадстаўленых матэрыялаў/палёў, а не зноўку вынаходзіць кола.

Праслухайце несапраўдным падзея, каб дадаць клас «інвалід» у форму. З дадаў «інвалід» клас, вы можаце пайсці ў горад з кладка формы з дапамогай CSS3 : псеўда селектары.

Напрыклад:

// 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);
}
2
дададзена
Э-э, гэта не вынаходзіць кола чартоўску шмат больш, чым пытанне?
дададзена аўтар Ry-, крыніца

Mozilla клапоціцца пра гэта са сваім : - Мос-ш-інвалід pseudoclass, які ўжываецца толькі форм пасля таго як яны былі ўзаемадзейнічалі з. MDN не рэкамендуе выкарыстоўваць гэта з-за адсутнасці падтрымкі. Тым не менш, вы можаце змяніць яго для Firefox.

Там жа ўзровень 4 спецыфікацыі для : карыстач-інвалід SPEC на гарызонт, які будзе прапаноўваць падобныя паводзіны.

На жаль, калі гэта не дапаможа, але я спадзяюся, што ён прапануе некаторы кантэкст.

1
дададзена

Вы можаце зрабіць так, што толькі тыя элементы, якія маюць пэўны клас на іх і неабходныя, ружовыя. Даданне апрацоўшчыка падзей для кожнага патрабаванага элемента, які дадае гэты клас, калі вы пакідаеце элемент.

Нешта накшталт:

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

І, вядома, гэта не будзе працаваць у IE8 або ніжэй, так як (а) DOMContentLoaded з'яўляецца адносна новым і не быў стандартным, калі IE8 выйшаў, (б) IE8 выкарыстоўвае attachEvent , а не DOM-стандарт addEventListener , і (с) IE8 не будзе клапаціцца аб : патрабуецца у любым выпадку, паколькі гэта тэхнічна не падтрымлівае HTML 5.

1
дададзена

I created a small shim to deal with this in my codebase. I just start off with my <form/> element having the novalidate property along with a data-validate-on="blur" attribute. This watches for the first event of that type. This way you can still use the native :invalid CSS selectors for the form styling.

$(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');
        });
    });
});
1
дададзена

Добры спосаб складаецца ў абстрактным : несапраўдны, сапраўдны: з CSS класаў, а затым некаторыя JavaScript, каб праверыць, калі поле ўводу было сфакусавана ці не.

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

0
дададзена