First look at the interface code:
Copy codeThe Code is as follows:
<Form id = "form1" runat = "server">
<Div align = "center">
<Fieldset style = "width: 350px; height: 200px;">
<Table border = "0" cellpadding = "3" cellspacing = "3">
<Tr>
<Td>
Select the car type:
</Td>
</Tr>
<Tr>
<Td>
<Asp: DropDownList ID = "dllCar" runat = "server" ToolTip = "select at least one type of car! "CssClass =" required ">
<Asp: ListItem Value = "" Text = "--- Select ---"> </asp: ListItem>
<Asp: ListItem Value = "1" Text = "Mercedes Benz"> </asp: ListItem>
<Asp: ListItem Value = "2" Text = "BMW"> </asp: ListItem>
<Asp: ListItem Value = "3" Text = "Audi"> </asp: ListItem>
<Asp: ListItem Value = "4" Text = ""> </asp: ListItem>
<Asp: ListItem Value = "5" Text = "Toyota"> </asp: ListItem>
</Asp: DropDownList>
</Td>
</Tr>
<Tr>
<Td>
<Asp: Button ID = "btnSubmit" runat = "server" Text = "Submit"/>
</Td>
</Tr>
</Table>
</Fieldset>
<Div id = "message" class = "alertmsg">
</Div>
</Div>
</Form>
The ToolTip of the DropDownList control attribute is converted to the Title. The value of the title can be used as the prompt information for the required validation rule. The value of required of the CssClass attribute specifies the validation rule of the plug-in.
Script code:
Copy codeThe Code is as follows:
<Head id = "Head1" runat = "server">
<Title> Recipe18 </title>
<Script type = "text/javascript" src = "Scripts/jquery-1.4.1-vsdoc.js"> </script>
<Script type = "text/javascript" src = "Scripts/jquery. validate. js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("# Form1"). validate ({
ErrorLabelContainer: $ ("# message ")
});
});
</Script>
<Style type = "text/css">
. Alertmsg
{
Color: # FF0000;
}
</Style>
</Head>
Display Effect:
In addition, if you do not set the attributes ToolTip and CssClass of DropDownList, you can change the script code to the following code to achieve the same effect:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# Form1"). validate ({
Rules: {dllCar: "required "},
Messages: {dllCar: "select at least one type of car! "},
ErrorLabelContainer: $ ("# message ")
});
});
</Script>