如何在字段右侧以红色显示jquery消息

$(document).ready(function(){
 // Setup form validation on the #register-form element
    $("#loginForm").validate({
    
        // Specify the validation rules
        rules: 
        {
            userid:
            {
                required: true,
                minlength: 5
            },
            password:
            {
                required: true,
                minlength: 5
            },
            
            confirmpassword:
            {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            
            role:
            {
            	 required: true,
            }
        },
        
        // Specify the validation error messages
        messages: 
        {
            
        	userid: 
            {
			    required: "Please provide a user name",
			    minlength: "Your user name must be at least 5 character",
            },
            password: 
            {
			    required: "Please provide a password",
			    minlength: "Your password must be at least 5 character",
            },
            
            confirmpassword: 
             {
 			    required: "Please provide a password",
 			    minlength: "Your password must be at least 5 character",
 			    equalTo: "your password should be same as above"
             },
        },
        
        submitHandler: function(loginForm)
        {
            if ($("#loginForm").valid())
            {
            	loginForm.submit();
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
tml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="include.jsp" %>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div align="center" id='formlogin'>
<form method="post" id="loginForm" name="loginForm" action="page2.jsp" class="message">
		<table cellpadding="8" border="0" width="15" cellpadding="10" valign="top" >
		
		<h3> Add a new user </h3>
		
			<tr>
				<td align="center">User ID:</td>
				<td><input tabindex="10" size="20" type="text" name="userid" id="userid" /></td>
			</tr>
			
			<tr>
				<td align="center">Password:</td>
				<td><input tabindex="10" size="20" type="password" name="password" id="password"/></td>
			</tr>
			
			<tr>
				<td align="center">Confirm Password:</td>
				<td><input tabindex="10" size="20" type="password" name="confirmpassword" id="confirmpassword"/></td>
			</tr>
			
			<tr>
				<td align="center">Role:</td>
				<td><select name="role" id="role" title="Please select role" font:color="red"> 
					<option value="">Select a specific role</option>
					<option value="OPS(Operational)">OPS(Operational)</option>
					<option value="Helpdesk">Helpdesk</option>
			</select></td>
			</tr>
			
			<tr>
				<td align="center" colspan="4"><input tabindex="7" type="submit" value="Submit"/></td>					
			</tr>
			
			
			
			</table>				
		</form>
	</div>
<script>
	// just for the demos, avoids form submit
	jQuery.validator.setDefaults({
	  debug: true,
	  success: "valid"
	});
</script>
</body>
</html>

在这里，我提供了两个代码。login.jsp和login_validate.js我已经在include.jsp文件中包含了所有的jquery库。请帮助我如何在字段的右侧显示错误消息，也可以用红色显示。

你能试着把这种风格赋予错误标签吗

label.error{
    color:#ED7476;
    margin-left:5px;
    display:inline;
}

相关内容

最新更新

热门标签：