Gecikish HTML5: birinchi voqea qadar noto'g'ri pseudo-sinf

Yaqinda sahifani yuklamasdanoq : invalid pseudo-class zarur formalaridagi elementlarga nisbatan qo'llanilishini aniqladim. Misol uchun, agar sizda ushbu kod mavjud bo'lsa:

…
<input name="foo" required />

So'ngra sahifangizda bo'sh pushti kirish elementi bilan yuklanadi. HTML5-ga o'rnatilgan tasdiqlash katta bo'lsa-da, lekin ko'pchilik foydalanuvchilar bu shaklni hech qanday qadriyatlarni kiritish imkoniga ega bo'lmagani uchun tasdiqlashlarini kutishmaydi. Birinchi element ushbu elementga ta'sir qilmaguncha, pseudo-sinfni qo'llashni kechiktirishning biron bir usuli mavjudmi? (Ariza yuborish, loyqalash, o'zgartirish, nima bo'lishidan qat'iy nazar)? Buni JavaScript-ni bajarish mumkinmi?

48
Men izoh berishga qodir emasman, shuning uchun @ user3284463 uchun ushbu qo'shimchani qo'shaman. makeDirty iflos sinfni almashtirmasligi kerak, uni kelajakda (ko'k, bekor, amalda) saqlab turish kerak makeDirty (e ) {if (! e.target.classList.contains ('iflos')) e.target.classList.add ('iflos'); }
qo'shib qo'ydi muallif Abir Stolov, manba

9 javoblar

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

Faqat bizda faqat bitta maydon bekor bo'lganligini bildirmoqchimiz   diqqat markazida biz noto'g'ri uslubni tetiklash uchun mavzu pseudo-sinfidan foydalanamiz.   (Tabiiyki, barcha kerakli maydonlarni boshidan e'tiboran bekor deb belgilash   kambag'al dizayn tanlovi bo'ladi.)

Ushbu mantiqdan so'ng sizning kodingiz shu kabi narsalarga o'xshaydi ...

32
qo'shib qo'ydi
#myform: submit input: required: invalid . Ushbu hozirgi stsenariy haqiqatdan ham g'ayrioddiy bo'lsa-da, CSS-ning aniq sharoitlarda (nima uchun buni darhol bilmasligi kerak?) Ma'lum bir sharoitda maydonning haqiqiy emasligini bilishini kutish haqiqiy emas. siz kiritilgan uslubni shaklning holatiga bog'lashni xohlaysiz (masalan, kerakli maydon bo'sh bo'lsa va ota-ona shaklini taqdim etilsa).
qo'shib qo'ydi muallif Anthony, manba
Bu javob: stackoverflow.com/questions/41619497/… aslida bu bilan yaxshi ishlaydi, deb o'ylayman, biroz JavaScript kerak bo'lsa ham. Shunchaki formadagi qoidalar qoidalari "form" ga qo'shiladi (men taklif qilganim kabi). Shunday qilib, uslublar qoidalari form.subied input: required: invalid bo'lishi mumkin.
qo'shib qo'ydi muallif Anthony, manba
Bundan tashqari, ushbu nuqtadan butunlay chiqarib yuborish uchun : valid yoki : invalid boshqa kirdi turlari bilan bir xil muammo bo'lishi kerak. Agar kirish kodi integer bo'lsa va hech narsa to'ldirilmasa, unda bo'sh qiymat yaroqsiz bo'lishi kerak, chunki bo'sh qiymat joriy raqamli qiymat emas. Buning bir sababi emas, chunki zarur xususiyatidan tashqari, bo'sh qiymat joriy qiymat hisoblanadi.
qo'shib qo'ydi muallif Anthony, manba
"Hech qanday yo'l bilan ideal emas". Haqiqatdan ham. Uslubni amalda qo'llashning bir usuli mavjudmi, lekin element ixtiyoriy yo'qotilgandan so'ng, emas, kerakli kontent? Men buni amalga oshirish yo'lini o'ylamaganman.
qo'shib qo'ydi muallif Donald Jenkins, manba

Bu sof CSS-da mumkin emas, lekin JavaScript yordamida amalga oshirilishi mumkin. Bu jQuery namunasi :

<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
qo'shib qo'ydi
Bu afzal ko'rgan yechim, lekin endi sizga jQuery kerak emas. Bu oddiy Javascript yordamida amalga oshirilishi mumkin.
qo'shib qo'ydi muallif micah, manba
Bu oddiy echim;)
qo'shib qo'ydi muallif fegemo, manba

Ushbu javoblar eskirgan. Endi siz buni CSS-da joy egallaydigan pseudo-sinfni tekshirish orqali amalga oshira olasiz.

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

U sizga normal bo'lmagan fondan boshlanadi va sizga to'liq bo'lmagan elektron pochta manzilini kiritganda pushti rangga aylanadi.

14
qo'shib qo'ydi
Afsuski, sizning yagona tekshirishingiz talab qilingan vaqtda ishlamaydi. Agar kerakli maydonga tegsa yoki kerakli joylar bilan ariza topshirishga urinib ko'rganingizda xato ko'rsatishi kerak. Bo'sh kerakli maydon hali ham joy egasini ko'rsatadi.
qo'shib qo'ydi muallif Björn Tantau, manba
Shaklga asoslangan holda yuboriladigan tugmani bir misol qo'shdim.
qo'shib qo'ydi muallif Carl, manba
Shuni ta'kidlash joizki, agar siz IE yoki Edge qo'llab-quvvatlashiga g'amxo'rlik qilsangiz, : placeholder-displayed so'z-tipi umuman qo'llab-quvvatlanmaydi. caniuse.com/#feat=css-placeholder-shown
qo'shib qo'ydi muallif Leo Napoleon, manba

CheckValidity-dan o'tmagan har bir element uchun submit hodisasi paydo bo'lishidan oldin formalar elementlari ustida ishlaydigan html5 yaroqsiz hodisasi mavjud. Ushbu hodisani, masalan, atrofdagi forma va ko'rsatish uchun sinfni qo'llash uchun foydalanishingiz mumkin: bu voqea sodir bo'lgandan so'ng noto'g'ri uslublar.

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

Sizning CSS quyidagi kabi ko'rinadi:

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

Birinchi satr asl uslubni o'chiradi, shuning uchun ariza elementlari sahifa yukida neytral ko'rinadi. Yaroqsiz voqea o'chib qolinishi (foydalanuvchi shaklni topshirishga urinayotganda), elementlar aniq ko'rinib turadi.

2
qo'shib qo'ydi

HTML5 ariza tekshiruvidan foydalanilayotganda, g'ildirakni qaytadan kashf etish o'rniga noto'g'ri topshirish/maydonlarni aniqlash uchun brauzerdan foydalanishga harakat qiling.

Shaklingizga 'yaroqsiz' sinf qo'shish uchun yaroqsiz hodisasini tinglang. "Yaroqsiz" klassi qo'shilsa, ariza shaklingizni CSS3 : pseudo selektorlari yordamida shaharga tashrif buyurishingiz mumkin.

Misol uchun:

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

Endi biz sizning "arizangizga" asoslangan holda ko'rib turganingizdek, sizning shaklingizni shunchaki xohlaysiz.

Misol uchun:

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
qo'shib qo'ydi
Er, bu g'ildirakni savoldan ko'ra ko'proq narsa emas deb o'ylaydimi?
qo'shib qo'ydi muallif Ry-, manba

Mozilla buni o'zingizning bilan bog`laydi: moz-ui-yaroqsiz pseudoclass ular bilan o'zaro aloqada bo'lgandan keyin faqat formlarga qo'llaniladi. MDN qo'llab-quvvatlanmasligi sababli buni tavsiya etmaydi. Biroq, uni Firefox uchun o'zgartirishingiz mumkin.

: foydalanuvchi yaroqsiz spesifikatorlari uchun 4-darajali maxsus ma'lumotlar mavjud xuddi shunga o'xshash xatti-harakatni ta'minlaydigan horizon.

Kechirasiz, bu yordam bermaydi, lekin umid qilamanki, u ba'zi kontekstni taklif qiladi.

1
qo'shib qo'ydi

Siz ularni faqat va ga ma'lum bir sinfga ega elementlar talab qiladigan qilib pushti qilib qo'yishingiz mumkin. Elementni tark qilganingizda ushbu sinfni qo'shadigan har bir kerakli elementga bir voqea işleyicisi qo'shing.

Bir narsa:

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

Va, albatta, u IE8da yoki undan pastda ishlamaydi, chunki (a) DOMContentLoaded nisbatan yangi va IE8 chiqqanda standart bo'lmagan, (b) IE8 attachEvent addEventListener o'rniga va (c) IE8 texnik jihatdan HTML-ni qo'llab-quvvatlamasa ham, : required haqida g'amxo'rlik qilmaydi. 5.

1
qo'shib qo'ydi

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
qo'shib qo'ydi

Yaxshi yo'l CSS kodlari bilan : invalid,: valid va so'ngra ba'zi bir JavaScript-ni kiritish maydonining diqqat-e'tibori tekshirilganligini tekshirish.

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
qo'shib qo'ydi