使用 javascript 函数验证表单

Question

我正在尝试使用 JavaScript 函数验证表单。 我认为它有效，但输出几乎立即消失。

这是相关的代码：

<form name="myForm">
    Your Age: <input type="text" name="age">
    <input type="submit" value=" Send " id="submit">
</form>



document.getElementById("submit").addEventListener("click", validate);

function validate () {

    var x = document.forms["myForm"]["age"].value;

    if (x > 0) {
        document.getElementById("demo").innerHTML = "Congrats you have entered x, your answer has been submitted";
    }
    else {
        document.getElementById("demo").innerHTML = "ERROR: Please enter a valid age";
        return false;
    }

}

男孩子们怎么看？

Answer 1

您必须通过在validate函数中获取event参数并使用.preventDefault();来防止默认行为.preventDefault(); 以防止默认行为。

然后，如果条件满足，则使用submit()函数通过 JavaScript submit()表单。
为此，要么添加action和method要么使用 ajax。

 document.getElementById("submit").addEventListener("click", validate); function validate (e) { e.preventDefault(); var x = document.forms["myForm"]["age"].value; if (x > 0) { document.getElementById("demo").innerHTML = "Congrats you have entered x, your answer has been submitted"; //submit your form here by using formelement.submit(); } else { document.getElementById("demo").innerHTML = "ERROR: Please enter a valid age"; return false; } }

 <form name="myForm"> Your Age: <input type="text" name="age"> <input type="submit" value=" Send " id="submit"> </form> <div id="demo"></div>