कोणीयजेएस - तीन इनपुट फ़ील्ड फोन नंबर सत्यापन

Question

मैं फोन नंबर फ़ील्ड को सत्यापित करने का प्रयास कर रहा हूं। उपयोगकर्ता अगले स्थान नाम फ़ील्ड में प्रवेश करने के बाद फ़ील्ड मान्य हो जाते हैं। fiddle फोन नंबर फ़ील्ड को अगले फोन इनपुट फ़ील्ड में ऑटो टैब की आवश्यकता होती है। [क्षेत्र कोड (3 अंक) फोकस दर्ज करने पर अगले 3 अंकों के फोन इनपुट फ़ील्ड पर जाना चाहिए)। आखिरी 4 अंकों पर ध्यान केंद्रित करते समय।

<form id="aidLocationForm" class="well form-inline"> 
    <div class="control-group phone-group"> 
     <label for="phone1" class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 control-label">Primary contact number</label> 
     <div class="controls"> 
     <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$"> 
     <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$"> 
     <input type="text" value="" maxlength="4" ng-minlength="4" ng-maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" aria-label="Primary contact number" pattern="/^[0-9]{4}$"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label for="primaryLocationName" class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 control-label aid-primary-location-location-lbl">Primary Location Name</label> 
     <!-- end of label --> 
     <div class="controls"> 
     <input type="text" name="primaryLocationName" id="primaryLocationName" class="col-xs-12 col-sm-9 col-md-6 col-lg-6 col-xl-6 aid-primary-location-name-input" ng-model="" required placeholder="Enter the city followed by location" size="50" maxlength="50" 
     aria-disabled="true" aria-label="Primary Location Name"> 
     </div> 
    </div> 
    <button type="submit" class="btn">Sign in</button> 
    </form> 

Answer 1

आप इसे पूरा करने के लिए ईवेंट हैंडलिंग के साथ निर्देश का उपयोग कर सकते हैं।

1) लोड कोणीय से पहले अपने बेला में jQuery ताकि आप कोणीय कार्यों के अंदर jQuery के चयनकर्ताओं तक पहुँच प्राप्त:

Updated Fiddle

महत्वपूर्ण परिवर्तन निम्नलिखित शामिल हैं।

2) उचित निर्देश (नोट के साथ एक कंटेनर में आपके इनपुट लपेटें: यह भी restrict: "A" के बजाय restrict: "E" के साथ एक एकल तत्व के साथ किया जा सकता है और बच्चे एचटीएमएल) को परिभाषित करने के template संपत्ति का उपयोग

3) इनपुट पर input ईवेंट को संभालें और यदि लंबाई maxlength संपत्ति में मान से अधिक है, तो अगला इनपुट फ़ोकस करें। यह jQuery के साथ वास्तव में सरल है, लेकिन यदि आप वास्तव में चाहते हैं तो बिना किया जा सकता है।

4) इनपुट पर सत्यापन करने के लाखों तरीके हैं, लेकिन मैंने एक सरल विधि शामिल की है।

एचटीएमएल

<div phone-input> 
    <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" 
     aria-label="Primary contact number" pattern="^[0-9]{3}$"> 
    <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" 
     aria-label="Primary contact number" pattern="^[0-9]{3}$"> 
    <input type="text" value="" maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" 
     aria-label="Primary contact number" pattern="^[0-9]{4}$"> 
</div> 

कोणीय निर्देशक

.directive("phoneInput", function() { 
    return { 
    restrict: "A", 
    link: function (scope, element, attrs) { 
     function checkForErrors(input) { 
     var errors = ""; 
     if (!new RegExp(input.attr("pattern")).test(input.val())) { 
      errors += `Field must contain ${input.attr("maxlength")} numbers!\n`; 
     } 
     return errors; 
     } 
     element.on("input", "input", function() { 
     var trigger = $(this); 
     if (trigger.val().length >= trigger.attr("maxlength")) { 
      trigger.blur().next().focus(); 
     } 
     }); 

     element.on("blur", "input", function() { 
     var trigger = $(this); 
     var errors = checkForErrors(trigger); 
     trigger.attr("title", errors); 
     if (trigger.val().trim() === "") { 
      trigger.addClass("invalid-field"); 
      trigger.attr("title", "Field cannot be empty!"); 
     } 
     else if (errors === "") { 
      trigger.removeClass("invalid-field"); 
     } 
     else { 
      trigger.addClass("invalid-field"); 
      trigger.focus(); 
     } 
     }); 
    } 
    } 
})