表单验证问题 Javascript

Question

我正在尝试让我的 HTML 和 Javascript 代码生成类似的提示（参见下图，原则上类似）。取而代之的是一个名为“HTML - 表单数据提取测试”的页面。

由于我的标签和 ID 已就位，我一直在努力找出我出错的地方，我一直在使用“getelementbyid”，定义了消息应该出现的所有实例。

任何帮助将不胜感激。提前致谢。

/* function validate()will validate form data */
function validate() {
  var jref = document.getElementById("jref").value;
  var fname = document.getElementById("fname").value;
  var lname = document.getElementById("lname").value;
  var dob = document.getElementById("dob").value;
  var email = document.getElementById("email").value;
  var genm = document.getElementById("genm").checked;
  var genf = document.getElementById("genf").checked;
  var saddress = document.getElementById("saddress").value;
  var stown = document.getElementById("stown").value;
  var pnumber = document.getElementById("pnumber").value;

  //NEED LABELS FOR
  //state dropdown
  //Skills drop down

  var errMsg = "";
  var result = true; /* assumes no errors */
  //var pattern = /^[a-zA-Z ]+$/;                   /* regular expression for letters and spaces only */

  if (jref == "") {
    errMsg += "Job Reference Number cannot be Empty\n";
    //errMsg = errMsg + "First Name cannot be 
  }

  if (fname == "") {
    errMsg += "First Name cannot be Empty\n";
  }

  if (lname == "") {
    errMsg += "Last Name cannot be Empty\n";
  }

  if (dob == "") {
    errMsg += "Date of Birth cannot be Empty\n";
  }

  if (email == "") {
    errMsg += "Email cannot be Empty\n";
  }

  if ((genm == "") && (genf == "")) { //check whether gender is selected
    errMsg += "A gender must be selected.\n";
  }

  if (saddress == "") {
    errMsg += "Street Address cannot be Empty\n";
  }

  if (stown == "") {
    errMsg += "Suburb or Town cannot be Empty\n";
  }

  if (pnumber == "") {
    errMsg += "Phone Number cannot be Empty\n";
  }

  if (errMsg != "") {
    alert(errMsg);
    result = false;
  }
  return result;
}

function init() {
  /* assign the <form> element to variable regForm */
  var appForm = document.getElementById("appForm");

  /* link function validate() to the onsubmit event of the form */
  appForm.onsubmit = validate;
}

/* execute function init() once the window is loaded*/
window.onload = init;

<main>

  <!-- Start of the form that the user fills out -->
  <form method="post" action="http://mercury.swin.edu.au/it000000/formtest.php" id="appForm">
    <h1>Job Application Form</h1>

    <label for="jref">Job Reference Number</label><br>
    <input type="text" name="jref" maxlength="5" id="jref" pattern="\d{4}" /><br>

    <fieldset>
      <label for="fname">First Name</label><br>
      <input type="text" id="fname" maxlength="20" name="fname" /> <br>

      <label for="lname">Last Name</label><br>
      <input type="text" id="lname" maxlength="20" name="lname" /><br>

      <label for="dob">Date of birth:</label><br>
      <input id="dob" type="date" name="dob" /><br>

      <label>Gender</label>
      <input id="genm" type="radio" name="genm" value="Male" />
      <label for="genm">Male</label>
      <input id="genf" type="radio" name="genf" value="Female" />
      <label for="genf">Female</label><br>

      <label for="saddress">Street Address</label><br>
      <input type="text" id="saddress" maxlength="40" name="saddress" /><br>

      <label for="stown">Suburb/Town</label><br>
      <input type="text" id="stown" maxlength="40" name="stown" /><br> State

      <br>
      <select name="slRank">
        <option value="">Choose</option>
        <option value="8">ACT</option>
        <option value="8">ACT</option>
        <option value="7">TAS</option>
        <option value="6">SA</option>
        <option value="5">WA</option>
        <option value="4">NT</option>
        <option value="3">QLD</option>
        <option value="2">NSW</option>
        <option value="1">VIC</option>
      </select><br>

      <label for="email">Email Address</label><br>
      <input type="email" id="email" name="email" placeholder="example@gmail.com" /><br>

      <label for="pnumber">Phone Number</label><br>
      <input type="tel" id="pnumber" name="pnumber" placeholder="(##) ####-####" /><br> Skills
      <select name="slRank">
        <option value="">Choose</option>
        <option value="9">Creativity</option>
        <option value="8">Interpersonal Skills</option>
        <option value="7">Critical Thinking</option>
        <option value="6">Problem Solving</option>
        <option value="5">Public Speaking</option>
        <option value="4">Communication</option>
        <option value="3">Collaboration</option>
        <option value="2">Accounting</option>
        <option value="1">Other</option>
      </select><br /><br />

      <label>Other Skills</label>
      <br />
      <textarea autofocus="autofocus" placeholder="Please fill out other skills you have here."></textarea><br>

      <input type="submit" value="Apply" />
      <input type="reset" value="Reset" />

    </fieldset>
  </form>
</main>

Answer 1

使用https://jqueryvalidation.org/ js 库进行表单验证