HTML5 ile eşleşmesi için iki form alanı gerekli olabilir mi?

İki form alanındaki girişlerin HTML5 kullanılarak eşleşmesini zorunlu kılmanın bir yolu var mı? Yoksa bunun hala javascript ile yapılması gerekiyor mu? Örneğin, iki şifre alanınız varsa ve bir kullanıcının her alana aynı verileri girdiğinden emin olmak istiyorsanız, bunu başarmak için yapılabilecek bazı özellikler veya başka kodlamalar var mı?

Tam olarak HTML5 doğrulamasıyla değil, ancak biraz JavaScript sorunu çözebilir, aşağıdaki örneği izleyin:

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

Normal ifadeler Giriş Kalıpları ile yapabilirsiniz ( tarayıcı uyumluluğunu kontrol edin )

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

Minimal javascript ile basit bir çözüm, html öznitelik modelini kullanmaktır ( çoğu modern tarayıcı tarafından desteklenir ). Bu, ikinci alanın modelini birinci alanın değerine ayarlayarak çalışır.

Maalesef, standart bir işlevi olmayan normal ifadeden de çıkmanız gerekir.

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

JavaScript gerekli olacaktır, ancak karşılaştırmayı gerçekleştirmek için bir aracı <output>öğe ve bir oninputform işleyici kullanılarak kod miktarı minimumda tutulabilir (kalıplar ve doğrulama bu çözümü artırabilir, ancak basitlik adına burada gösterilmemiştir):

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

Sadece HTML5 değil, biraz da JavaScript
[Buraya] tıklayın https://codepen.io/diegoleme/pen/surIK

HTML

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

JAVASCRIPT

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;

Desen ve bir normal ifade kullanan cevaplar, kullanıcının parolasını giriş özelliklerine düz metin olarak yazar pattern='mypassword'. Bu yalnızca geliştirici araçları açıksa görülebilir, ancak yine de iyi bir fikir gibi görünmüyor.

Eşleşmeyi kontrol etmek için desen kullanmanın diğer bir sorunu, parolanın doğru biçimde olup olmadığını kontrol etmek için desen kullanmak isteyebilmenizdir, örneğin karışık harfler ve sayılar.

Ayrıca kullanıcı girişler arasında geçiş yaparsa bu yöntemlerin işe yaramayacağını düşünüyorum.

İşte biraz daha JavaScript kullanan ancak girişlerden biri güncellendiğinde basit bir eşitlik kontrolü yapan ve ardından özel bir HTML geçerliliği ayarlayan çözümüm. Her iki giriş de e-posta formatı veya parola karmaşıklığı gibi bir model için test edilebilir.

Gerçek bir sayfa için giriş türlerini 'parola' olarak değiştirirsiniz.

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

Diğer yanıtlarda da belirtildiği gibi, bunu yapmanın saf HTML5 yolu yoktur.

Zaten JQuery kullanıyorsanız , ihtiyacınız olan şeyi yapmanız gerekir:

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