如果发现错误，防止提交 HTML 表单

Question

I have a form where the user is supposed to enter a number, and some javascript that validates it. I have the following code for my submit button:

<input onclick="validate()" type="submit" value="Submit">
<p id="displaytext"></p>

and the javascript to go with it:

function checkInt() {
    var amount, text;
    amount = document.forms["formname"]["amount"].value;

    if (isNaN(amount)) {
        text = "amount must be an integer";
        document.getElementById("displaytext").innerHTML = text;
    }
}

My javascript code works correctly and displays the message, the problem I am having is that I need to form to not submit when the input is not a number. I need to to display "amount must be an integer" and stay on that page. What I have now will quick display that amount is not an integer, but when go on and submit the form anyway.

Answer 1

If this is a form, you can use event.preventDefault() and handle error output message in your function.

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault