Copy link to clipboard
Copied
I have investigated for a long time (too long) on the net (StackOverflow e.g.) without any success. The question is asked by many people but no one among the proposed solutions helps me. So in desperation, I turn to this forum, even though DW has nothing to do with it.
< form id = "myForm" method = "Post " action = "updateMySQLGuests. php " onsubmit = "return formSubmit () ">
This boolean result function checks whether the value of the fields is correct before calling Update... to create a record with the value of these form fields by POST method in MySQL. But "action= updateMySQLGuests.php " is executed before the formSubmit() function (which, in fact, is not executed at all). I work in localhost with Wampserver.
Thanks in advance for answer.
In your function you are most probably not using 'return false' if there is a form error (a field you want the user to complete) so it allows anything through to the php form processing script.
Try the below code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
</head>
<body>
<form id="myForm" method="Post "action="updateMySQLGuests.php "onsubmit="return formSubmit()">
<div>
<label for="name">Name</label><br>
<input type="text" name="name" class="name">
</div>
...Copy link to clipboard
Copied
In your function you are most probably not using 'return false' if there is a form error (a field you want the user to complete) so it allows anything through to the php form processing script.
Try the below code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
</head>
<body>
<form id="myForm" method="Post "action="updateMySQLGuests.php "onsubmit="return formSubmit()">
<div>
<label for="name">Name</label><br>
<input type="text" name="name" class="name">
</div>
<div>
<label for="email">Email</label><br>
<input type="text" name="email" class="email">
</div>
<input type="submit" name="submit" value="Sumbit">
</form>
<script>
function formSubmit() {
const name = document.querySelector('.name').value;
/*check name form field is not empty */
if(name === '') {
alert('Please provide your name');
return false;
}
const email = document.querySelector('.email').value;
/* check email form field is not empty */
if(email === '') {
alert('Please provide your email');
return false;
}
/* check email provided is valid */
var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
if (pattern.test(email)) {
return true;
} else {
alert('Invalid email address');
return false;
}
}
</script>
</body>
</html>
Copy link to clipboard
Copied
To add to what osgood_ has said, I normally use a <button></button> tag to submit a form, instead of <input type="submit" />. The button will call the function, then the function will submit the form if validation has been successful.
<script>// type is no longer needed, as javascript is assumed default.
function myFunction(){
warn = "";
{perform validation}
if(warn !== ""){ //validation failed
alert(warn);
return false;
}
else{
document.myForm.submit();
}
}
</script>
<form name="myForm" id="myForm" action="mySubmit.php">
...
<button onclick="return myFunction();">Submit</button>
</form>
HTH,
^ _ ^
Copy link to clipboard
Copied
Do not forget to specify method="post" in <form name="myForm" id="myForm" action="mySubmit.php">
I change well <input type="submit" value="post"/> into you suggested
<button onclick="return validateValues()">Submit</button>
And this works perfectly.
But there is another problem.
If I write <button onclick="return formSubmit()">Submit</button> in order to call inside formSubmit() a beforeSubmit() containing different validateValues(), 2(), 3()..., the cascading calls of formSubmit()=>beforeSubmit()=>validateValues() does not work as it does not go further than formSubmit(). Strange... I have to investigate. Maybe I made some ridiculous mistake.
<script type="text/javascript">
function beforeSubmit() {;
if (validateValues())
{
return validateValues2()
}
return false;
}
</script>
<script type="text/javascript">
function formSubmit() {
return beforeSubmit();
}
</script>
MANY THANKS IN ANY CASE!
Copy link to clipboard
Copied
The problem came from returning directly the boolean value of the function. Solution (strange solution):
<script type="text/javascript">
function beforeSubmit() {;
if (validateValues() == true) {
if validateValues2() == true) {
return true;
}
}
return false;
}
</script>
<script type="text/javascript">
function formSubmit() {
if (beforeSubmit() == true) {
return true;
}
return false;
}
</script>