提交空白時，我想查看表單驗證消息

Question

我在使用JavaScript進行表單驗證時遇到問題。 提交空白后，我想在表單中看到以下消息

通過使用以下html和javascript代碼，但未顯示，並且我無法處理問題所在。

 <!-- javascript code --> <script type="text/javascript"> function validate(){ if(document.frm.username.value == ""){ document.getElementById("text").innerHTML = "Fill up the username."; document.frm.username.focus(); return false; } if(document.frm.password.value ==""){ document.getElementById("text").innerHTML = "Fill up the password."; document.frm.password.focus(); return false; } if(document.frm_validate.confirmPassword.value == ""){ document.getElementById("text").innerHTML = "Fill up the confirm password."; document.frm.confirmPassword.focus(); return false; } if(document.frm_validate.firstName.value == ""){ document.getElementById("text").innerHTML = "Fill up the first name."; document.frm.firstName.focus(); return false; } if(document.frm_validate.email.value == ""){ document.getElementById("text").innerHTML = "Fill up the email."; document.frm.email.focus(); return false; } return true; } </script> 

  <!-- form validation --> <form class="form-horizontal frm_validate" name="frm" action="#" onsubmit="validate()"> <fieldset> <legend>Form Validation</legend> <div class="form-group"> <label for="inputName" class="col-lg-3 control-label">Username<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="inputName" placeholder="Name" type="text" name="username"> <span id="text"></span> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-lg-3 control-label">Password<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="inputPassword" placeholder="....." type="text" name="password"> <span id="text"></span> </div> </div> <div class="form-group"> <label for="confirmPassword" class="col-lg-3 control-label">Confirm Password<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="confirmPassword" placeholder="....." type="text" name="confirmPassword"> <span id="text"></span> </div> </div> <div class="form-group"> <label for="firstName" class="col-lg-3 control-label">First Name<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="firstName" placeholder="First Name" type="text" name="firstName"> <span id="text"></span> </div> </div> <div class="form-group"> <label for="lastName" class="col-lg-3 control-label">Last Name</label> <div class="col-lg-9"> <input class="form-control" id="lastName" placeholder="Last Name" type="text"> </div> </div> <div class="form-group"> <label for="inputEmail" class="col-lg-3 control-label">Email<span class="star"> *</span></label> <div class="col-lg-9"> <input class="form-control" id="inputEmail" placeholder="Email" type="text" name="email"> <span id="text"></span> </div> </div> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <p><span class="star">* </span>Required field</p> </div> </div> <div class="form-group"> <div class="col-lg-9 col-lg-offset-3"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> 

Answer 1

使用內聯偵聽器時，它實際上包裝在一個函數中：

<form onsubmit="foo()" ...>

effectivley創建一個監聽器，例如：

onsubmit = function () {
  foo();
}

請注意，沒有return語句，因此偵聽器返回undefined 。 要使偵聽器返回false並因此取消Submit事件，必須包含return語句，因此：

    <form onsubmit="return foo()" ...>

變成：

onsubmit = function () {
  return foo();
}

因此，現在偵聽器返回函數返回的值。