Question

我正在尝试使用以下代码按下提交按钮时显示span标记：

<form onsubmit="checkName(this);">
    <ul>
        <li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
        ...
        <li><input type="submit"></li>
    </ul>
</form>

我的Javasrcipt：

function checkName(form){
    if (form.username.value == "") {
        document.getElementById("surnameMissing").style.visibility = "visible";        
    }
    return false;
}

最初将范围设置为隐藏并在提交时更改，但标记仅在瞬间显示，然后返回隐藏状态。有关为什么会这样的建议吗？

Answer 1

提交了这个form，这就是为什么你只看到它的第二个原因。

如果表单无效，您需要阻止提交 - 在属性return中添加onsubmit。

像这样：

＆＃13;

function checkName(form) {
  if (form.username.value == "") {
    document.getElementById("surnameMissing").style.visibility = "visible";        
  }
  return false;
}

＆＃13;

#surnameMissing {
  visibility:hidden;  
}

＆＃13;

<form onsubmit="return checkName(this);">
    <ul>
        <li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
        ...
        <li><input type="submit"></li>
    </ul>
</form>

＆＃13;

另一种选择是将事件传递给函数，然后像这样使用.preventDefault()：

＆＃13;

function checkName(form, event) {
  event.preventDefault();
  if (form.username.value == "") {
    document.getElementById("surnameMissing").style.visibility = "visible";        
  }
  return false;
}

＆＃13;

#surnameMissing {
  visibility:hidden;  
}

＆＃13;

<form onsubmit="checkName(this, event);">
    <ul>
        <li>Surname<br><input type="text" name="username"><span id="surnameMissing">Surname is a required field</span></li>
        ...
        <li><input type="submit"></li>
    </ul>
</form>

＆＃13;

Answer 2

这是因为单击“提交”后会提交表单。要阻止它提交，请使用此代码。

<script>
    function checkName(form){
    if(form.username.value == ""){
        document.getElementById("surnameMissing").style.visibility = "visible";        
        return false;
    }
    return true;
    }
</script>
<form onsubmit="return checkName(this);">
<ul>
    <li>Surname<br><input type="text" name="username"><span style="visibility:hidden;" id="surnameMissing">Surname is a required field</span></li>
    ...
    <li><input type="submit"></li>
</ul>
</form>

Answer 3

通过在功能名称下添加event.preventDefault();来阻止提交表单。然后确保在username.value == ""返回false时提交表单。

function checkName (form) {
    // prevent from submission
    event.preventDefault();

    if(form.username.value == "") {
        document.getElementById("surnameMissing").style.visibility = 'visible';
    } else {
        // Submit on successful validation
        form.submit();
    }
}

您还可以在表单的onsubmit属性中调用函数之前添加event.preventDefault()。

<form onsubmit="event.preventDefault(); checkName(this);"> ... </form>

就个人而言，我还想在输入过程中捕获事件。不只是在提交期间。

<form id="myForm">
    <ul>
        <li>Surname: <br><input type="text" name="username" id="username">
        <span id="surnameMissing">Surname is a required field</span></li>
        <li><input type="submit"></li>
    </ul>
</form>

和javascript

var form = document.getElementById("myForm");
form.addEventListener('submit', function(e) {
    e.preventDefault();

    if(this.username.value == "") {
        document.getElementById("surnameMissing").style.visibility = 'visible';
    } else {
        this.submit();
    }
});

var inputUsername = document.getElementById("username");
inputUsername.addEventListener('keyup', function(e) {
    if(this.value == "") {
        document.getElementById("surnameMissing").style.visibility = 'visible';
    } else {
        document.getElementById("surnameMissing").style.visibility = 'hidden';
    }
});

改变提交时的可见性 - 仅显示闪烁

3 个答案: