Question

我想在输入字段旁边显示验证消息，当我删除FORM标签时，代码工作正常，但使用FORM验证消息很快消失，（闪烁）

                <h4>age must be 18 to 40</h4>
            <form name="regestration" >
                <div class="form-group ">
                    <input type="number" class="form-control" id="age" name="age" placeholder="age">
                </div>
                <p id="demo"></p>
                <div class="form-group ">
                    <button type="submit" class="btn btn-primary" onClick="return myFunction()">Submit</button>
                </div>
            </form>


<script>

function myFunction() {
    var x, demo;

    // Get the value of the input field with id="numb"
    x = document.getElementById("age").value;

    // If x is Not a Number or less than one or greater than 10
        if (x=="") {
        document.getElementById("demo").innerHTML = "Please Fill The Box";
        }
    else if (x<18) {
        document.getElementById("demo").innerHTML = "You Are UnderAge";
        }
    else if (x>40) {
       document.getElementById("demo").innerHTML = "You Are OverAge";
        }
    else {
       document.getElementById("demo").innerHTML = "Input OK";
    }

}
</script>

Answer 1

button type="submit"将提交form，因此除非reloaded处理程序返回submit
，否则您的网页将获得false

使用button type="button"（form将不会提交，FORM_ELEMENT.submit()会有帮助！）或e.preventDefault()以阻止submit按钮的行为。

（修改： <button type='button'将作为一个按钮，不能submit fomr因此您必须提交调用FORM_ELEMENT.submit()的表单如果您使用的是type='submit'，请使用event.preventDefault()来阻止提交按钮的行为。）

当您使用return FUNCTION_NAME()时，您的函数必须返回false才能停止表单提交。和return true适用于您希望提交form的条件。

＆＃13;

function myFunction() {
  var x, demo;
  x = document.getElementById("age").value;
  if (x == "") {
    document.getElementById("demo").innerHTML = "Please Fill The Box";
    return false;
  } else if (x < 18) {
    document.getElementById("demo").innerHTML = "You Are UnderAge";
    return false;
  } else if (x > 40) {
    document.getElementById("demo").innerHTML = "You Are OverAge";
    return false;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
    return false;
  }
}

＆＃13;

<h4>age must be 18 to 40</h4>
<form name="regestration">
  <div class="form-group ">
    <input type="number" class="form-control" id="age" name="age" placeholder="age">
  </div>
  <p id="demo"></p>
  <div class="form-group ">
    <button type="submit" class="btn btn-primary" onClick="return myFunction()">Submit</button>
  </div>
</form>

＆＃13;

Answer 2

您想在input旁边显示消息吗？这与form标记无关。

这是因为输入位于div中且消息不在那个消息中。 div是块级元素。

块级元素占据其父元素（容器）的整个空间，从而创建“块。

因此，您必须将#demo放在与input相同的容器中。然后你会看到消息仍然在它下面。这是因为它包含在p元素中。这是...块级元素。

将<p id="demo"></p>更改为<span id="demo"></span>，您就完成了。

<强> Demo

修改我的演示中的return false;会阻止表单提交以进行测试。

javascript form validaton，验证消息快速消失

2 个答案: