এইচটিএমএল 5 এর সাথে মেলানোর জন্য আপনার দুটি ফর্ম ক্ষেত্রের প্রয়োজন?

Question 1

এইচটিএমএল 5 ব্যবহার করে দুটি ফর্ম ক্ষেত্রে প্রবেশের প্রয়োজন আছে কি? অথবা এটি এখনও জাভাস্ক্রিপ্ট দিয়ে কাজ করতে হবে? উদাহরণস্বরূপ, যদি আপনার দুটি পাসওয়ার্ড ক্ষেত্র থাকে এবং নিশ্চিত করতে চান যে ব্যবহারকারী প্রতিটি ক্ষেত্রে একই ডেটা প্রবেশ করেছে, এটি অর্জনের জন্য কিছু বৈশিষ্ট্য, বা অন্যান্য কোডিং করা যেতে পারে?

Question 2

এইচটিএমএল 5 বৈধকরণের সাথে ঠিক নয় তবে সামান্য জাভাস্ক্রিপ্ট সমস্যাটি সমাধান করতে পারে, নীচের উদাহরণটি অনুসরণ করুন:

<p>Password:</p>
<input name="password" required="required" type="password" id="password" />
<p>Confirm Password:</p>
<input name="password_confirm" required="required" type="password" id="password_confirm" oninput="check(this)" />
<script language='javascript' type='text/javascript'>
    function check(input) {
        if (input.value != document.getElementById('password').value) {
            input.setCustomValidity('Password Must be Matching.');
        } else {
            // input is valid -- reset the error message
            input.setCustomValidity('');
        }
    }
</script>
<br /><br />
<input type="submit" />

Question 3

আপনি নিয়মিত প্রকাশের সাথে ইনপুট প্যাটার্নগুলি করতে পারেন ( ব্রাউজারের সামঞ্জস্যতা পরীক্ষা করুন )

<input id="password" name="password" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 6 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>

<input id="password_two" name="password_two" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" placeholder="Verify Password" required>

Question 4

সর্বনিম্ন জাভাস্ক্রিপ্ট সহ একটি সহজ সমাধান হ'ল এইচটিএমএল বৈশিষ্ট্য প্যাটার্ন ব্যবহার করা ( বেশিরভাগ আধুনিক ব্রাউজার দ্বারা সমর্থিত )। এটি প্রথম ক্ষেত্রের মান হিসাবে দ্বিতীয় ক্ষেত্রের প্যাটার্ন সেট করে কাজ করে।

দুর্ভাগ্যক্রমে, আপনাকেও রেজেক্স থেকে বাঁচতে হবে, যার জন্য কোনও মানক কার্য উপস্থিত নেই exists

<form>
    <input type="text" oninput="form.confirm.pattern = escapeRegExp(this.value)">
    <input name="confirm" pattern="" title="Fields must match" required>
</form>
<script>
    function escapeRegExp(str) {
      return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    }
</script>

Question 5

জাভাস্ক্রিপ্টের প্রয়োজন হবে, তবে তুলনাটি সম্পাদনের জন্য কোনও মধ্যস্থতাকারী <output>উপাদান এবং একটি oninputফর্ম হ্যান্ডলার ব্যবহার করে কোডের পরিমাণ সর্বনিম্ন রাখা যেতে পারে (নিদর্শন এবং বৈধতা এই সমাধানটিকে বাড়িয়ে তুলতে পারে, তবে সরলতার জন্য এখানে প্রদর্শিত হয়নি):

<form oninput="result.value=!!p2.value&&(p1.value==p2.value)?'Match!':'Nope!'">
  <input type="password" name="p1" value="" required />
  <input type="password" name="p2" value="" required />
  <output name="result"></output>
</form>

Question 6

কেবল HTML5 নয়, কিছুটা জাভাস্ক্রিপ্ট
ক্লিক করুন [এখানে] https://codepen.io/diegoleme/pen/surIK

এইচটিএমএল

    <form class="pure-form">
    <fieldset>
        <legend>Confirm password with HTML5</legend>

        <input type="password" placeholder="Password" id="password" required>
        <input type="password" placeholder="Confirm Password" id="confirm_password" required>

        <button type="submit" class="pure-button pure-button-primary">Confirm</button>
    </fieldset>
</form>

জাভাস্ক্রিপ্ট

var password = document.getElementById("password")
  , confirm_password = document.getElementById("confirm_password");

function validatePassword(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

Question 7

যে নমুনাগুলি এবং একটি রেজেক্স ব্যবহার করে সেগুলি ব্যবহারকারীর পাসওয়ার্ডটিকে সরল পাঠ হিসাবে ইনপুট বৈশিষ্ট্যে লিখবে pattern='mypassword'। বিকাশকারী সরঞ্জামগুলি উন্মুক্ত থাকলে এটি কেবলমাত্র দৃশ্যমান হবে তবে এটি এখনও কোনও ভাল ধারণা বলে মনে হচ্ছে না।

ম্যাচটি পরীক্ষা করার জন্য প্যাটার্ন ব্যবহার করে অন্য একটি সমস্যা হ'ল আপনি পাসওয়ার্ডটি সঠিক ফর্মের, যেমন মিশ্র অক্ষর এবং সংখ্যাগুলির পরীক্ষা করে দেখতে প্যাটার্ন ব্যবহার করতে চান want

আমি আরও মনে করি যদি ব্যবহারকারী ইনপুটগুলির মধ্যে স্যুইচ করে তবে এই পদ্ধতিগুলি ভালভাবে কাজ করবে না।

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

সত্যিকারের পৃষ্ঠার জন্য আপনি ইনপুট প্রকারকে 'পাসওয়ার্ড' এ পরিবর্তন করবেন।

<form>
    <input type="text" id="password1" oninput="setPasswordConfirmValidity();">
    <input type="text" id="password2" oninput="setPasswordConfirmValidity();">
</form>
<script>
    function setPasswordConfirmValidity(str) {
        const password1 = document.getElementById('password1');
        const password2 = document.getElementById('password2');

        if (password1.value === password2.value) {
             password2.setCustomValidity('');
        } else {
            password2.setCustomValidity('Passwords must match');
        }
        console.log('password2 customError ', document.getElementById('password2').validity.customError);
        console.log('password2 validationMessage ', document.getElementById('password2').validationMessage);
    }
</script>

Question 8

অন্যান্য উত্তরে যেমন উল্লেখ করা হয়েছে, এটি করার কোনও খাঁটি HTML5 উপায় নেই।

আপনি যদি ইতিমধ্যে JQuery ব্যবহার করে থাকেন তবে আপনার যা প্রয়োজন তা করা উচিত:

$(document).ready(function() {
  $('#ourForm').submit(function(e){
      var form = this;
      e.preventDefault();
      // Check Passwords are the same
      if( $('#pass1').val()==$('#pass2').val() ) {
          // Submit Form
          alert('Passwords Match, submitting form');
          form.submit();
      } else {
          // Complain bitterly
          alert('Password Mismatch');
          return false;
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ourForm">
    <input type="password" name="password" id="pass1" placeholder="Password" required>
    <input type="password" name="password" id="pass2" placeholder="Repeat Password" required>
    <input type="submit" value="Go">
</form>

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