Highlighted

JavaScript versus PHP (not especially DW CC)

Explorer ,
Aug 19, 2018

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>

<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>

Views

294

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

JavaScript versus PHP (not especially DW CC)

Explorer ,
Aug 19, 2018

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>

<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>

Views

295

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 19, 2018 0
LEGEND ,
Aug 20, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
LEGEND ,
Aug 20, 2018

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 1
Explorer ,
Aug 20, 2018

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
Explorer ,
Aug 20, 2018

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0