एचटीएमएल 5 फॉर्म सत्यापन को ट्रिगर करना

Question

मेरे पास कई अलग-अलग फ़ील्ड्स के साथ एक फॉर्म है। मेरे पास कुछ जावास्क्रिप्ट हैं जो उपयोगकर्ताओं को एक समय में फ़ील्ड सेट प्रदर्शित करता है। HTML5 सत्यापन का समर्थन करने वाले ब्राउज़रों के लिए, मैं इसका उपयोग करना पसंद करूंगा। हालाँकि, मुझे इसे अपनी शर्तों पर करने की आवश्यकता है। मैं JQuery का उपयोग कर रहा हूँ।

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

आदर्श रूप में, जैसा कि उपयोगकर्ता एक तत्व पर ध्यान केंद्रित करता है, सत्यापन होगा।

वर्तमान में नौसिखिया जा रहा है और जावास्क्रिप्ट का उपयोग कर रहा है। देशी विधि का उपयोग करना पसंद करेंगे। :)

Answer 1

आप मूल सत्यापन UI को ट्रिगर नहीं कर सकते, लेकिन आप आसानी से मनमाना इनपुट तत्वों पर सत्यापन एपीआई का लाभ उठा सकते हैं:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

पहली घटना checkValidityहर इनपुट तत्व पर फायर करती है जैसे ही वह फ़ोकस खोता है, यदि तत्व invalidतब है तो संबंधित ईवेंट को दूसरी ईवेंट हैंडलर द्वारा निकाल दिया और फँसा दिया जाएगा। यह एक तत्व पर ध्यान केंद्रित करता है, लेकिन यह काफी कष्टप्रद हो सकता है, मुझे लगता है कि आपके पास त्रुटियों के बारे में सूचित करने के लिए एक बेहतर समाधान है। यहाँ ऊपर मेरे कोड का एक कार्यशील उदाहरण है ।

Comments

गोल्डन वाक्य "आप मूल सत्यापन यूआई को ट्रिगर नहीं कर सकते हैं" । मेरे मामले में (कस्टम जेएस ट्रिक्स + ब्राउज़र एचटीएमएल 5 सत्यापन + यूआई टूलटिप्स) मेरे पास दोनों को पाने के लिए अंत में छिपे हुए सबमिट बटन के लिए जाने के अलावा कोई विकल्प नहीं था

— लुकमडो

यदि आपके फॉर्म में एक सबमिट बटन नहीं है, तो आप एक नकली कर सकते हैं:$('<input type="submit">').hide().appendTo($myForm).click().remove();

— दर्शन

@philfreo form.submit()बस ठीक काम नहीं करेगा ? या HTML5 को अब सत्यापन के लिए सबमिट बटन की आवश्यकता है?

— मत्तीसदा

@Mattisdada कॉलिंग .submit()मेरे लिए काम नहीं करता है। @ फिल्फ़्रेओ का समाधान काम करता है। हम्म।

— जीरो 3

Answer 2

TL; DR: पुराने ब्राउज़रों के बारे में परवाह नहीं है? का उपयोग करें form.reportValidity()।

विरासत ब्राउज़र समर्थन की आवश्यकता है? पढ़ते रहिये।

---

वास्तव में सत्यापन को मैन्युअल रूप से ट्रिगर करना संभव है।

मैं पुन: प्रयोज्य में सुधार करने के लिए अपने उत्तर में सादे जावास्क्रिप्ट का उपयोग करूँगा, कोई jQuery की आवश्यकता नहीं है।

---

निम्नलिखित HTML फॉर्म को मानें:

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

और आइए जावास्क्रिप्ट में हमारे यूआई तत्वों को पकड़ो:

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

---

इंटरनेट एक्सप्लोरर जैसी विरासत ब्राउज़रों के लिए समर्थन की आवश्यकता नहीं है? यह आपके लिए है।

सभी आधुनिक ब्राउज़र तत्वों पर विधि का समर्थन करते हैं।reportValidity()form

triggerButton.onclick = function () {
    form.reportValidity()
}

बस, हो गया। इसके अलावा, इस दृष्टिकोण का उपयोग करके यहां एक सरल कोडपैन है ।

---

पुराने ब्राउज़रों के लिए दृष्टिकोण

नीचे एक विस्तृत विवरण दिया गया है कि reportValidity()पुराने ब्राउज़रों में कैसे अनुकरण किया जा सकता है।

हालांकि, आप अपने आप को कॉपी और अपनी परियोजना में उन कोड ब्लॉक पेस्ट की जरूरत नहीं है - वहाँ एक है ponyfill / polyfill आप के लिए आसानी से उपलब्ध।

जहां reportValidity()समर्थित नहीं है, हमें ब्राउज़र को थोड़ा सा ट्रिक करने की आवश्यकता है। तो, हम क्या करेंगे?

