показывать предупреждение, когда текстовое поле пусто - PullRequest
Новая
       23

показывать предупреждение, когда текстовое поле пусто

4 голосов
/ 15 января 2020

Я хочу показать предупреждение, когда в текстовое поле ввода имени пусто.

Javascript Код 

<script>
    function validation() {
        var fname = document.getElementByID("fname").value;
        if ( fname== "")
            alert("Enter First Name");
    }
</script>

HTML Код 

    <form>
        First name:
        <input type="text" id="fname">
        <br/><br/>
        <button id="btnSubmit" onclick="validation()">Submit</button>
        <button id="btnReset">Reset</button><br/>
        <button id="btnMenue"><a href= "index.php">Menue</a></button>
    </form>

Я пробовал соответствующие статьи, но они не решили мою проблему.

Ответы [ 2 ]

4 голосов
/ 15 января 2020

Две проблемы в вашем коде:

  1. getElementByID должно быть getElementById
  2. Вам нужно захватить объект события и вызвать на нем preventDefault, чтобы остановить настройку по умолчанию поведение, которое останавливает отправку формы. 

function validation(e) {

  var fname = document.getElementById("fname").value; // Typo here ID should be Id.
  if (fname == "") {
    e.preventDefault();
    alert("Enter First Name");
  }

}
<form>
  First name:
  <input type="text" id="fname"><br/><br/>
  <button id="btnSubmit" onClick="validation(event)">Submit</button>
  <button id="btnReset">Reset</button><br/>
  <button id="btnMenue"><a href= "index.php">Menue</a></button>
</form>
2 голосов
/ 15 января 2020

document.getElementByID is not a function, в вашем коде есть тип:

getElementByID <- последняя буква в вашем коде большая, должна быть маленькой <code>getElementById

рабочий пример 

function validation() {
  //                               big D, throws error 
  // var fname = document.getElementByID("fname").value;
     var fname = document.getElementById("fname").value;
  console.log(fname);
  if (fname == "")
    alert("Enter First Name");
}

 
<form>
  First name:
  <input type="text" id="fname"><br/><br/>

  <button id="btnSubmit" onclick="validation()">Submit</button>
  <button id="btnReset">Reset</button><br/>
  <button id="btnMenue"><a href= "index.php">Menue</a></button>
</form>
...