Как использовать проверку достоверности для проверки формы с помощью jquery - PullRequest
Новая
       39

Как использовать проверку достоверности для проверки формы с помощью jquery

0 голосов
/ 21 февраля 2019

Я пытаюсь отладить фрагмент, чтобы я мог понять, как он работает. Проверка подлинности javascript checkValidity ():

Вот проблема:

Сначала я создаю массив значенийи форма, связанная с событием щелчка: 

jQuery('input[name="submit-request-form"]').click(function() {
    var fields = [ 'FirstName','Lastname','Email','Telephone','CampusID','ProgramID'];
    var form = 'flow-request-form';
    disableSubmitButton( $(this) , fields , form );

});

Следующим шагом является создание функции для получения всех элементов формы на основе моего массива, и, если все они заполнены, изменитедопустимое значение false и отправьте форму. 

function disableSubmitButton( Obj , fields , form ){

    var valid = true;
    for (var i = 0 ; i < fields.length ; i++) {
        var element = jQuery('form[name="'+form+'"] [name="'+fields[i]+'"]');
        console.log( element[0].checkValidity());
        if( element[0] && !element[0].checkValidity() ){
            valid = false;
            break;
        }
    }
    console.log(valid);
    if(valid){
        Obj.attr('disabled' , 'disabled');
    }
}

В случае, если значение моей формы не будет заполнено или будет недействительным, допустимая переменная не изменится на false и отключит кнопку.

Что-то не так, но моя ценность всегда будет верной.

Кто-нибудь знает почему?

Фрагмент следующий: 

if( element[0] && !element[0].checkValidity() ){
    valid = false;
    break;
}

вот гдемой код не работает

1 Ответ

0 голосов
/ 21 февраля 2019

Вы можете использовать form.reportValidity () для этого.Он в основном проверяет форму и проверяет ее, а если обнаружит недопустимое поле, вернет всплывающее сообщение. 

trackedInput = $('#trackedInput');
confirmSubmit = $('#confirmSubmit');
yourForm = document.querySelector('#confirm');

confirmSubmit.click(function(e) {
  yourForm.reportValidity();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hidden">
  <input id="trackedInput" type="text" form="confirm" required>
</div>

<div class="hidden">
  //Some other stuffs here
</div>

<div class="not_hidden">
  <input id="confirmSubmit" type="submit" form="confirm" required>
</div>

<form id="confirm"></form>
...