A simple jQuery form validation script

jQuery:

$(document).ready(function () {

    $('#myform').validate({ 
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

HTML:

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

jQuery Validation Plugin

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 other languages.

If you want to support the development of this plugin, please donate to the ongoing pledgie.org campagin.

The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. It was started back in the early days of jQuery in 2006, and updated and improved since then.

Current version: 1.11.1

License: MIT

Files:

Download
Changelog
Demos
Documentation
GitHub Repository
GitHub 1.11.1 Tag

1.11.1 files on Microsoft’s Ajax CDN (hotlinking welcome):

• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js
• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js
• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js
• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js
• Localization Files at http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/localization/messages_##.js where ## is the loc code.
• vsdoc file for VisualStudio

Dependencies

Required

• jQuery, tested with 1.6.4, 1.7.2, 1.8.3, 1.9.0

Support

• Please post questions to the official using jQuery Plugins Forum, tagging your question with (at least) “validate”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in a shorter time.
• Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the GitHub issue tracker

Donate

What is Jquery?

jQuery is a simple, light-weight, open source, cross browser JavaScript library that simplifies event handling, animations and jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.  In this article we will discuss some useful tips and tricks in jQuery.

The jQuery library contains the following features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
• Get data from Sql server Database and other
• Session
• Cookies and etc

how to create variable in jquery

var name = 'india';
alert(name);

var name = $("#txtname").val();
alert(name);

How to Pan Card Validation in Asp.net.

Hello,

Below script helps to bind the user to enter the value in the textbox which
will validate pan card number in India.

In India Pan card no is 10 digit alpha numeric.
First 5 are alphabets only followed by 4 numeric and at last one alphabet.


To achieve this simply follow the following Steps

Write the below javascript function in the aspx page under head section :

<script type="text/javascript">
function Validation()
{
var txt_pan=document.getElementById('TextBox1').value;

var checkval=/^[A-Z]{5}\d{4}[A-Z]{1}$/;
if(checkval.test(txt_pan)== false)
{
  alert('Please enter valid pan number');
  return false;
}
}
</script>

In the Body Section of the .aspx page just bind the onClientclickevent of the button to the function above in the javascript to check the value of TextBox1
Take one texbox and button control on the page as shown below


<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript:return Validation();" />

How do I disable/enable a form element?

enable or disable a form element using the .prop() method:
// Disable #div1



$( "#div1" ).prop( "disabled", true );



 



// Enable #div1



$( "#div").prop( "disabled", false );

How to Change colour on mouseover.

Hello.
The code to change colour (textbox,button,cell,tr etc). You can make a class in HTML design form and then call that function on code file.
Step 1:-
First of all make a css class as shown below:

<style type="text/css">

.normalRow
{
background-color:Red;
cursor:pointer;

.highlightRow
{
background-color:white;
cursor:pointer;
}
</style>

Step 2:-

Now call this css in code file like (this is for table row TR):

 tr1.Attributes.Add("onmouseover", "this.className=('highlightRow');");
 tr1.Attributes.Add("onmouseout", "this.className=('normalRow');");

How to getting Data through web Services with jquery in asp.net c#.

In Html

<div id="div_id"></div>

In Jquery code  JqueryDatabind.js

$.fn.DataBind = function () {    
    var data = "{}";
    var url = "Testing.aspx/get_data";

    $(this).AjaxPOST(url, data, function (d) {
        if (typeof (d[0]) !== 'undefined') {
                $('#div_id').append(d[0].id.toString());
        }
    });
}

In Web Services Code

 public class DataId

 {

     public string id;

 }

[WebMethod]

public List<DataId> get_data()

{

  List<DataId> dataid= new List<DataId>();

  string query = "";

  try

  {

    // pass your Sql  connectionstring  Web.config

   SqlConnection con = new SqlConnection(Pass Your         ConnectionString );

   con.Open();

   query = "select dataid From YourTableName";

   SqlDataAdapter da = new SqlDataAdapter(query, con);

   DataSet ds = new DataSet();

   da.Fill(ds);

   

if(ds.Tables[0].Rows.Count>0)

   {

       DataListId data_list = new DataListId();

       data_list.id= ds.Tables[0].Rows[0]["dataid"].ToString();

       dataid.Add(data_list);

   }

   con.Close();

 }

 catch (Exception ex)

 {

 }

 return dataid;

}

How to create Datepicker in jquery

<html lang="en">



<head>



  <meta charset="utf-8" />



  <title>jQuery UI Datepicker </title>



  <link rel="stylesheet" href="css/jquery-ui.css" />



  <script src="js/jquery-1.9.1.js"></script>



  <script src="js/jquery-ui.js"></script>



  <link rel="stylesheet" href="csss/style.css" />



  <script>



  $(function() {



    $( "#datepicker" ).datepicker();



  });



  </script>



</head>



<body>



 



<p>Date: <input type="text" id="datepicker" /></p> 



 



</body>



</html>




http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

How to set cookie expiration time in jquery

$.cookie("testing", "testvalue", { expires: 1 });

How to create cookie in jquery

$.cookie("testing", 1);

how to find url in jquery.

    




            



$(document).ready(function() {
   var url= window.location.pathname;
   var fullurl= window.location;
});

Create autocomplete textbox in jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="js/jquery-ui.css" />
  <script src="js/jquery-1.9.1.js"></script>
  <script src="js/jquery-ui.js"></script>
  <link rel="stylesheet" href="css/style.css" />
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>


</body>
</html>

Create a table in jquery

In html page create a div like

<div id="div_id"></div>

and in jquery:

$('#div_id').append(  '<table>' );

 for(i=0;i<3;i++){
    $('#div_id').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

 $('#div_id').append(  '</table>' );

How to get the current URL in jQuery?

To get the path, you can use:

var pathname = window.location.pathname;

On select change, get data attribute value

$('select').change(function(){
    alert($(this).data('id'));
});

<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>