Тег Span становится невидимым после функции JavaScript - PullRequest
Новая
       4

Тег Span становится невидимым после функции JavaScript

0 голосов
/ 25 декабря 2018

Я пытался создать форму, но у меня возникла проблема, когда второе сообщение в теге span исчезает после запуска моей функции JavaScript после нажатия кнопки отправки и отображения только первого сообщения. 

function formValidate() {
  var fname = document.getElementById('firstname').value;
  if (fname == '' || fname == 'null') {
    document.getElementById('fnamemessage').innerHTML = '* Please fill out first name';
    return false;
  }

  var num = document.getElementById('mobilenumber').value;
  if (isNaN(num)) {
    document.getElementById('phonemessage').innerHTML = '* Please only enter numbers';
    return false;
  }
  if (num == '' || num == 'null') {
    document.getElementById('phonemessage').innerHTML = '* Please fill out mobile number';
    return false;
  }
  if (num.length < 11) {
    document.getElementById('phonemessage').innerHTML = '* Mobile number must be more than 10 digits';
    return false;
  }
  if ((num.charAt(0) != 0) && (num.charAt(1) != 7)) {
    document.getElementById('phonemessage').innerHTML = '* Mobile number must start with 07';
    return false;
  }

}
<form onsubmit='return formValidate()'>
  First Name: <input type='text' id='firstname' value=''>
  <span id='fnamemessage' class='messages'></span><br></br>
  Mobile Number: <input type='text' id='mobilenumber' value=''>
  <span id='phonemessage' class='messages'></span><br></br>
  <input type='submit' value='Submit'>
</form>

Ответы [ 2 ]

0 голосов
/ 25 декабря 2018

проблема в том, что вы return false в операторе if.Если вы return что-то (в данном случае false), это завершает функции.Все остальные операторы if НЕ будут выполнены.Чтобы это исправить, просто удалите return false в каждом операторе if.Поскольку возвращаемое значение не будет использовано, вам даже не нужно возвращаемое значение.

Проблема в том, что (поскольку вы не останавливаете функцию и не возвращаете false), форма будет отправлена, даже еслиВаши правила проверки не совпадают.В этом случае вы можете попробовать что-то вроде этого: 

function formValidate(event) {
  var valid = true;
  var fname = document.getElementById('firstname').value;
  if (fname == '') {
    document.getElementById('fnamemessage').innerHTML = '* Please fill out first name';
    valid = false;
  }

  var num = document.getElementById('mobilenumber').value;
  if (isNaN(num)) {
    document.getElementById('phonemessage').innerHTML = '* Please only enter numbers';
    valid = false;
  }
  if (num == '') {
    document.getElementById('phonemessage').innerHTML = '* Please fill out mobile number';
    valid = false;
  }
  if (num.length < 11) {
    document.getElementById('phonemessage').innerHTML = '* Mobile number must be more than 10 digits';
    valid = false;
  }
  if ((num.charAt(0) != 0) && (num.charAt(1) != 7)) {
    document.getElementById('phonemessage').innerHTML = '* Mobile number must start with 07';
    valid = false;
  }


  return valid;
}
<form onsubmit='return formValidate();'>

  First Name: <input type='text' id='firstname' value=''>
  <span id='fnamemessage' class='messages'></span><br></br>
  Mobile Number: <input type='text' id='mobilenumber' value=''>
  <span id='phonemessage' class='messages'></span><br></br>
  <input type='submit' value='Submit'>

</form>

Таким образом, вы в конце проверяете правильность своей формы и завершаете функции после ВСЕХ проверок.

0 голосов
/ 25 декабря 2018

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

function formValidate() {
    var valid = true;
    var fname = document.getElementById('firstname').value;
    if (fname=='' || fname==null) {
        document.getElementById('fnamemessage').innerHTML='* Please fill out first name';
        valid = false;
    }

    var num = document.getElementById('mobilenumber').value;
    if(isNaN(num)) {
        document.getElementById('phonemessage').innerHTML='* Please only enter numbers';
        valid = false;
    }
    if (num=='' || num==null) {
        document.getElementById('phonemessage').innerHTML='* Please fill out mobile number';
        valid = false;
    }
    if (num.length<11) {
        document.getElementById('phonemessage').innerHTML='* Mobile number must be more than 10 digits';
        valid = false;
    }
    if((num.charAt(0)!=0) && (num.charAt(1)!=7)) {
        document.getElementById('phonemessage').innerHTML='* Mobile number must start with 07';
        valid = false;
    }
    return valid;
}
...