Мой HTML валидатор формы в Javascript не работает - PullRequest
Новая
       28

Мой HTML валидатор формы в Javascript не работает

0 голосов
/ 17 апреля 2020

Я все еще довольно новичок в javascript, поэтому, пожалуйста, держись со мной. Но я написал валидатор для моего HTML, хотя я не уверен, где я иду не так.

То, что я пытаюсь сделать ниже, это определить, есть ли вообще текст в поле «Имя». В коде лежит css, но я считаю, что моя проблема связана с моей функцией onsubmit и validate, так как в javascript, кажется, ничего не работает после того, как я нажму кнопку отправки. 

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
	<title>NewPatientForm</title>
	<link rel="stylesheet" type="text/css" href="NewPatient.css">
	
	<script>
		function validate() {
    var invalid = false;


    if(!document.Firstname.value.length) {
        invalid = true;
    }
	
    if(invalid) {
        document.getElementById("form-error").style.display = "inline-block";
        return false; //to make the text appear
    }
    return true;
}

	</script>
</head>
<body>
  <form id="NewPatientForm" method="post" action="#" onsubmit="return  validate();">
  <div class="form-element">
	<p id="form-error">All fields are required</p>
  </div>
  
  <div>
  <label for="Firstname">First Name
	<input type="text" name="Firstname" placeholder="First Name" id="Firstname">
	</label>
  </div>

  <div>
	<input type="submit" name="submit-button" value="Submit">
  </div>
  </form>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

Похоже, виновником была ваша попытка получить доступ к Firstname на объекте document.

Я заменил его на более стандартный метод document.getElementById() и он работает.

Некоторое прочтение: Становятся ли элементы дерева DOM с идентификаторами глобальными переменными? 

function validate() {
  var invalid = false;

  if(!document.getElementById('Firstname').value.length) {
      invalid = true;
  }

  if(invalid) {
      document.getElementById("form-error").style.display = "inline-block";
      return false;
  }
  return true;
}
#form-error {
  display: none;
}
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate()">
  <div class="form-element">
	  <p id="form-error">All fields are required</p>
  </div>
  
  <div>
    <label for="Firstname">First Name
    <input type="text" name="Firstname" placeholder="First Name" id="Firstname">
    </label>
  </div>

  <div>
	  <input type="submit" name="submit-button" value="Submit">
  </div>
</form>
0 голосов
/ 17 апреля 2020

Есть несколько опечаток, и я предложу еще кое-что. Во-первых, исправление или три в коде: 

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NewPatientForm</title>

  <script>
    function validate() {
      const invalid = document.getElementById("Firstname").value.length == 0;
      if(invalid) {
        document.getElementById("form-error").style.display = "inline-block";
        return false; //to make the text appear
      }
      return true;
    }

  </script>
</head>
<body>
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate();">
    <div class="form-element">
        <p id="form-error">All fields are required</p>
    </div>

    <div>
        <label for="Firstname">First Name
            <input type="text" name="Firstname" placeholder="First Name" id="Firstname">
        </label>
    </div>

    <div>
        <input type="submit" name="submit-button" value="Submit">
    </div>
</form>
</body>
</html>

Я предлагаю вам также взглянуть на встроенные HTML атрибуты проверки формы. Я думаю, что вы изобретаете колесо для таких вещей, как требование непустого имени. Почему бы не это вместо JavaScript? 

<input type="text" name="Firstname" id="Firstname" placeholder="First Name" required />

и многих других, например minlength = "", min = "", step = "", et c.

Plus все еще есть JavaScript хук в систему проверки с помощью .checkValidity (), так что вы можете позволить встроенной проверке выполнить тяжелую работу, а затем добавить больше ваших собственных пользовательских аспектов.

...