JavaScript validation is failing, yet the form is still getting submitted

Question

JavaScript validation is failing, yet the form is still getting submitted

I'm facing an issue with my JS validation. It seems to be working fine, checking for a valid number that isn't zero, but the form is still submitting. I've searched for a solution to this problem, but none seem to work for me. Any suggestions would be greatly appreciated.

Here is my Javascript code:

function checkNotZero()
{
    var theNumber = document.getElementById("theNumber").value;
    var str = /^\+?[1-9]\d*$/.test(theNumber);
    if ( str == false ) {
        alert('You have not entered a valid number');
        return false;
    } else {
        document.getElementById('numberCheck').submit();   
    }
}

This is my HTML code:

<form action="/next.php" method="post" id="numberCheck">
<input type="text" id="theNumber" value="0">
<button id="submitButton" OnClick="checkNotZero();">Add to Basket</button>
</form>

javascript

Answer 1

Answer №1

Instead of using a regular button, consider using an <input type="submit"> for the submit button.
Validate your form on the form's submit event rather than relying on onclick events. This ensures that the form is validated regardless of how it is submitted (e.g., through pressing "enter" or programmatically).
It is recommended to use .addEventListener instead of attributes to attach events to elements. Remember to use preventDefault() to stop the form from being submitted unintentionally.

Answer 2

Instead of using a regular button, consider using an <input type="submit"> for the submit button.
Validate your form on the form's submit event rather than relying on onclick events. This ensures that the form is validated regardless of how it is submitted (e.g., through pressing "enter" or programmatically).
It is recommended to use .addEventListener instead of attributes to attach events to elements. Remember to use preventDefault() to stop the form from being submitted unintentionally.

Answer 3

Answer №2

To validate a form using JavaScript, the validation should be triggered when the form is submitted. Make sure the form is not submitted unless the validation is correct.

<html>
<head>
<script type="text/javascript>
function checkNotZero()
{
var theNumber = document.getElementById("theNumber").value;
var str = /^\+?[1-9]\d*$/.test(theNumber);
if ( str == false ) {
alert('You have not entered a valid number');
return false;
} else {
document.getElementById('numberCheck').submit();   
}
}
</script>
</head>
<body>
<form action="/next.php" method="post" id="numberCheck"  onsubmit="return       
checkNotZero()">
<input type="text" id="theNumber" value="0">
 <button id="submitButton">Add to Basket</button>
</form>
</body>
</html>

The key change here is in the form tag:

<form action="/next.php" method="post" id="numberCheck"<br>
onsubmit="return checkNotZero()">

Avoid using the onclick event in the submit button.

Answer 4

To validate a form using JavaScript, the validation should be triggered when the form is submitted. Make sure the form is not submitted unless the validation is correct.

<html>
<head>
<script type="text/javascript>
function checkNotZero()
{
var theNumber = document.getElementById("theNumber").value;
var str = /^\+?[1-9]\d*$/.test(theNumber);
if ( str == false ) {
alert('You have not entered a valid number');
return false;
} else {
document.getElementById('numberCheck').submit();   
}
}
</script>
</head>
<body>
<form action="/next.php" method="post" id="numberCheck"  onsubmit="return       
checkNotZero()">
<input type="text" id="theNumber" value="0">
 <button id="submitButton">Add to Basket</button>
</form>
</body>
</html>

The key change here is in the form tag:

<form action="/next.php" method="post" id="numberCheck"<br>
onsubmit="return checkNotZero()">

Avoid using the onclick event in the submit button.

JavaScript validation is failing, yet the form is still getting submitted

Answer №1

Answer №2

Similar questions

What is the best way to make an element fixed vertically in a mobile browser while also enabling horizontal scrolling?

The Angular router seems to be refusing to show my component

The function of style.marginRight differs from that of style.marginLeft

What is the best way to apply attributes to all titles throughout a webpage?

Update the CSS styling of a parent div based on the active state of specific child divs

What occurs in the event of a server crash following the scheduling of a task using cron?

Ways to generate multiple elements using JavaScript

Error Message: Unable to retrieve property "country" as the variable this.props is not defined

At what point in time does the LoadingFrameComplete event in Awesomium typically happen?

Having difficulty retrieving the value of a dynamically selected radio button in AngularJS

What issues are hindering the successful export of my Vue component packaged with npm?

AngularJS: The blend of bo-bind, bindonce, and the translate filter

Import a precise model from a glb file

Utilizing a Single Variable Across Multiple Middlewares in nodeJS

Exploring how to use React with a select component featuring objects

Glitchy/Crazy CSS3 Animations

tinyScroll currently disabled

What is the best way to rearrange (exchange) elements within an Immutable Map?

Is it necessary to include specific versions in package.json when committing the yarn.lock file?

Completing the regex properly