Можно ли вызвать функцию JS и как? - PullRequest
Новая
       11

Можно ли вызвать функцию JS и как?

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

Сообщество Окей, 

function validate() {
  var name = document.getElementById("name").value;
  var p = document.getElementById("pname");
  
  console.log("validating");  // added by PM-77-1

  if (name === null) {
    p.className += " show";
    return false;
  } else {
    return true;
  }
}
.split {
  height: 100%;
  position: fixed;
  top: 0;
}

.left {
  left: 0;
  width: 40%;
}

.right {
  right: 0;
  width: 60%;
}

.form {
  margin: 30% 5% 30% 5%;
}

.input {
  margin: 2% 2% 2% 2%;
  height: 40px;
  width: 35%;
}

.lower {
  width: 76%;
}

h6 {
  background-color: #3399ff;
  margin-top: 0px;
  min-height: 50px;
  max-height: 50px;
  font-size: 32px;
  color: white;
}

button {
  background-color: #3399ff;
  color: white;
  width: 77%;
  min-height: 50px;
  border: none;
  border-radius: 5px;
  margin-top: 10%;
}

body {
  font-family: Futura Md BT;
}

#map_canvas {
  height: 100%;
}

.name {
  display: none;
}

.lastname {
  display: none;
}

.address {
  display: none;
}

.city {
  display: none;
}

.country {
  display: none;
}

.show {
  display: block;
  margin-top: 0px;
  margin-bottom: 0px;
  color: red;
}
<div class="split left">
  <center>
    <h6>User Details</h6>
    <div class="form">
      <form action="input.php" method="POST" onsubmit="event.preventDefault(); validate()">
        <p class="name" id="pname">Please enter First Name</p>
        <p class="lastname" id="lastname">Please enter Last Name</p>
        <p class="address" id="address">Please enter Street / Number</p>
        <p class="city" id="city">Please enter City</p>
        <p class="country" id="country">Please enter country</p>
        <input type="text" class="input" id="name" name="firstname" placeholder="First Name">
        <input type="text" class="input" id="lastname" name="lastname" placeholder="Last Name"><br>
        <input type="text" class="input lower" id="address" name="streetnumber" placeholder="Street / Number"><br>
        <input type="text" class="input lower" id="city" name="city" placeholder="City"><br>
        <input type="text" class="input lower" id="country" name="country" placeholder="Country"><br>
        <button type="submit" onclick="return validate()">Add User</button>
      </form>
    </div>
  </center>
</div>

Пожалуйста, проверьте это и скажите мне, почему это не работает. Я перепробовал все, но почему-то мой js не срабатывает. Я изменил идентификаторы и все. Плюс, скажите мне, правильно ли я поступил в форме с проверкой значения по умолчанию, потому что я делаю это впервые. Спасибо всем большое.

Я использую body onload (для запуска карты Google), но я не вставил эту часть, она отлично работает.

Пожалуйста, помогите мне с примером, Спасибо ты такая большая община !!!

Ответы [ 4 ]

2 голосов
/ 17 января 2020

Ваша функция validate вызывает просто отлично, но некоторые операторы внутри нее выполняются не очень хорошо. Несколько проблем здесь:

1- Чтобы добавить класс к элементу p, используйте p.classList.add("className")

2- Когда пользователи оставляют поле имени пустым, значение представляет собой пустую строку (''), не нуль. Итак, вместо проверки: 

if (name === null)

Вместо этого проверьте: 

if(name == '')

//or, even shorter:
if(!name)

Следовательно, JS становится: 

function validate() {
  var name = document.getElementById("name").value;
  var p = document.getElementById("pname");

  console.log("validating");

  if (!name) {
    p.classList.add( "show");
    return false;
  } else {
    return true;
  }
}
2 голосов
/ 17 января 2020
  • Прежде всего, в теле вашего тега вы вызываете функцию, которую вы не определили.
  • Второй в вашем onclick формы, вы помещаете return functionCall(), когда просто необходима функция. без слова return.
  • В-третьих, я не знаю, видели ли вы, но в вашем HTML дублируется множество идентификаторов, когда у вас может быть только 1 идентификатор (именно поэтому он называется идентификатором)
  • В последнем я рекомендую изменить функцию проверки на что-то вроде этого: 
function validate() {
    console.log("eslloooooooo")
    var name = document.querySelector("#name").value;
    var p = document.querySelector("#pname");

    if (name.innerHTML === '') {
        p.classList.add("show");
    }
}

Я рекомендую сначала вызвать ее, вы можете использовать querySelector, который использует селекторы CSS, а также вы можете использовать опцию classList вашего узла, чтобы добавить класс к вашему элементу.

Надеюсь, это поможет вам

1 голос
/ 17 января 2020

onclick не должен ничего возвращать, поэтому вы можете удалить () и просто иметь имя функции 

<button type="submit" onclick="return validate()">Add User</button>
<!-- Should be -->
<button type="submit" onclick="validate">Add User</button>

Кроме того, вы проверяете null, когда вы должны проверка на пустую строку 

if (name === null) { ... }
// Should be
if (name === '') { ... }
0 голосов
/ 17 января 2020

Похоже, что вы вызываете initialize () при загрузке тела (в вашем HTML), когда вы должны вызывать функцию validate ().

...