Deaktivieren der Navigation zur nächsten Seite, wenn EingabeFeld nicht ausgefüllt ist

Question

Ich möchte verhindern, dass der Benutzer auf die nächste Seite zugreift, wenn ein leeres inputField vorhanden ist. Die Warnung wird angezeigt, wenn das Feld leer ist, und ich klicke auf die Schaltfläche, aber ich kann auf "OK" klicken und ich werde zur nächsten Seite weitergeleitet.

<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

Sie verwendet eine a tag wo das href Attribut gesetzt und bringt Sie sofort auf die nächste Seite, obwohl die inputField leer. Dies sollte das tun, was Sie wollen:

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>

Oder wenn Sie ein a Tag statt einer Taste verwenden:

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>