ট্রিগারিং এইচটিএমএল 5 ফর্ম বৈধকরণ

Question 1

বেশ কয়েকটি বিভিন্ন ফিল্ডসেট সহ আমার একটি ফর্ম রয়েছে। আমার কাছে কিছু জাভাস্ক্রিপ্ট রয়েছে যা ব্যবহারকারীদের জন্য একবারে মাঠের সেটগুলি প্রদর্শন করে। এইচটিএমএল 5 বৈধতা সমর্থনকারী ব্রাউজারগুলির জন্য, আমি এটির ব্যবহার করতে পছন্দ করব। যাইহোক, আমার শর্তে এটি করা দরকার। আমি JQuery ব্যবহার করছি।

যখন একজন ব্যবহারকারী পরবর্তী ফিল্ডসেটে যেতে জেএস লিঙ্কে ক্লিক করেন, আমার বর্তমান ফিল্ডসেটে ঘটতে বৈধতা প্রয়োজন এবং সমস্যা দেখা দিলে ব্যবহারকারীকে এগিয়ে যেতে বাধা দিন।

আদর্শভাবে, ব্যবহারকারী যে কোনও উপাদানটির উপর ফোকাস হারিয়ে ফেললে বৈধতা আসবে।

বর্তমানে জাভাস্ক্রিপ্ট ব্যবহার এবং ব্যবহারের অকার্যকর রয়েছে। নেটিভ পদ্ধতি ব্যবহার করতে পছন্দ করবে। :)

Question 2

আপনি স্থানীয় বৈধতা UI ট্রিগার করতে পারবেন না, তবে আপনি সহজেই নির্বিচার ইনপুট উপাদানগুলিতে বৈধতা API এর সুবিধা নিতে পারেন:

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

প্রথম ইভেন্টটি checkValidityপ্রতিটি ইনপুট উপাদানগুলিতে ফোকাস হারানোর সাথে সাথেই অগ্নিসংযোগ করে, যদি উপাদানটি থাকে invalidতবে সংশ্লিষ্ট ইভেন্টটি নিক্ষেপ করা হবে এবং দ্বিতীয় ইভেন্ট হ্যান্ডলার দ্বারা আটকা পড়বে। এটি একটিকে উপাদানটিতে ফোকাসটি সেট করে তবে এটি বেশ বিরক্তিকর হতে পারে, আমি ধরে নিয়েছি ত্রুটিগুলি সম্পর্কে অবহিত করার জন্য আপনার আরও ভাল সমাধান রয়েছে। উপরে আমার কোডটির একটি কার্যকারী উদাহরণ এখানে ।

Question 3

টিএল; ডিআর: পুরানো ব্রাউজারগুলির যত্ন নেই? ব্যবহার form.reportValidity()।

লিগ্যাসি ব্রাউজার সমর্থন প্রয়োজন? পড়তে.

এটি ম্যানুয়ালি বৈধতা ট্রিগার করা সম্ভব।

পুনঃব্যবহারযোগ্যতা উন্নত করতে আমি আমার উত্তরে সরল জাভাস্ক্রিপ্ট ব্যবহার করব, কোনও জিকুয়ের দরকার নেই।

নিম্নলিখিত 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()পুরানো ব্রাউজারগুলিতে কীভাবে অনুকরণ করা যায় তা বিশদ বিবরণ ।

তবে আপনার নিজের প্রকল্পে এই কোড ব্লকগুলি অনুলিপি করে আটকানোর দরকার নেই - আপনার জন্য পনিফিল / পলিফিল সহজেই উপলব্ধ।

যেখানে reportValidity()সমর্থিত নয়, আমাদের ব্রাউজারটি একটু চালিত করতে হবে। তো, আমরা কী করব?

কল করে ফর্মটির বৈধতা পরীক্ষা করুন form.checkValidity()। এটি আমাদের জানাবে যে ফর্মটি বৈধ কিনা তবে বৈধতা UI প্রদর্শন করে না।
যদি ফর্মটি অবৈধ হয়, আমরা একটি অস্থায়ী জমা বোতামটি তৈরি করি এবং এটিতে একটি ক্লিক ট্রিগার করি। যেহেতু ফর্মটি বৈধ নয়, আমরা জানি এটি আসলে জমা দেবে না , তবে এটি ব্যবহারকারীর কাছে বৈধতার ইঙ্গিত দেখাবে। আমরা তাত্ক্ষণিকভাবে অস্থায়ী জমা বোতামটি সরিয়ে ফেলব, তাই এটি কখনই ব্যবহারকারীর কাছে দৃশ্যমান হবে না।
যদি ফর্মটি বৈধ হয় তবে আমাদের মোটেও হস্তক্ষেপ করার প্রয়োজন নেই এবং ব্যবহারকারীকে এগিয়ে যেতে দেওয়া উচিত।

কোডে:

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 এ পরীক্ষা করেছি)।

এখানে একটি কার্যকরী কোডপেন উদাহরণ।

Question 4

কিছু পরিমাণে, আপনি triggerHTML5 ফর্মের বৈধতা যাচাই করতে পারেন এবং ফর্মটি জমা না দিয়ে ব্যবহারকারীকে ইঙ্গিতগুলি দেখান!

দুটি বোতাম, বৈধতার জন্য একটি, জমা দেওয়ার জন্য একটি

onclickবিশ্বব্যাপী পতাকা সেট করতে বৈধতা বোতামে একটি শ্রোতা সেট করুন (বলুন justValidate) এই ক্লিকটি ফর্মটির বৈধতা যাচাই করার উদ্দেশ্যে চিহ্নিত করা হয়েছে indicate

এবং পতাকাটি মিথ্যাতে onclickসেট করতে সাবমিট বাটনে একটি শ্রোতা সেট করুন justValidate।

তারপরে onsubmitফর্মটির হ্যান্ডলারে, আপনি justValidateপ্রত্যাবর্তন মানটি নির্ধারণ করতে পতাকাটি পরীক্ষা preventDefault()করে ফর্মটি জমা দেওয়ার জন্য থামিয়ে দিতে অনুরোধ করবেন। যেমনটি আপনি জানেন, এইচটিএমএল 5 ফর্মের বৈধতা (এবং ব্যবহারকারীকে জিইউআই ইঙ্গিত) প্রবর্তন করা হয়েছে onsubmit, এবং ফর্মটি ভ্যালিড থাকলেও আপনি মিথ্যা বা অনুরোধ করে ফর্মটি জমা দেওয়া বন্ধ করতে পারবেন preventDefault()।

এবং, এইচটিএমএল 5 এ আপনার ফর্মটির বৈধতা যাচাই করার জন্য একটি পদ্ধতি রয়েছে: form.checkValidity()তবে আপনি জানতে পারবেন যে ফর্মটি আপনার কোডটিতে বৈধ কিনা।

ঠিক আছে, এখানে ডেমোটি রয়েছে: http://jsbin.com/buvuku/2/edit

Question 5

আমি নিশ্চিত নই যে আমার পক্ষে এগুলি সমস্ত কিছু স্ক্র্যাচ থেকে টাইপ করা মূল্যহীন যেহেতু একটি তালিকা সংস্থায় প্রকাশিত এই নিবন্ধটি এটি ব্যাখ্যা করার জন্য বেশ ভাল কাজ করে। এমডিএন এর এইচটিএমএল 5 ফর্ম এবং বৈধকরণের জন্য একটি কার্যকর গাইডও রয়েছে (এপিআই এবং সম্পর্কিত সিএসএসকেও আচ্ছাদন করে)।

Question 6

ফিল্ডসেটগুলিতে 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);

    });

});

Question 7

আমি কৌশলটি খুঁজে পেয়েছি: কেবলমাত্র ফর্মের 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>

Question 8

এইচটিএমএল কোড:

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

জাভাস্ক্রিপ্ট (জ্যাকারি ব্যবহার করে):

<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>

আশা করি এটা তোমাকে সাহায্য করবে

Question 9

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">

স্নিপেট প্রসারিত করুন

Question 10

ইনপুট ক্ষেত্রের জন্য

<input id="PrimaryPhNumber" type="text" name="mobile"  required
                                       pattern="^[789]\d{9}$" minlenght="10" maxLength="10" placeholder="Eg: 9444400000"
                                       class="inputBoxCss"/>

$('#PrimaryPhNumber').keyup(function (e) {
        console.log(e)
        let field=$(this)
        if(Number(field.val()).toString()=="NaN"){
            field.val('');
            field.focus();
            field[0].setCustomValidity('Please enter a valid phone number');
            field[0].reportValidity()
            $(":focus").css("border", "2px solid red");
        }
    })

Question 11

যখন একটি খুব জটিল (বিশেষত অ্যাসিনক্রোনাস) বৈধকরণ প্রক্রিয়া হয়, তখন একটি সরল কাজ থাকে:

<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>

Question 12

এই সমস্যাটি সমাধানের আর একটি উপায়:

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