एचटीएमएल 5/जेएस/jQuery: अमान्य इनपुट पर, अमान्य

Question

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

1. उपयोगकर्ता #newpassword1 में पासवर्ड abc प्रवेश करती है।
2. उपयोगकर्ता टैब #newpassword2 पर।
3. उपयोगकर्ता def में #newpassword2 में प्रवेश करता है।
4. उपयोगकर्ता टैब दूर।
5. सत्यापन एक मेल नहीं खाता है, और #newpassword1और#newpassword2 दोनों को अमान्य के रूप में चिह्नित करता है।

मुझे पता है कि मैं एक घटना का लक्ष्य के रूप में e.target.setCustomValidity(...) का उपयोग करके अमान्य चिह्नित कर सकते हैं, लेकिन मैं बहुत अच्छी तरह से जावास्क्रिप्ट की घटना मॉडल समझ में नहीं आता और को समझ नहीं सकता अमान्य के रूप में एक अलग तत्व चिह्नित करने के लिए कैसे घटना लक्ष्य की अपनी अमान्यता के आधार पर।

यह है कि मैं का उपयोग करने के कोशिश कर रहा हूँ (गैर काम कर रहे) कोड के प्रासंगिक अंश है:

if ($('#newpassword1').val() != $('#newpassword2').val()) { 
    errorMessage = "The new passwords you've entered don't match."; 

    $('#newpassword1, #newpassword2').setCustomValidity(errorMessage); 
} 

यह लगता है जैसे कि यह, काम करना चाहिए intuitively, लेकिन निश्चित रूप से ऐसा नहीं है। त्रुटि बस TypeError: $(...).setCustomValidity is not a function है।

कृपया ध्यान दें: मैं एक क्षेत्र के लिए एक लाल अंगूठी या जो कुछ भी जोड़ने के बारे में नहीं कह रहा हूँ, मैं चाहता हूँ कि यह वास्तव में को अमान्य घोषित किया (के रूप में, अपने validity.valid संपत्ति वापसी false है)।

क्या ऐसा करना संभव है?

धन्यवाद!

Answer 1

नीचे दिए गए कोड को आज़माएं। आपको वह त्रुटि मिल रही है क्योंकि jQuery चयनित ऑब्जेक्ट्स की एक सरणी देता है और setCustomValidity देशी इनपुट तत्वों द्वारा समर्थित है और jquery ऑब्जेक्ट्स नहीं है, तो आप उस त्रुटि को देख रहे हैं।

$('#newpassword1, #newpassword2').each(function() { 
    this.setCustomValidity(errorMessage) 
}); 

Answer 2

<div class="cabinet_settings_header cabinet_header">Список регионов работы для выбора</div>    
      <div class="registration_region_select checkbox-group required"> 
       <?for($i = 0; $i < sizeof($regions); $i++):?>      
        <label for="region_id_<?=$regions[$i]['region_id']?>"> 
         <input type="checkbox" name="region_id[]" value="<?=$regions[$i]['region_id']?>" id="region_id_<?=$regions[$i]['region_id']?>" /> 
         <?=$regions[$i]['name']?> 
        </label> 
       <?endfor;?> 
      </div> 

<div class="cabinet_settings_header cabinet_header">Проверка выбора регионов работы (разрешмет отправку формы, если минимум 1 выбран)</div>    

     $('.checkbox-group.required input').on('change', function(){ 
      checkRegions(); 
     }); 


     function checkRegions(){ 

      checked_counter = $('.checkbox-group.required :checkbox:checked').length;    

      if(checked_counter > 0){ 
       $('.checkbox-group.required #region_id_2')[0].setCustomValidity(''); 

      }else{ 
       $('.checkbox-group.required #region_id_2')[0].setCustomValidity('Выберите хотябы 1 из вариантов'); 
      } 
     } 

$(document).ready(function() { 

      checkRegions(); 


      $("form").submit(function(event){ 
        if($('.checkbox-group.required :checkbox:checked').length <= 0){       
         $('.checkbox-group.required #region_id_2').focus(); 
         event.preventDefault(); 

        } 


      }) 


     });