[javascript] اكتشاف الإكمال التلقائي في إدخال النموذج باستخدام jQuery


Answers

يمكنك محاولة استخدام on input للكشف عن التغييرات المستندة إلى النص (باستثناء المفاتيح مثل ctrl و shift ) في <input> .

فمثلا:

$(input).on('input', function() { 
    console.log($(this).val()); 
});
Question

لدي نموذج يكتشف ما إذا كانت جميع حقول النص صالحة في كل لوحة مفاتيح () والتركيز () ؛ إذا كانت جميعها صالحة ، فستمكّن زر الإرسال للمستخدم من الضغط. ومع ذلك ، إذا كان المستخدم يملأ أحد مدخلات النص باستخدام ميزة الإكمال التلقائي للمتصفح ، فإنه يمنع تمكين الزر إرسال.

هل هناك طريقة للكشف عما إذا كان أي من المدخلات قد تغير بغض النظر عن كيفية تغييره ، وذلك باستخدام jQuery؟




يمكنك استخدام .change() jQuery .change() .

بعد تحميل الصفحة مبدئيًا ، يمكنك التحقق من صحة النموذج بأكمله ، فقط للتحقق من أنه لم يتم ملؤه في الواقع. بعد ذلك يمكنك استخدام .change() للتحقق مما إذا كانت الأشياء قد تغيرت في النموذج ، وإذا تغير أي شيء ، التحقق من صحة النموذج مرة أخرى.

$(document).ready(function() {
   // validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<script type="text/javascript">     
    $('.target').change(function() {
        alert('Something changed');
        // Try validating form again (if valid, activate submit button)
    });
</script>

الخطة ب

خيار آخر هو أن يكون زر .submit() دائمًا قابلاً للنقر ، ولكن استخدم .submit() النموذج. ثم إذا كان النموذج صالحًا ، استمر. إذا كان النموذج غير صالح ، استخدم .preventDefault() لإيقاف إرسال النموذج .... وستعرض رسالة تحذير أيضًا ، تشير إلى الحقول المفقودة.




كانت مشكلتي هي اكتشاف الملء التلقائي (عبر مكوّن إضافي مثل lastpass أو 1 كلمة مرور) بالإضافة إلى المشكلة الموضحة أعلاه.

الحل الذي نجحني كان:

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

شاهد العرض في JSFiddle .




كنت أرغب في الحصول على تجربة مستخدم جيدة جدًا في مجال لن تكون فيه غير صالحة (انتقل إلى اللون الأحمر في حالتي) طالما كان المستخدم نشطًا بشكل معقول ، على سبيل المثال لا يزال ملء الحقل.

للقيام بذلك من أجل الإدخال العادي ، تمكنت من ربط keyup بوظيفة debounce ، بينما تم توصيل blur للتحقق الفوري من الصحة. في حين يبدو أن يتم تشغيل keyup بواسطة lastpass ، لأنني قد debented ذلك ، كان هناك تأخير في التحقق من الصحة. بفضل @ peter-ajtai حاولت إضافة حدث change وهو بالفعل يمسك بتمريرة أخيرة ويترك المفاهيم الأخرى وحدها.

مثال على Coffeescript:

@fieldExp .keyup($.debounce(@_onExpChange, 3000)) .blur(@_onExpChange) .change(@_onExpChange)

هذا العمل بشكل جيد وتطابق ملء نموذج بدء تشغيل التحقق الفوري.




Related