एचटीएमएल 5 फॉर्म सत्यापन/आवश्यक पॉपअप

Question

के लिए सीएसएस ओवरराइड करें मैं एचटीएमएल 5 फॉर्म पर एक आवश्यक फ़ील्ड के लिए डिफ़ॉल्ट पॉपअप को ओवरराइड कैसे कर सकता हूं?

उदाहरण: http://jsfiddle.net/uKZGp/ एचटीएमएल

<form> 
<input type="text" name="name" id="name" placeholder="Name*" required="required" /> 
<input type="submit" /> 
</form> 

नोट (वाकई सबमिट बटन पर क्लिक करें पॉपअप को देखने के लिए कर रहे हैं): आप Google Chrome या Firefox जैसे एक एचटीएमएल 5 ब्राउज़र के साथ इस देखने चाहिए।

यह लिंक मेरे सवाल का समाधान नहीं करता है, लेकिन यह किसी को बॉक्स के बाहर लगता है हो सकता है:

• http://www.the-art-of-web.com/html/html5-form-validation/
• http://adhockery.blogspot.com/2011/03/styling-with-html5-form-validation.html

Answer 1

यह एचटीएमएल 5 के साथ ही मान्यता शैली बदलने के लिए असंभव है/CSS3 के।

यह ब्राउज़र का हिस्सा है।

document.getElementById("name").setCustomValidity("Lorum Ipsum"); 

लेकिन, जैसा कि इस उदाहरण में दिखाया गया: http://jsfiddle.net/trixta/qTV3g/, आप पैनल शैली jQuery का उपयोग करके ओवरराइड कर सकते हैं केवल विशेषता मैं पता लगा बदलने के लिए इस उदाहरण का उपयोग करते हुए त्रुटि संदेश है। यह एक प्लगइन नहीं है, यह एक कोर कार्यक्षमता है, Webshims नामक एक डोम lib का उपयोग करता है और, निश्चित रूप से, पॉपअप को स्टाइल करने के लिए कुछ सीएसएस।

मुझे यह bug post शीर्षक Improve form validation error panel UI में बहुत उपयोगी उदाहरण मिला।

मुझे लगता है कि यह सबसे अच्छा समाधान है जिसे आप पा सकते हैं और बुनियादी (बदसूरत) त्रुटि पैनल को ओवरराइड करने का एकमात्र तरीका है।

सम्मान।

Answer 2

वर्तमान डिफ़ॉल्ट ईमेल सत्यापन वर्तमान में सबसे खराब चीज़ों में से एक है जिसे मैंने कभी भी Google डिज़ाइन देखा है!

लेकिन यह तो तुम, यह करने के लिए कुछ परिवर्तन कर सकते हैं यदि आप तो इन मूल्यों को पुनर्स्थापित करने के लिए याद एक मानक div में समाहित किया जा रहा है।

मैं तुम्हें तो HTML टैग के अंदर divs के लिए इन के ऊपर लिख यदि ऐसा है तो

div { 
    background: rgba(0,0,0,0.8); 
    color: #333; 
    font-size: 11px; 
    border: 0; 
    box-shadow: none; 
} 

की तरह, आप पृष्ठभूमि, फ़ॉन्ट आकार और रंग, सीमा और छाया को बदल सकते हैं मिल गया है, तो केवल मान्यता अंततः है लग जाना।

html div { 
    background: rgba(0,0,0,1); 
    color: #000; 
    font-size: 12px; 
} 

दुर्भाग्य से प्रमुख विशेषताओं, इस तरह के margin और font-weight के रूप में जिसे आप परिवर्तित करना चाहते हैं में से कुछ, परिवर्तित नहीं किया जा सकता है।

एनबी। यह तकनीक वर्तमान में केवल क्रोम (12) के लिए काम करती है, यानी फ़ायरफ़ॉक्स 4, ओपेरा 11 या सफारी (विन 7) के लिए काम नहीं करती है।

Answer 3

वेबकिट के लिए, आप ::-webkit-validation-bubble-message का उपयोग कर सकते हैं।उदाहरण इसे छिपाने के लिए के लिए:

::-webkit-validation-bubble-message { display: none; } 

वहाँ भी कर रहे हैं:

::-webkit-validation-bubble-arrow-clipper{} 
::-webkit-validation-bubble-arrow{} 
::-webkit-validation-bubble{} 
::-webkit-validation-bubble-top-outer-arrow{} 
::-webkit-validation-bubble-top-inner-arrow{} 
::-webkit-validation-bubble-message{} 

