Question

通常我这样做：

onclick="myFunction()"

在我的提交按钮上，但我现在想要在html上做的是

<form id="myForm">
<input type="text" id="myTextBox" required> <!-- we're gonna use this id: myTextBox because we're using the getElementById() -->
<input type="submit" value="Click Me"> <!-- we call the function here -->
</form>

JS上的

document.getElementById("myForm").onsubmit = validateBarForm;
    function validateBarForm() {

        var myValue = document.getElementById('myTextBox').value; // inside the getElementById, which element we want to get? 
        if (myValue.length === 0) {
            alert('Please enter a real value in the TextBox');
            return;
        }

但它不起作用？我怎样才能过滤空白或空白而不是使用必需的？

Answer 1

document.getElementById("myForm").onsubmit = validateBarForm;
function validateBarForm() {

    var myValue = document.getElementById('myTextBox').value; // inside the getElementById, which element we want to get? 
    if (myValue.toString().trim().length === 0) {
        alert('Please enter a real value in the TextBox');
        return false;
    }

EDIT1 我道歉，因为我没有解释。下面我要解释这个变化。我只是修剪了输入的字符串值，以便删除任何空格。此后，我们可以安全地检查输入数据的长度为0.同样在警报的情况下，即在警报后输入不正确时，我们应该返回false，以便表单不提交。

如果函数被内联调用，例如onclick =＆＃34; validateBarForm（）;＆＃34;它应该正确地与return语句一起使用，如onclick =＆＃34; return validateBarForm（）;＆＃34;因此，如果函数返回false，则不会触发表单提交操作。

Answer 2

使用此代码：

<form id="myForm" action="#">
<input type="text" id="myTextBox" required> 
<input type="submit" value="Click Me" onclick="validateBarForm()">
</form>
    <script>
    function validateBarForm() {
         var myvalue = document.getElementById("myTextBox").value;
        if(myvalue.length === 0){
            alert("Please enter a real value in the TextBox");
            return false;
        }
        else
            return true;
    }
    </script>

或者，使用此代码：

<form id="myForm" action="#">
<input type="text" id="myTextBox" required oninvalid="alert('Please enter a real value in the TextBox')"> 
<input type="submit" value="Click Me">
</form>

如何使用javascript函数提交表单ID？

2 个答案: