Question

我试图制作表格，但是遇到一个问题，一旦按下提交按钮，并且我的JavaScript函数运行之后，span标记中的第二条消息就消失了，并且只显示了第一条消息。 / p>

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>

Answer 1

似乎仅出现第一条消息，因为未完成对其余部分的检查。一旦遇到第一个错误，您就停止执行validate函数。您可以尝试如下检查所有错误：

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;
}

Answer 2

问题是您return false处于if语句中。如果您return（在这种情况下为false），它将结束功能。所有其他if语句将不会执行。要解决此问题，只需在每个if语句上删除return false。由于将不使用返回值，因此您甚至不需要返回值。

问题在于（因为您没有停止函数并返回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>

因此，您最后检查表单是否有效，并在完成所有验证后结束函数。

Span标签在JavaScript功能后变得不可见

2 个答案: