Как сделать проверку данных с помощью JQuery?

<form method="post" action="#">
            <div><label>Name :</label><input type="text" name="name" required="required"></div>
            <div><label>Phone :</label><input type="number" name="number" required="required"></div>
            <div><label>Email :</label><input type="email" name="email" required="required"></div>
            <div><label>Location :</label><input type="text" name="locaton" required="required"></div>
            <div class="wid100"><label>Requirement :</label><textarea rows="5" required="required"></textarea></div>
            <input type="submit" value="SEND" class="submit">
        </form>

пожалуйста, сообщите мне... как сделать проверку данных с помощью onkeyup

Источник

5 ответов

Я бы предложил вам изменить ваше событие на onblur вместо keyup. В любом случае для вашего требования. Это было бы что-то ниже.

Попробуйте этот код.

$(document).ready(function(){
    $("#n").keyup(function(){
     if($("#n").val()==""){
      $("#n").css("background-color", "red");
     }
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

Enter your name: <input type="text" id="n">

<p>Enter your name in the input field above. It will change background color on keydown and keyup.</p>

</body>
</html>

Источник

Вы можете попробовать проверить каждое поле ввода на событии размытия, когда фокус для элемента потерян, и показать, например, сообщение об ошибке.

  1. Добавьте к каждому входу идентификатор или класс
  2. Добавьте обработчик события в document.ready для каждого идентификатора (или класса)
Источник

Попробуй это,

    $(function(){
      $('.inputField').on('blur',function(){
          if($(this).val()==""){
            
            $(this).parent('.inputFieldParent').find('.req').show();
            }else{     
            $(this).parent('.inputFieldParent').find('.req').hide();
             }
      });
    });
.req{
color:red;
display:none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form method="post" action="#">
                <div class="inputFieldParent"><label>Name :</label><input class="inputField" type="text" name="name" required="required">
                <span class="req">required</span>
                </div>
                <div class="inputFieldParent"><label>Phone :</label><input class="inputField" type="number" name="number" required="required"> <span class="req">required</span></div>
                <div class="inputFieldParent"><label>Email :</label><input class="inputField" type="email" name="email" required="required"> <span class="req">required</span></div>
                <div class="inputFieldParent"><label>Location :</label><input class="inputField" type="text" name="locaton" required="required"> <span class="req">required</span></div>
                <div class="wid100 inputFieldParent"><label>Requirement :</label><textarea class="inputField" rows="5" required="required"></textarea>
 <span class="req">required</span></div>
                <input type="submit" value="SEND" class="submit">
            </form>

ИЛИ ЖЕ

Попробуйте использовать проверку JQuery

Источник

Идеальный способ - обработать событие submit и запустить логику проверки внутри события submit. Есть заполнитель для отображения сообщения проверки. Например:

Шаг 1: Объявите идентификатор для всех ваших HTML-элементов и заполнитель для сообщения проверки.

    <div>
      <label>Name :</label>
      <input type="text" name="name" id="name" required="required">
    <span id="validationmessage_name" style="color:red;display:none">This field is required.</span>
    </div>
<input type="submit" value="SEND" class="submit" id="submitForm">

Шаг 2 должен обрабатывать событие отправки и запустить логику проверки здесь

$("#submitForm").submit(function(e){
  var isValid =true;
if($("#name").val() == '') 
{
    $("#validationmessage_name").show().fadeOut( 5000 );
    isValid=false;
}
//The below code will not submit the form if validation fails.                      
 if(!isValid){
                e.preventDefault();
            }
});
Источник

Вам нужно использовать keyup а также focusout события для запуска и проверки в реальном времени:

$('input').on('keyup focusout', function() {
  $(this).removeClass('error');
  if ($.trim($(this).val()) == '') {
    $(this).addClass('error');
  }
});
input.error {
  border: 1px solid #d00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
  <div><label>Name :</label><input type="text" name="name" required="required"></div>
  <div><label>Phone :</label><input type="number" name="number" required="required"></div>
  <div><label>Email :</label><input type="email" name="email" required="required"></div>
  <div><label>Location :</label><input type="text" name="locaton" required="required"></div>
  <div class="wid100"><label>Requirement :</label><textarea rows="5" required="required"></textarea></div>
  <input type="submit" value="SEND" class="submit">
</form>

Источник
Другие вопросы по тегам