javascript - 如果未填写 inputField，则禁用导航到下一页

Question

如果页面为空，我想阻止用户访问下一页 输入字段。当该字段为空并且我单击按钮时，警报确实会显示，但我可以单击“确定”，然后进入下一页。

<script type="text/javascript">
    window.onload = function(){

        function checkFilled(inputField) {

            if(inputField.value.length > 1) {
                return true; 
                }
            else {
                    alert('field1 is not filled in');
                    $("#button1").click(function(e){
                    e.preventDefault();     
                    });                                 
                    return false; 
                }
            };  

            document.getElementById('button1').onclick = function() { 

            var field1 = document.getElementById('field1');
            checkFilled(field1);    
            };
        };  

</script>






<input type="text" name="field1"  id="field1"/>

    <a href="nextpage.html">

        <div id="button1"></div>

    </a>

Answer 1

您使用了a tag尽管 inputField 为空，但 href 属性已设置并让您立即进入下一页。这应该可以满足您的要求:

window.onload = function(){
  function checkFilled(inputField) {
    if(inputField.value.length > 1) {
      return true;
    }
    else {
      alert('field1 is not filled in');
      return false;
    }
  };
  document.getElementById('button1').onclick = function() {
    var field1 = document.getElementById('field1');
    return checkFilled(field1);
  };
}; 

<input type="text" name="field1"  id="field1"/>
<form action="nextpage.html">
    <input id="button1" type="submit" value="next">
</form>

或者，如果您更喜欢使用 a 标签而不是按钮:

function checkFilled() {
  if(document.getElementById("field1").value.length > 1) {
    window.location.href="nextpage.html";
  }
  else {
    alert('field1 is not filled in');
    return false;
  }
}

<input type="text" name="field1"  id="field1"/>
<a href="#" onclick="checkFilled();">next</a>