Проверка поля JavaScript на стороне клиента

Question

У меня есть конкретный сценарий, в котором мне нужно немного помочь с точки зрения проверки на стороне клиента.

У меня есть поля ввода, которые требуются (не требуется HTML), но они определяются по мере необходимости с помощью класса, называемого «requiredInput», и оцениваются на стороне сервера, когда пользователь нажимает кнопку отправки.

Я, однако, хотел бы подтвердить ввод полей на стороне клиента, когда пользователь отходит от этой области и отключить представить, пока все необходимые поля заполняются.

Как идти об этом сценарии в чтобы полностью обрабатывать эту клиентскую сторону, а не ждать отправки на серверной стороне подтверждения проверки?

<input type="text" name="lastName" id="lastName" class="requiredInput" tabindex="3"> 

Примечание:. Я не хочу, чтобы выполнить проверку на представить, я хотел бы подтвердить ONBLUR и отключить представить, пока все необходимые поля заполнены в

Answer 1

У вас есть куча JS пакеты проверки, которые вы можете найти в Интернете.

На данный момент я считаю, что один из лучших - ParsleyJS. Вы можете использовать несколько встроенных (и некоторых дополнительных) валидаторов, которые отлично работают на стороне клиента. Ypou может создать свой собственный один раз. Существует также возможность проверить удаленное поле, которое также прекрасно, если вы не хотите отправлять всю форму на сервер.

Answer 2

Если вы wan't чистый JS решение и хотите иметь полный контроль того, что именно является действительным вы можете захотеть сделать что-то вроде этого:

Создать validateInput() функцию, которая получает все поля ввода, проверки, если они имеют (и любые другие проверки, которые вы можете выполнить), и приступайте к включению кнопки отправки, если все будет как ожидается. Прикрепите эту функцию к событию onblur каждого поля ввода.

function validateInput(){ 
    let validInput = true; 
    let field1Content = document.getElementById('field1').value; 
    let field2Content = document.getElementById('field2').value; 
    if(field1Content.length === 0 || field2Content === 0) 
     validInput = false; 

    if(validInput) 
    //enable submit button 
} 

Answer 3

Вы можете Исли это сделать, если у вас есть Jquery, попробуйте ниже

<input type="text" name="lastName" id="txtbox1" class="requiredInput clsValidate" tabindex="3"> 
<input type="text" name="lastName" id="txtbox2" class="requiredInput clsValidate" tabindex="3"> 
<input type="text" name="lastName" id="txtbox3" class="requiredInput clsValidate" tabindex="3"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
    ValidateInput(); 
}); 

$(document).on('change', 'input.clsValidate[type=text]', function() { 
    ValidateInput(); 
}); 

function ValidateInput() { 
    var cnt = 0; 
    $('input.clsValidate[type=text]').each(function (i, obj) { 
     if ($(this).val().trim().length <= 0) { 
      cnt++; 
     } 
     if (cnt > 0) { 
      $('#btnsubmit').attr('disabled', 'disabled') 
     } else { 
      $('#btnsubmit').removeAttr('disabled'); 
     } 
    }); 
} 
</script>