Its the newbie again.. I am trying to design a form that takes a username and a password and validates them. However first i want to make sure that the user fills in both the fields before i pass it on to the servlet or any other server related ponent. I wish to do so using javascript which generates an alert button, more like a JOptionPane when either or both the fields are empty. My code is
index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="newjavascript.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<form id="form" method="post" action="final.jsp">
Student name :<br><input type="text" value="" name="username" id="idusername"><br><br>
Password :<br><input type="text" value="" name="password" id="idpassword"><br><br>
<input type="submit" value="Register" />
</form>
</body>
</html>
I pass the above onto a javascript file newjavascript.js which is
$(document).ready(function(){
var form = $("#form");
var username = $("#idusername");
var password = $("idpassword");
//On Submitting
form.submit(function(){
if(validateName() & validatePassword())
return true;
else
{
alert('Some fields are not filled correctly. Please fill them correctly.');
return false;
}
});
function validateName(){
if(username.val().length < 1){
return false;
}
else{
return true;
}
}
function validatePassword(){
if(password.val().length <5){
return false;
}
else{
return true;
}
}
});
Is my javascript code wrong or i am not properly able to pass on the parameters to it ??
Its the newbie again.. I am trying to design a form that takes a username and a password and validates them. However first i want to make sure that the user fills in both the fields before i pass it on to the servlet or any other server related ponent. I wish to do so using javascript which generates an alert button, more like a JOptionPane when either or both the fields are empty. My code is
index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="newjavascript.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<form id="form" method="post" action="final.jsp">
Student name :<br><input type="text" value="" name="username" id="idusername"><br><br>
Password :<br><input type="text" value="" name="password" id="idpassword"><br><br>
<input type="submit" value="Register" />
</form>
</body>
</html>
I pass the above onto a javascript file newjavascript.js which is
$(document).ready(function(){
var form = $("#form");
var username = $("#idusername");
var password = $("idpassword");
//On Submitting
form.submit(function(){
if(validateName() & validatePassword())
return true;
else
{
alert('Some fields are not filled correctly. Please fill them correctly.');
return false;
}
});
function validateName(){
if(username.val().length < 1){
return false;
}
else{
return true;
}
}
function validatePassword(){
if(password.val().length <5){
return false;
}
else{
return true;
}
}
});
Is my javascript code wrong or i am not properly able to pass on the parameters to it ??
Share Improve this question asked Jun 20, 2012 at 16:07 Chitransh SaurabhChitransh Saurabh 3776 gold badges13 silver badges23 bronze badges 4- 1 Your first line will invalidate the doctype. doctype must be on first line. Not directly answering the problem, but just saying. – Romain Valeri Commented Jun 20, 2012 at 16:13
- Okay.. I made the doctype statement the very first line. But it still does not solve the problem !! – Chitransh Saurabh Commented Jun 20, 2012 at 16:16
- Okay add # to var password. and add reference to Jquery to validate $(document).ready(function(){}); – HGK Commented Jun 20, 2012 at 16:26
- I have done it before, but yet unable to get it validated !! – Chitransh Saurabh Commented Jun 20, 2012 at 16:33
3 Answers
Reset to default 1<script>
$(document).ready(function () {
var form = $("#form");
alert(form);
var username = $("#idusername");
var password = $("#idpassword");
//On Submitting
form.on("submit",function () {
if (validateName() & validatePassword())
return true;
else {
alert('Some fields are not filled correctly. Please fill them correctly.');
return false;
}
});
function validateName() {
if (username.val().length < 1) {
return false;
}
else {
return true;
}
}
function validatePassword() {
alert(password);
if (password.val().length < 5) {
return false;
}
else {
return true;
}
}
});
</script>
Do like this
$(document).ready(function(){
var form = $("#form");
form.submit(function(){
if(validateName() && validatePassword())
return true;
else
{
alert('Some fields are not filled correctly. Please fill them correctly.');
return false;
}
});
});
function validateName(){
var username = $("#idusername");
if(username.val().length < 1){
return false;
}
else{
return true;
}
}
function validatePassword(){
var password = $("#idpassword");//previously it was wrong
if(password.val().length <5){
return false;
}
else{
return true;
}
}
Here's a fiddle to a corrected version of your code on with the following fixes:
- you must use $("#idpassword");
- You should use && for the "logical and" parison - not & for a "bitwise and." The code works with the bitwise &, but you're not trying to do a bitwise operation.
ADDITION
You must prevent the default form submission.
form.submit(function(event) { ... if (bad) { event.preventDefault(); }
(I had this in the fiddle but forgot to mention it)
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745234303a4617817.html
评论列表（0条）