提交时的 Javascript 输入长度验证，仍然提交

Question

我尝试验证用户输入并检查值的长度，如果它小于 x 那么它应该alert("..") 。 我将这段代码与我在这里和那里找到的一些代码一起捕获，我尝试了很多东西，但没有任何效果。 它总是提交。 如果我写

<form ... onsubmit="false">..</form> 

无论如何它都会提交，但它不应该或不？

这是我的代码片段，我希望任何人都可以帮助我。

<form name="form" action="go.php" id="form" onsubmit="return validate('text',5)">
    Text: <input type="text" name="text" id="text" />
    <input type="submit" name="submit" value="submit" />
</form>

<script>
    function validate(input,length) {
        submit = true;
        var elemlength = document.getElementbyId(input).value.length;
        alert(":" + elemlength);
        if(elemlength < length){
            submit=false;
            alert("ivalid length");
        }
        return submit;
    }
</script>

Answer 1

我想你只是有一个错字它是document.getElementById而不是document.getElementbyId 。

 <form name="form" id="form" onsubmit="return validate('text',5)"> Text: <input type="text" name="text" id="text" /> <input type="submit" name="submit" value="submit" /> </form> <script> function validate(input,length) { submit = true; var elemlength = document.getElementById(input).value.length; alert(":" + elemlength); if(elemlength < length){ submit=false; alert("ivalid length"); } return submit; } </script>

如果你想阻止表单提交，你的代码应该像这样<form ... onsubmit="return false">..</form>

Answer 2

 "use strict"; let button = document.querySelector('#button'); let input = document.querySelector('#text'); let minLength = 5; button.addEventListener('click', validate); function validate(event) { if (input.value.length < minLength) { event.preventDefault(); alert('Input text is smaller then ' + minLength); } }

 <form name="form" action="go.php" id="form"> Text: <input type="text" name="text" id="text" /> <input type="submit" name="submit" value="submit" id ="button"/> </form>