देरी एचटीएमएल 5: पहली घटना तक अमान्य छद्म वर्ग

Question

मैंने हाल ही में पाया है कि :invalid छद्म-वर्ग पृष्ठ लोड होने पर required फॉर्म तत्वों पर लागू होता है। उदाहरण के लिए, यदि आपके पास यह कोड है:

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

तब आपका पृष्ठ उस पर एक खाली गुलाबी इनपुट तत्व के साथ लोड होगा। एचटीएमएल 5 में निर्मित सत्यापन होना बहुत अच्छा है, लेकिन मुझे नहीं लगता कि ज्यादातर उपयोगकर्ता फॉर्म को मान्य करने की अपेक्षा करते हैं कि उन्हें किसी भी मूल्य को दर्ज करने का मौका मिलने से पहले। छद्म वर्ग के आवेदन में देरी करने का कोई तरीका है जब तक कि उस तत्व को प्रभावित करने वाली पहली घटना (फॉर्म सबमिट, धुंधला, परिवर्तन, जो भी उचित हो)? जावास्क्रिप्ट के बिना ऐसा करना संभव है?

Answer 1

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/

जैसा कि आप अनुमान लगाएंगे, और जैसा कि आप पहेली से देखेंगे, यह तकनीक केवल तत्व के फोकस पर सत्यापन स्टाइल दिखाती है। जैसे ही आप फोकस करते हैं, स्टाइल को छोड़ दिया जाता है, भले ही यह मान्य है या नहीं। किसी भी माध्यम से आदर्श नहीं है।

Answer 2

आप इसे बना सकते हैं ताकि केवल उन तत्वों को जिनके पास और आवश्यक हों, गुलाबी हैं। जब आप तत्व छोड़ते हैं तो उस वर्ग को जोड़ते हुए प्रत्येक आवश्यक तत्व में एक ईवेंट हैंडलर जोड़ें।

कुछ की तरह:

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

और निश्चित रूप से, यह के रूप में नीचे दिए गए IE8 में है या के रूप में (क) DOMContentLoaded अपेक्षाकृत नई है और, जब IE8 बाहर आया नहीं मानक था काम नहीं करेगा (ख) IE8 डोम मानक addEventListener से attachEvent का उपयोग करता है बल्कि, और (ग) IE8 वैसे भी :required के बारे में देखभाल करने के लिए, के रूप में यह तकनीकी रूप से एचटीएमएल का समर्थन नहीं करता 5.

Answer 3

यह शुद्ध सीएसएस में संभव नहीं है नहीं जा रहा है, लेकिन जावास्क्रिप्ट के साथ किया जा सकता है। यह एक jQuery example है:

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

Answer 4

एचटीएमएल 5 फ़ॉर्म सत्यापन का उपयोग करते समय, बल्कि पहिया फिर से खोज करने की तुलना में अमान्य प्रस्तुतियाँ/क्षेत्रों के लिए पता लगाने के लिए, ब्राउज़र का उपयोग करने का प्रयास करें।

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

Answer 5

एक एचटीएमएल 5 invalid घटना है कि फार्म तत्वों पर सक्रिय होने से पहले submit घटना प्रत्येक तत्व है कि checkValidity पास नहीं होती है। आप इस घटना का उपयोग कक्षा के लिए आसपास के रूप में प्रदर्शित करने के लिए कर सकते हैं और प्रदर्शन: इस घटना के बाद ही अमान्य शैलियों।

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

आपका सीएसएस तो कुछ इस तरह दिखेगा:

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

पहली पंक्ति डिफ़ॉल्ट स्टाइल निकाल देता है, इसलिए फार्म तत्वों पृष्ठ लोड पर तटस्थ देखो। जैसे ही अमान्य घटना आग लगती है (जब कोई उपयोगकर्ता फॉर्म जमा करने का प्रयास करता है), तत्वों को स्पष्ट रूप से अमान्य प्रदान किया जाता है।

Answer 6

मैंने अपने कोडबेस में इससे निपटने के लिए एक छोटा सा शिम बनाया। मैं विशेषता के साथ novalidate संपत्ति वाले <form/> तत्व के साथ बस शुरू करता हूं। यह उस प्रकार की पहली घटना के लिए देखता है। इस तरह आप अभी भी फॉर्म स्टाइल के लिए देशी :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'); 
     }); 
    }); 
}); 

Answer 7

एक अच्छा तरीका एक सीएसएस वर्गों के साथ सार :invalid, :valid है और फिर कुछ जावास्क्रिप्ट यदि इनपुट क्षेत्र ध्यान केंद्रित किया गया था या नहीं की जाँच करने के।

सीएसएस:

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

जे एस:

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

Answer 8

ये जवाब पुराने हो चुके हैं। अब आप सीएसएस के साथ प्लेसहोल्डर छद्म-वर्ग की जांच करके ऐसा कर सकते हैं।

input:not(:placeholder-shown):invalid { 
 
    background-color: salmon; 
 
}

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

यह एक सामान्य पृष्ठभूमि के साथ शुरू होता है और जैसा कि आप आप इसे में अधूरा ई मेल पता दर्ज गुलाबी हो जाता है।