Quote for the Week

"Learn to enjoy every moment of your life"

Thursday, November 13, 2014

Simple validation technique using jQuery without any plug-ins


  • This Article subjected to How we do validation , As we have many validations with different plugins or jQuery validation.
  • Today I am going to show you how we can do validation using our own customize script at client-side.
  • Initially, we will add class called 'validation' to all text boxes which are required for ex: Name, Mobile, Email



First name: <input  type='text' id='txtName'  class='validation'/>

Phone : <input  type='text' id='txtPhone'  class='validation'/>

-----------------------
-----------------------

<input type='button' value='submit' id='btnSubmit' />

Now in script write as
<script>
$(document).ready(function(){
$("#btnSubmit").click(function(){

  $('.validation').each(function () {
            if ($(this).val() == "" || $(this).val()==0) {
                isValid = false;
                $(this).css({
                    "border": "1px solid red",
                    "background": "#FFCECE"
                });
            }
            else {
                $(this).css({
                    "border": "",
                    "background": ""
                });
            }
        });
});
});

</script>

That's simple, validation is Done. Do you want to try it, you can.


If any queries mail to dotnetcircle@gmail.com.

HAVE A GOOD DAY.


No comments: