Blog

Jquery Validations

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
 <script type="text/javascript">
	
  $( document ).ready( function () {
    $( "#liquid_form" ).validate( {
      rules: {
        emailaddress1: "required",
        telephone1: "required",
        name: {
          required: true,
          minlength: 2
        },
        password1: {
          required: true,
          minlength: 5
        },
        confirm_password1: {
          required: true,
          minlength: 5,
          equalTo: "#password1"
        },
        emailaddress1: {
          required: true,
          email: true
        },
        agree1: "required"
      },
      messages: {
        firstname1: "Please enter your firstname",
        lastname1: "Please enter your lastname",
        name: {
          required: "Please enter a username",
          minlength: "Your username must consist of at least 2 characters"
        },
        password1: {
          required: "Please provide a password",
          minlength: "Your password must be at least 5 characters long"
        },
        confirm_password1: {
          required: "Please provide a password",
          minlength: "Your password must be at least 5 characters long",
          equalTo: "Please enter the same password as above"
        },
        email1: "Please enter a valid email address",
        agree1: "Please accept our policy"
      },
      errorElement: "em",
      errorPlacement: function ( error, element ) {
        // Add the `help-block` class to the error element
        error.addClass( "help-block" );

        // Add `has-feedback` class to the parent div.form-group
        // in order to add icons to inputs
        element.parents(".control").addClass( "has-feedback" );

        if ( element.prop( "type" ) === "checkbox" ) {
          error.insertAfter( element.parent( "label" ) );
        } else {
          error.insertAfter( element );
        }

        // Add the span element, if doesn't exists, and apply the icon classes to it.
        if ( !element.next( "span" )[ 0 ] ) {
          $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
        }
      },
      success: function ( label, element ) {
        // Add the span element, if doesn't exists, and apply the icon classes to it.
        if ( !$( element ).next( "span" )[ 0 ] ) {
          $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
        }
      },
      highlight: function ( element, errorClass, validClass ) {
        $( element ).parents( ".control" ).addClass( "has-error" ).removeClass( "has-success" );
        $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
      },
      unhighlight: function ( element, errorClass, validClass ) {
        $( element ).parents( ".control" ).addClass( "has-success" ).removeClass( "has-error" );
        $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
      }
    } );
  } );
</script>

$(document).ready(function() {
    $("#name").blur(function() {
        validate("name");
    });
    $("#telephone1").blur(function() {
        validate("telephone1");
    });
    $("#emailaddress1").blur(function() {
        validate("telephone1");
    });
    $("#description").blur(function() {
        validate("telephone1");
    });
 
    function validate(name) {
        debugger;
        if ($("#"+name).val() != null) { // Check condition 
             if(!$("#"+name).next( "span" )[ 0 ] ) {
                $("#"+name).parent().addClass( "has-success" );
                $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter("#"+name);
              }
              else{
                $( "#"+name ).parents().addClass( "has-success" ).removeClass( "has-error" );
                $( "#"+name ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
              }
            } 
            else{
                if(!$("#"+name).next( "span" )[ 0 ] ) {
                    $("#"+name).parent().addClass( "has-error" );
                    $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter("#"+name);
                  }else{
                    $( "#"+name ).parents().addClass( "has-error" ).removeClass( "has-success" );
                    $( "#"+name ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
                  }
                
                
            }
        }
    });

Leave a Reply