अद्यतन: क्रोम की अनुमति नहीं है स्टाइल फ़ॉर्म सत्यापन बुलबुले अब: https://code.google.com/p/chromium/issues/detail?id=259050

Firefox के लिए आप :-moz-placeholder {} साथ प्रयोग कर सकते ।

Answer 4

मुझे यकीन नहीं है कि क्यों, लेकिन ::-webkit-validation-bubble-message { display: none; } मेरे लिए काम नहीं करेगा। मैं अमान्य घटना के डिफ़ॉल्ट व्यवहार को रोकने से वांछित परिणाम (एफएफ 1 9, क्रोम संस्करण 29.0.1547.76 मीटर में परीक्षण) प्राप्त करने में सक्षम था, जो बबल नहीं करता है।

document.addEventListener('invalid', (function(){ 
     return function(e){ 
      //prevent the browser from showing default error bubble/ hint 
      e.preventDefault(); 
      // optionally fire off some custom validation handler 
      // myvalidationfunction(); 
     }; 
    })(), true); 

आशा है कि दूसरों की मदद करें - मैंने इसके लिए हर जगह देखा।

Answer 5

मैं समझता हूं कि यह एक पुराना सवाल है लेकिन मुझे यह पुस्तकालय मिला है जो मुझे लगता है कि यह अन्य लोगों के लिए फायदेमंद हो सकता है।

http://afarkas.github.io/webshim/demos/index.html

Answer 6

इनपुट प्रकार के एक वर्ग संलग्न। और वहाँ संदेश प्रदर्शित किया। जो थोड़ा अनुकूलन के बाद मदद करता है। वर्किंग codepen:

document.querySelector('#frm').addEventListener('submit', e => { 
 
    e.preventDefault(); 
 
    e.currentTarget.classList.add('submitted'); 
 
});

body { 
 
    font-family: Helvetica, sans-serif; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
     -ms-flex-direction: column; 
 
      flex-direction: column; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: #ffa500; 
 
} 
 
form > div { 
 
    position: relative; 
 
    margin-bottom: 10px; 
 
} 
 
.theTooltip { 
 
    -webkit-backface-visibility: hidden; 
 
      backface-visibility: hidden; 
 
    will-change: opacity, visibility; 
 
    max-width: 250px; 
 
    border-radius: 5px; 
 
    background-color: rgba(0,0,0,0.7); 
 
    padding: 15px; 
 
    color: #fff; 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    position: absolute; 
 
    -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; 
 
    -webkit-transform: translate(15%, -50%); 
 
      transform: translate(15%, -50%); 
 
    top: 50%; 
 
    left: auto; 
 
    right: auto; 
 
    bottom: auto; 
 
    visibility: hidden; 
 
    margin: 0; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.3s ease-out; 
 
    transition: opacity 0.3s ease-out; 
 
    z-index: 100; 
 
} 
 
.theTooltip:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    top: 50%; 
 
    margin-top: -10px; 
 
    left: -10px; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 10px solid transparent; 
 
    border-right: 10px solid rgba(0,0,0,0.7); 
 
} 
 
label { 
 
    display: inline-block; 
 
    vertical-align: center; 
 
} 
 
input { 
 
    background: #fff; 
 
    border: 1px solid transparent; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    overflow: visible; 
 
    margin: 0; 
 
    outline: 0; 
 
    vertical-align: center; 
 
    text-decoration: none; 
 
    width: auto; 
 
    border-radius: 3px; 
 
    cursor: text; 
 
    padding: 7px; 
 
} 
 
input:focus, 
 
input:active { 
 
    outline: none; 
 
} 
 
.submitted input:invalid { 
 
    border: 1px solid #f00; 
 
} 
 
.submitted input:invalid ~ .theTooltip { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 
.submitted input:valid ~ .theTooltip { 
 
    -webkit-transition: opacity 0.3s, visibility 0s 0.3s; 
 
    transition: opacity 0.3s, visibility 0s 0.3s; 
 
}

<form id="frm" action="action"> 
 
    <div> 
 
    <label>Email</label> 
 
    <input type="email" required="required"/><span class="theTooltip">Invalid email</span> 
 
    </div> 
 
    <div> 
 
    <button formnovalidate="formnovalidate">OK</button> 
 
    </div> 
 
</form>