1. कॉल करके फॉर्म की वैधता की जांच करें form.checkValidity()। यह हमें बताएगा कि क्या फॉर्म वैध है, लेकिन सत्यापन यूआई नहीं दिखाएगा।
2. यदि फ़ॉर्म अमान्य है, तो हम एक अस्थायी सबमिट बटन बनाते हैं और उस पर एक क्लिक ट्रिगर करते हैं। चूंकि फॉर्म वैध नहीं है, हम जानते हैं कि यह वास्तव में सबमिट नहीं होगा , हालांकि, यह उपयोगकर्ता को सत्यापन संकेत दिखाएगा। हम अस्थायी रूप से अस्थायी रूप से सबमिट बटन को हटा देंगे, इसलिए यह उपयोगकर्ता को कभी भी दिखाई नहीं देगा।
3. यदि फॉर्म वैध है, तो हमें बिल्कुल भी हस्तक्षेप करने और उपयोगकर्ता को आगे बढ़ने की आवश्यकता नहीं है।

---

कोड में:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

यह कोड बहुत अधिक किसी भी सामान्य ब्राउज़र में काम करेगा (मैंने इसे IE11 में सफलतापूर्वक नीचे परीक्षण किया है)।

यहाँ एक काम कोड उदाहरण है।

Answer 3

कुछ हद तक, आप triggerएचटीएमएल 5 को सत्यापन प्रस्तुत कर सकते हैं और फार्म जमा किए बिना उपयोगकर्ता को संकेत दिखा सकते हैं !

दो बटन, एक मान्य के लिए, एक जमा के लिए

onclickवैद्युत ध्वज पर एक श्रोता को एक वैश्विक ध्वज (मान justValidate) सेट करने के लिए कहें, यह इंगित करने के लिए कि प्रपत्र की मान्यता की जाँच करें।

और झंडे को झूठा onclickसेट करने के लिए सबमिट बटन पर एक श्रोता सेट करें justValidate।

फिर onsubmitफॉर्म के हैंडलर में, आप justValidateलौटने के मूल्य को तय करने के लिए ध्वज की जांच करते हैं और preventDefault()फॉर्म जमा करने के लिए रोकते हैं। जैसा कि आप जानते हैं, एचटीएमएल 5 फॉर्म सत्यापन (और उपयोगकर्ता के लिए GUI संकेत) onsubmitघटना से पहले विकृत है , और यहां तक ​​कि अगर फॉर्म वैध है तो आप गलत या चालान लौटाकर फॉर्म सबमिट रोक सकते हैं preventDefault()।

और, HTML5 में आपके पास फ़ॉर्म के सत्यापन की जांच करने का एक तरीका है: form.checkValidity()फिर, आप यह जान सकते हैं कि फॉर्म आपके कोड में मान्य है या नहीं।

ठीक है, यहाँ डेमो है: http://jsbin.com/buvuku/2/edit

Answer 4

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

Answer 5

फ़ील्ड में HTML5 सत्यापन जोड़ने या निकालने के लिए कुछ हद तक आसान है।

 $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

Answer 6

मुझे यह पता लगता है कि ट्रिक: फॉर्म फॉर्म को हटा दें target, फिर फॉर्म सबमिट करने और संकेत दिखाने के लिए सबमिट बटन का उपयोग करें, चेक करें कि क्या जावास्क्रिप्ट के माध्यम से फॉर्म वैध है, और फिर जो भी पोस्ट करें। निम्नलिखित कोड मेरे लिए काम करता है:

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

---

<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

Comments

धन्यवाद! यह jQuery के लिए वास्तविक समाधान है।

— वुंग

Answer 7

HTML कोड:

<form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

जावास्क्रिप्ट (Jquery का उपयोग करके):

<script type="text/javascript">

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

$(document).ready(function(){
// using button outside trigger click
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});
</script>

आशा है कि यह आपकी मदद करेगा

Comments

यह सवाल का जवाब क्यों दे रहा है?

— निष्पादन योग्य

यह एचटीएमएल 5 को बिना सबमिट किए मान्य करता है। और अपने उद्देश्य के लिए फॉर्म डेटा का उपयोग करें: form_data = $ ('। validateDontSubmit'); serializeArray ();

— Hưng Trịnh

Answer 8

var field = $("#field")
field.keyup(function(ev){
    if(field[0].value.length < 10) {
        field[0].setCustomValidity("characters less than 10")
        
    }else if (field[0].value.length === 10) {
        field[0].setCustomValidity("characters equal to 10")
        
    }else if (field[0].value.length > 10 && field[0].value.length < 20) {
        field[0].setCustomValidity("characters greater than 10 and less than 20")
        
    }else if(field[0].validity.typeMismatch) {
    	field[0].setCustomValidity("wrong email message")
        
    }else {
    	field[0].setCustomValidity("") // no more errors
        
    }
    field[0].reportValidity()
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" id="field">

Comments

क्या आप और स्पष्टीकरण जोड़ेंगे?

— ज़मग

Answer 9

जब एक बहुत ही जटिल (विशेष रूप से अतुल्यकालिक) सत्यापन प्रक्रिया होती है, तो एक सरल समाधान होता है:

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>

Answer 10

इस समस्या को हल करने का दूसरा तरीका:

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});

Comments

मेरे लिए काम नहीं करता, मुझे मिलता है: Uncaught TypeError: $(...).oninvalid is not a functionऔर मैं इसे jQuery डॉक्स में नहीं देखता।

— MECU

मुझे लगता है कि यह "अमान्य" कहा जाना चाहिए न कि "ऑनिनवलिड" जैसा कि आप यहां jQuery का उपयोग कर रहे हैं।

— ऐनाडॉन