CODEWITHSUNDEEP
jqueryvalidationform-post
vaishu
vaishu

Reputation: 45

how to do data validation using 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>

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

Upvotes: 0

Views: 154

Answers (5)

Milan Chheda
Milan Chheda

Reputation: 8249

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>

Upvotes: 0

Pramod
Pramod

Reputation: 195

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

Upvotes: 0

Sameera Liyanage
Sameera Liyanage

Reputation: 1380

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

Upvotes: 0

5eeker
5eeker

Reputation: 1027

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>

Upvotes: 1

YCotov
YCotov

Reputation: 92

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

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

Upvotes: 0

Related Questions