Peeps,
I see this question has been asked but they either don't have validation function right or there are some syntax errors.
Here is my code; it is supposed to check fields are not blank then if they are not blank it passes them to the next page.
What happens with my codes is that it does check the validation but right after the Alert pop-up it goes to the next page. My intention is to not go to the next page unless all fields are filled.
Any hints would be greatly appreciated.
<html>
<head>
<script type="text/javascript">
function RegValidation() {
var txtURL,
if (!txtURL) {
alert("URL is mandatory!");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="RegisterForm" action="RegConfirm.php" method="post">
<p><input type="text" name="txtURL"></p>
<p><input type="submit" value="Register" onclick="Register()"></p>
</form>
</body>
<script type="text/javascript">
function Register() {
if (!RegValidation()) return;
}
</script>
Instead of onclick function on submit button try onsubmit in form tag..
the working code of the jsfiddle is here
<form name="RegisterForm" action="RegConfirm.php" method="post" onSubmit="return Register()">
<p><input type="text" name="txtURL" id="txtURL"></p>
<p><input type="submit" value="Register"></p>
</form>
function Register() {
return RegValidation();
}
function RegValidation() {
var txtURL = document.getElementById('txtURL').value;
if (!txtURL) {
alert("URL is mandatory!");
// txtURLFocus();
return false;
}
return true;
}
you need to assign the value of the field to the var you are testing
You need a focus function that is not defined in the code you gave.
You now only execute a function on click instead of returning it. It is not recommended to assign handlers to a submit button so I have assigned it to the submit event where it belongs
Here is an unobtrusive working version
window.onload = function() {
document.getElementById("RegisterForm").onsubmit = function() {
var txtURL = this.txtURL.valuel
if (!txtURL) {
alert("URL is mandatory!");
this.txtURL.focus();
return false;
}
return true;
}
}
<form name="RegisterForm" id="RegisterForm" action="RegConfirm.php" method="post">
<p><input type="text" name="txtURL"></p>
<p><input type="submit" value="Register"></p>
</form>
Related
Apologies if this question isn't layed out correctly (my first time using stack overflow).
I'm trying to validate if my inputs on a form are filled in when a user presses submit, it alerts the user when the inputs are empty but also when they are not, I'm not sure whats going wrong. Here is my Javascript:
<script>
function validation() {
var x = document.forms["bookingForm"]["id"].value;
if (x == "") {
alert("Ensure all fileds are filled");
return false;
} else {
sendSMS();
alert("Success");
return true;
}
}
</script>
Here is a link to an expanded part of the code for reference:https://pastebin.com/Dj5fA3gB
The general syntax for accessing a form element and element's value are:
document.forms[number].elements[number]
document.forms[number].elements[number].value
If you are using submitButton as in and you are calling validation on onSubmit of the form then you need to call event.preventDefault();
<!DOCTYPE html>
<html>
<body>
<form onsubmit="validation()" name="bookingForm">
First Name: <input type="text" name="id" value="Donald"><br>
Last Name: <input type="text" name="lname" value="Duck">
<input type="submit" value="Submit" />
</form>
<script>
function validation() {
event.preventDefault();
var x = document.forms["bookingForm"]["id"].value;
if (x == "") {
alert("Ensure all fileds are filled");
return false;
} else {
sendSMS();
alert("Success");
return true;
}
}
</script>
</body>
</html>
As suggested in my comment the most clean solution is to use the html attribute required by adding it to your inputs.
Looks something like this.
<form>
<input type="text" name="example" required>
<input type="submit" name="send">
</form>
The biggest advantage is that it works without any additional JS which is in my opinion always the prefered solution.
You didn't include return keyword in the form tag and adding unnecessary keyword "name" in the form tag.
<form onsubmit="return validation()" method="POST"
action="">
remove the "name" attribute from form tag and add action attribute.
Within the parenthesis in the action attribute, mention what happen if your validation success
Ex:(this code help you understand "action" attribute)
<form onsubmit="return productsvalidationform();" method="POST"
action="AddProductServlet">
when the form was successfully validated, I directed to AddProductServlet.(AddProductServlet is JSP servlet).
so that mention where do you need to redirect.
I have created a form in HTML and have use onblur event on each and every field and it is working very fine. The problem is when i click on submit button(which will send data to a servlet) the data is submitted even if it is invalid. Here is an example.
<html>
<head>
<script>
function check()
{
if(checkName()==true)
return true;
else{
alert('vhvh');
return false;
}
}
function checkName()
{
var uname=document.enq.Name.value;
var letters = /^[A-Za-z, ]+$/;
if(uname.match(letters))
{
document.getElementById('Name').style.borderColor = "black";
return true;
}
else
{
document.getElementById('Name').style.borderColor = "red";
//alert('Username must have alphabet characters only');
//uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="enq" method="post" action="Enquiry" onsubmit="check()">
<input class="textbox" id="Name"style="margin-top:10px;font-size:16px;" type="text" name="Name" placeholder="Full Name" onblur="checkName()" required /><br><br>
<input class="button" type="submit">
</form>
</body>
</html>
How can i resolve this issue?
use
<input class="button" type="button">
and put a onclick event like this:
<input class="button" type="button" onclick="this.submit()">
so you can manipulate data before you subimit it.
There is an "onsubmit" event that allows you to control form submission. Use it to call your validation functions, and only then decide if you want to allow the user to submit the form.
http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html
You have to use it in the following way if you want it to prevent the form submission:
<form onsubmit="return check()">
In mi validation form I have two input fields in order to write email and confirm it.
Before the submit informations, two confirms are needed:
1-email must seems an email,
2-email one must match the email two.
I can handle these statements each one using two separate javascript functions but i fail when I try to check them all in the onsubmit event attribute. If I write a correct email adress, the form reach the action destination, even if the confirm email doesn't match.
Looking around the web doesn't help me.
Here u are the code (html/javascript):
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Email Validation</title>
<script type="text/javascript">
function isEmail(email, output) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById(email).value;
if (regex.test(email)) {
return true;
} else {
document.getElementById(output).innerHTML = 'wrong email';
return false;
}
}
function compareEmail(email, emailToCompare, output){
var email = document.getElementById(email).value;
var emailToCompare = document.getElementById(emailToCompare).value;
if(emailToCompare == email){
document.getElementById(output).innerHTML = 'ok!';
return true;
}else{
document.getElementById(output).innerHTML = 'emails dont match!';
return false;
}
}
function check(){
return isEmail() && compareEmail();
}
</script>
</head>
<body>
<form action="file.php" method="post" onSubmit="return check()">
<p>Email</p>
<input type="text" name="email" maxlength="50" id="email">
<div id="email_result">
</div>
<br/>
<p>Confirm email</p>
<input type="text" onpaste="return false;" autocomplete="off" name="email" maxlength="50" id="confirm_email" onKeyUp="return compareEmail('email', 'confirm_email', 'confirm_email_result')">
<div id="confirm_email_result">
</div>
<input type="submit" name="submit" value="Register" onclick="return isEmail('email', 'email_result');">
</form>
</body>
The double control doesn't work with the follow script too:
function check(){
if (isEmail() && compareEmail()){
return true;
}else{
return false;
}
}
Nothing changes if I use:
onSubmit="return check()"
or
onSubmit="check()"
in the form event attribute.
You are missing the parameters in the function calls:
function check(){
return isEmail('email', 'email_result') && compareEmail('email', 'confirm_email', 'confirm_email_result');
}
Side note: You have declared variables in the functions with the same name as the parameters. It still works at it is, but the variables are not actually created but will overwrite the parameter values, so the code is a bit confusing.
My goal is to have a text box and a button. If I enter "Hello" in the text box and press the submit button I would like to have see the text box filled with "World.
For the moment the value of the text box will be changed betweeen the
<html>
<body>
<script>
function validateForm() {
var x = document.forms["myForm"]["Input"].value;
if (x == "Hello") {
alert("test");
document.getElementById("Input").value = "World";
alert("test2");
}
}
</script>
<form name="myForm" action="test.html" onsubmit="return validateForm()" method="post">
Input: <input type="text" id="Input"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The problem is that the form gets submitted right after the validation. So you are redirected to test.html again.
If you don't want that to happen, add event.preventDefault(); to your Event Handler (check out the fiddle to see it working):
<html>
<body>
<script>
function validateForm(event) {
event.preventDefault();
var x = document.forms["myForm"]["Input"].value;
if (x == "Hello") {
alert("test");
document.getElementById("Input").value = "World";
alert("test2");
}
}
</script>
<form name="myForm" action="test.html" onsubmit="return validateForm(event)" method="post">
Input: <input type="text" id="Input"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
You can learn more about event.preventDefault() at MDN.
Just as a sidenote: It is generally better to use addEventListener instead of the onsubmit attribute (Better separation of concerns, you can add multiple event listeners, etc.).
When you submit your page, then the content in the action page will be loaded.
In your case test.html will be loaded.
If you want the value "World" to be shown in the text box on hitting the submit, then return false on your validateForm() method.
Use return false; to stay on the same page and stop form submission.
function validateForm() {
var x = document.forms["myForm"]["Input"].value;
if (x == "Hello") {
document.getElementById("Input").value = "World";
return false;
}
}
I have a form in index.jsp and after clicking submit i am showing an alert "confirm submit?" if ok will be clicked then confirmsubmit.jsp will be displayed. I am getting text box name in confirmsubmit.jsp by request.getParameter("textboxname");But problem is if I click cancel then also confirmsubmit.jsp is opening, how can I stay in index.jsp after clicking cancel button in alert?
Any help please
index.jsp
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
<!--
function confirmation() {
var answer = confirm("Confirm submit?")
if (answer){
window.location = "confirmsubmit.jsp";// goes to confirmsubmit.jsp
}
else{
//should remain in index.jsp but here also confirmsubmit.jsp is opening
}
}
//-->
</script>
<input type="text" name="textboxname"/>
<input type="submit" onclick="confirmation()"/>
</form>
Add following line in the else part:
return false;
and change your onclick to:
return confirmation();
=== UPDATE ===
Because you have the confirmsubmit.jsp in the form action, you don't need the window.location:
function confirmation() {
if (!confirm("Confirm submit?")) {
return false;
}
}
Also see this example.
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
<!--
function confirmation() {
var answer = confirm("Confirm submit?")
if (answer){
window.location = "confirmsubmit.jsp";// goes to confirmsubmit.jsp
return true;
}
else{
//should remain in index.jsp but here also confirmsubmit.jsp is opening
return false;
}
}
//-->
</script>
<input type="text" name="textboxname"/>
<input type="submit" onclick="return confirmation()"/>
</form>
Take off return from onclick and add return false; if !answer
<script type="text/javascript">
function confirmation() {
var answer = confirm("Confirm submit?")
if (!answer){
return false;
}
}
</script>
<form action="confirmsubmit.jsp" method="POST">
<input type="text" name="textboxname"/>
<input type="submit" onclick="confirmation()"/>
</form>