how to do data validation using jquery?

Question

how to do data validation using jquery?

151 Views Asked by vaishu At 18 April 2025 at 22:57

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

please guide me...how to do data validation for this using onkeyup

Original Q&A

There are 5 best solutions below

**YCotov** · Answer 1

You can try to check each input field on blur event, when focus for element is lost and show an error message, for instance

Add to each input an id or a class
Add an event handler on document.ready event for each id(or class)

**5eeker** · Answer 2

I would suggest you to change your event to onblur, instead of keyup. Anyways for your requirement. It would be something below.

Try this code.

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

**Sameera Liyanage** · Answer 3

Try this,

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

OR

Try using jquery validation

**Pramod** · Answer 4

The ideal way could be to handle the submit event and run your validation logic inside submit event. Have a place holder to display the validation message. For ex:

Step 1: Declare an id for all your html elements and a place holder for validation message.

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

Step 2 should be handling submit event and run your validation logic here

$("#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();
            }
});

**Milan Chheda** · Answer 5

You need to use keyup and focusout events to trigger and perform real-time validations:

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

how to do data validation using jquery?

There are 5 best solutions below

Related Questions in JQUERY

Related Questions in VALIDATION

Related Questions in FORM-POST

Trending Questions

Popular # Hahtags

Popular Questions