add css class for Required fields as "required" . then it will work fine.
<asp:TextBox ID="nationalSociety" runat="server" CssClass="required"></asp:TextBox>
<pre lang="xml"><head runat="server">
<title></title>
<script src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>
$(document).ready(function() {
$("#form1").validate();
$('#nationalSociety').rules('add', {
required: true,
messages: {
required: 'National Society cannot be empty'
}
});
$('#participantName').rules('add', {
required: true,
messages: {
required: 'Participant Name cannot be empty'
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="nationalSociety" runat="server" CssClass="required"></asp:TextBox>
<asp:TextBox ID="participantName" runat="server" CssClass="required"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>