When I submit a form and the page refreshes the password and password confirmation values are being displayed in the address bar.
Why is this?
Can anyone explain this and give me an idea how to suppress this behavior?
Please see attached screenshot.
Thank you in advance!
It happens when you use the GET method, use POST instead.
Actually, I am already using POST, not GET.
A POST request does not append any information to the url, it uses a separated request body, but it is possible to append GET variables to a POST request url. Are you using javascript to submit the form? Could you show the code?
The code for the posted question:
`
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>
</head>
<body>
<form id="DemoForm"
<form method = 'post' action = 'jTest1.8.html' id = 'DemoForm' name = 'DemoForm'>
Username<br />
<input type="text" id="user_input" name="username" /><br>
Email<br />
<input type="text" id="email" name="email" /><br>
</form>
<div id="test">
</div>
<form id="formCheckPassword">
Password<br />
<input type="password" class="form-control" name="password" id="password"/><br>
Password Again<br />
<input type="password" class="form-control" name="cfmPassword" id="cfmPassword" /><br>
<input type="submit" value="submit"/>
</form>
<!--Script to disable Submit button -->
<!--Rules & Messages-->
<!--Username-->
<!--Email-->
<script src = 'jquery.validate.min.js'></script>
<script>
$('#DemoForm').validate ({
rules: {
'email': {
required:'true',
email: 'true',
}
},
messages:{
'email':{
required:'Please submit your email.',
email:'Enter a valid email.',
}
},
});
</script>
<script>
$("#formCheckPassword").validate({
rules: {
password: {
required: true,
minlength: 6,
maxlength: 10,
} ,
cfmPassword: {
equalTo: "#password",
minlength: 6,
maxlength: 10
}
},
messages:{
password: {
required:"the password is required"
}
}
});
</script>
</body>
</html>
`
Ok, I think you have to fix the opening form tags, at the moment you have three of them, the first is not closed and it will lead to some errors:
<form id="DemoForm"
The second is well defined:
<form method = 'post' action = 'jTest1.8.html' id = 'DemoForm' name = 'DemoForm'>
The third is going to submit a GET request:
<form id="formCheckPassword">
Because the method is not defined and the default setting is to play GET.
When you submit the form, only the values of the third form will be submitted because these are contextual to the submit button, to include the input fields of the second form, you have to merge them into a single form:
<form method="post" action="jTest1.8.html" id="DemoForm" name="DemoForm">
Username<br />
<input type="text" id="user_input" name="username" /><br>
Email<br />
<input type="text" id="email" name="email" /><br>
Password<br />
<input type="password" class="form-control" name="password" id="password"/><br>
Password Again<br />
<input type="password" class="form-control" name="cfmPassword" id="cfmPassword" /><br>
<input type="submit" value="submit"/>
</form>
Fix also the javascript validation rules, to match the same form ID, or simply merge them and you're finished.
cereal:
Hi. I have updated the code per your suggestions but am running into other problems now.
The form can be submitted with no fields filled and the validation for the password/confirm does not work at all (The email validation still works fine). These behaviors were not happening before.
I am running this on a local Apache, otherwise you could see the behavior for yourself - I do not have it up on the hosted server yet.
Thank you for your help.
The new code is below:
`
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>
</head>
<body>
<form method = "post" action = "jTest5.8.html" id = "DemoForm" name = "DemoForm">
Username<br />
<input type="text" id="user_input" name="username" /><br>
Email<br />
<input type="text" id="email" name="email" /><br>
Password<br />
<input type="password" class="form-control" name="password" id="password"/><br>
Password Again<br />
<input type="password" class="form-control" name="cfmPassword" id="cfmPassword" /><br>
<input type="submit" value="submit"/>
</form>
<!--Rules & Messages-->
<!--Username-->
<!--Email-->
<script src = 'jquery.validate.min.js'></script>
<script>
$("#DemoForm").validate ({
rules: {
'email': {
required:'true',
email: 'true',
}
},
messages:{
'email':{
required:'Please submit your email.',
email:'Enter a valid email.',
}
},
});
</script>
<!--Password-->
<script>
$("#DemoForm").validate({
rules: {
password: {
required: true,
minlength: 6,
maxlength: 10,
} ,
cfmPassword: {
equalTo: "#password",
minlength: 6,
maxlength: 10
}
},
messages:{
password: {
required:"The password is required"
}
}
});
</script>
</body>
</html>
`
I suppose you're using this plugin: http://jqueryvalidation.org/
If yes, then it seems you can define only one validation process for the chosen form, so don't set two of them:
$('#DemoForm').validate({
rules:{},
messages:{}
});
$('#DemoForm').validate({
rules:{},
messages:{}
});
Set only one for this ID. The second problem is given by the value assigned to the required attribute which needs to be boolean, not string. So, instead of:
required:"true",
Use:
required:true,
The same applies to the other attributes in which you define a boolean value, like email:
email:true,
Full example:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>
</head>
<body>
<form method="post" action="jTest5.8.html" id="DemoForm" name="DemoForm">
Username<br />
<input type="text" id="user_input" name="username" /><br>
Email<br />
<input type="text" id="email" name="email" /><br>
Password<br />
<input type="password" class="form-control" name="password" id="password"/><br>
Password Again<br />
<input type="password" class="form-control" name="cfmPassword" id="cfmPassword" /><br>
<input type="submit" value="submit"/>
</form>
<script src='jquery.validate.min.js'></script>
<script>
$("#DemoForm").validate({
rules: {
'email': {
required: true,
email: true,
},
'password': {
required: true,
minlength: 6,
maxlength: 10,
},
'cfmPassword': {
equalTo: "#password",
minlength: 6,
maxlength: 10
}
},
messages: {
'email': {
required:'Please submit your email.',
email:'Enter a valid email.',
},
'password': {
required:"The password is required"
}
}
});
</script>
</body>
</html>
Which should work fine.
cereal:
I will try this all right now.
Thank you for such a quick response and for your help!
cereal:
In your last post you stated "Set only one for this ID." - I am confused by this. I will eventually have at least seven fields to validate on the one form. How can I go about doing that using jQuery validation?
OK, rereading your last reply, I think I understand better now just what you meant. Thanks again.
cereal:
I think that worked perfectly + I have learned a lot from the help you have given me which is very important. I appreciate it!
-Matthew
i have one doubt when we are create simple login form and we take get method inside form tag and when we run this html file we entered username password. this username password display on the address bar but i want to know where will be store these username password ? because we are not using any database and any server side languages its only html file.if you run again this form and you try to enter same data or another ,older data is visible inside these fields how what is actual reason?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.