0
$(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:
{
\t required: true,
}
},
// Specify the validation error messages
messages:
{
\t userid:
{
\t \t \t required: "Please provide a user name",
\t \t \t minlength: "Your user name must be at least 5 character",
},
password:
{
\t \t \t required: "Please provide a password",
\t \t \t minlength: "Your password must be at least 5 character",
},
confirmpassword:
{
\t \t \t required: "Please provide a password",
\t \t \t minlength: "Your password must be at least 5 character",
\t \t \t equalTo: "your password should be same as above"
},
},
submitHandler: function(loginForm)
{
if ($("#loginForm").valid())
{
\t 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">
\t \t <table cellpadding="8" border="0" width="15" cellpadding="10" valign="top" >
\t \t
\t \t <h3> Add a new user </h3>
\t \t
\t \t \t <tr>
\t \t \t \t <td align="center">User ID:</td>
\t \t \t \t <td><input tabindex="10" size="20" type="text" name="userid" id="userid" /></td>
\t \t \t </tr>
\t \t \t
\t \t \t <tr>
\t \t \t \t <td align="center">Password:</td>
\t \t \t \t <td><input tabindex="10" size="20" type="password" name="password" id="password"/></td>
\t \t \t </tr>
\t \t \t
\t \t \t <tr>
\t \t \t \t <td align="center">Confirm Password:</td>
\t \t \t \t <td><input tabindex="10" size="20" type="password" name="confirmpassword" id="confirmpassword"/></td>
\t \t \t </tr>
\t \t \t
\t \t \t <tr>
\t \t \t \t <td align="center">Role:</td>
\t \t \t \t <td><select name="role" id="role" title="Please select role" font:color="red">
\t \t \t \t \t <option value="">Select a specific role</option>
\t \t \t \t \t <option value="OPS(Operational)">OPS(Operational)</option>
\t \t \t \t \t <option value="Helpdesk">Helpdesk</option>
\t \t \t </select></td>
\t \t \t </tr>
\t \t \t
\t \t \t <tr>
\t \t \t \t <td align="center" colspan="4"><input tabindex="7" type="submit" value="Submit"/></td> \t \t \t \t \t
\t \t \t </tr>
\t \t \t
\t \t \t
\t \t \t
\t \t \t </table> \t \t \t \t
\t \t </form>
\t </div>
<script>
\t // just for the demos, avoids form submit
\t jQuery.validator.setDefaults({
\t debug: true,
\t success: "valid"
\t });
</script>
</body>
</html>在這裏，我提供了兩個代碼。 login.jsp和login_validate.js 我已經在include.jsp文件中包含所有jquery庫。 請幫助我瞭解如何在字段的右側顯示錯誤消息，並以紅色顯示。
看看這個：https://jsbin.com/xiyirebuho/edit?html,output – Nivedita
謝謝nivedita女士。 您提供的鏈接工作得很好。 但我想在每個文件中分別保存html，css和jquery代碼。 在你給定的鏈接中，代碼被合併到一個我不想要的文件中。 如果可以，請用其他方式幫助我。 再次非常感謝你的女士。 – rucha
你可以把代碼放在分隔文件中。將'