आवश्यक विशेषता HTML5

Question 1

अपने वेब एप्लिकेशन के भीतर मैं अपने फ़ॉर्म फ़ील्ड के लिए कुछ कस्टम सत्यापन का उपयोग कर रहा हूं। उसी रूप में मेरे पास दो बटन हैं: एक को वास्तव में फ़ॉर्म को रद्द करने और दूसरे को फ़ॉर्म को रद्द / रीसेट करने के लिए।

ज्यादातर मैं सफारी का उपयोग अपने डिफ़ॉल्ट ब्राउज़र के रूप में करता हूं। अब सफारी 5 बाहर है और अचानक मेरे रद्द / रीसेट बटन ने काम नहीं किया। हर बार जब मैंने रीसेट बटन मारा तो मेरे फॉर्म के पहले क्षेत्र को फोकस नहीं मिला। हालाँकि यह मेरे कस्टम रूप सत्यापन के समान व्यवहार है। जब एक और ब्राउज़र के साथ इसे आज़माते हैं तो सब कुछ ठीक काम करता है मैं एक सफारी 5 समस्या होना था।

मैंने अपने जावास्क्रिप्ट कोड में थोड़ा बदलाव किया और मुझे पता चला कि निम्नलिखित लाइन समस्या पैदा कर रही थी:

document.getElementById("somefield").required = true;

यह सुनिश्चित करने के लिए कि वास्तव में मैं एक परीक्षण परिदृश्य बनाया समस्या होगी:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>

<body>
    <form id="someform">
        <label>Name:</label>&nbsp;<input type="text" id="name" required="true" /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required="true" /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>

मुझे जो उम्मीद थी वो होगा। पहले फ़ील्ड "नाम" को स्वचालित रूप से फ़ोकस मिला।

किसी और को इस में ठोकर खाई?

Question 2

मैं सिर्फ सफारी 5 के साथ इस मुद्दे में भाग गया और यह कुछ समय के लिए ओपेरा 10 के साथ एक मुद्दा रहा है, लेकिन मैंने इसे ठीक करने के लिए कभी समय नहीं बिताया। अब मुझे इसे ठीक करने की आवश्यकता है और आपके पोस्ट को देखा लेकिन फॉर्म को रद्द करने के तरीके पर अभी तक कोई समाधान नहीं हुआ है। बहुत खोज के बाद आखिरकार मुझे कुछ मिला:

http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate

<input type=submit formnovalidate name=cancel value="Cancel">

सफारी 5 और ओपेरा 10 पर काम करता है।

Question 3

ध्यान दें कि

<input type="text" id="car" required="true" />

गलत है, यह एक होना चाहिए

<input type="text" id="car" required />
<input type="text" id="car" required="" />
<input type="text" id="car" required='' />
<input type="text" id="car" required=required />
<input type="text" id="car" required="required" />
<input type="text" id="car" required='required' />

ऐसा इसलिए है क्योंकि trueमान बताता है कि falseमूल्य प्रपत्र नियंत्रण को वैकल्पिक बना देगा, जो कि ऐसा नहीं है।

Question 4

यदि मैं आपके प्रश्न को सही ढंग से समझता हूं, तो क्या यह तथ्य है कि requiredविशेषता सफारी में डिफ़ॉल्ट व्यवहार करती है जो आपको भ्रमित कर रही है? यदि ऐसा है तो देखें: http://w3c.github.io/html/sec-forms.html#the-required-attribute

required HTML 5 में एक कस्टम विशेषता नहीं है। यह कल्पना में परिभाषित किया गया है, और ठीक उसी तरह से उपयोग किया जाता है जिस तरह से आप वर्तमान में इसका उपयोग कर रहे हैं।

संपादित करें : ठीक है, ठीक नहीं है । जैसा कि ms2ger ने बताया है, requiredविशेषता एक बूलियन विशेषता है , और यहां HTML 5 युक्ति के बारे में उन लोगों को कहना है:

नोट: मूल्य "सच" और "झूठे" बूलियन विशेषताओं पर अनुमति नहीं है। झूठे मूल्य का प्रतिनिधित्व करने के लिए, विशेषता को पूरी तरह से छोड़ना होगा।

देखें: http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes

Question 5

सफारी 7.0.5 अभी भी इनपुट क्षेत्रों के सत्यापन के लिए अधिसूचना का समर्थन नहीं करता है।

इसे दूर करने के लिए इस तरह से फॉलबैक स्क्रिप्ट लिखना संभव है: http://codepen.io/ashblue/pen/KyvmA

यह देखने के लिए कि HTML5 / CSS3 की विशेषताएँ ब्राउज़रों द्वारा समर्थित हैं: http://caniuse.com/form-validation

function hasHtml5Validation () {
  //Check if validation supported && not safari
  return (typeof document.createElement('input').checkValidity === 'function') && 
    !(navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0);
}

$('form').submit(function(){
    if(!hasHtml5Validation())
    {
        var isValid = true;
        var $inputs = $(this).find('[required]');
        $inputs.each(function(){
            var $input = $(this);
            $input.removeClass('invalid');
            if(!$.trim($input.val()).length)
            {
                isValid = false;
                $input.addClass('invalid');                 
            }
        });
        if(!isValid)
        {
            return false;
        }
    }
});

SASS / LESS:

input, select, textarea {
    @include appearance(none);
    border-radius: 0px;

    &.invalid {
        border-color: red !important;
    }
}

Question 6

कस्टम विशेषताओं पर एक छोटा नोट: HTML5 सभी प्रकार की कस्टम विशेषताओं की अनुमति देता है, जब तक कि वे कण के साथ उपसर्ग कर रहे हैं data-, अर्थात data-my-attribute="true"।

Question 7

ठीक है। उसी समय जब मैं अपना प्रश्न लिख रहा था कि मेरे एक सहकर्मी ने मुझे अवगत कराया कि यह वास्तव में एचटीएमएल 5 व्यवहार है। Http://dev.w3.org/html5/spec/Overview.html#the-required-attribute देखें

HTML5 में लगता है कि एक नई विशेषता है "आवश्यक"। और सफारी 5 में पहले से ही इस विशेषता के लिए एक कार्यान्वयन है।

Question 8

बस अपने फॉर्म के नीचे निम्नलिखित डालिए। सुनिश्चित करें कि आपके इनपुट फ़ील्ड हैं required।

<script>
    var forms = document.getElementsByTagName('form');
    for (var i = 0; i < forms.length; i++) {
        forms[i].noValidate = true;
        forms[i].addEventListener('submit', function(event) {
            if (!event.target.checkValidity()) {
                event.preventDefault();
                alert("Please complete all fields and accept the terms.");
            }
        }, false);
    }
</script>