Javascript验证日期脚本不起作用

时间:2018-01-31 13:04:38

标签: javascript html css

我遇到了一个错误,我的脚本无法在我的HTML文件上运行。此脚本用于确保如果日期大于今天,则不​​会接受提交日期的输入。但是,当我将脚本转移到另一个HTML文件时,它可以工作。它只适用于这个单独的HTML文件。

function checkform() {
  answ = validateDate(document.getElementById("doa").value);
  if (answ == false) {
    return false;
  } else {
    return true;
  }

}

function validateDate(doa) {
  var d = new Date(doa);
  var n = new Date();
  if (d >= n) {
    alert("Date cannot be greater than today.");
    return false;
  }
  return true;
}
.welcome {
  font-weight: bold;
  font-family: Calibri;
  width: 100%;
  text-align: center;
}

.rating {
  text-align: center;
}

.particulars {
  text-align: center;
  font-weight: bold;
  font-style: italic;
}

.form {
  margin-left: 10%;
}

hr {
  border-color: #F172A1;
}

.column {
  background-color: #E64398;
  color: white;
}

.columnrating {
  background-color: #F172A1;
  color: white;
  text-align: center;
}

.columnrating2 {
  background-color: #A1C3D1;
  color: white;
  text-align: center;
}

.row {
  background-color: #F172A1;
  color: white;
}

.row2 {
  background-color: #779ecb;
  color: white;
}

.rowrating2 {
  background-color: #F7EFD7;
  text-align: center;
}

.buttons {
  background-color: #A1C3D1;
  color: white;
  padding: 5px 5px 5px 5px;
  margin-top: 5%;
}

table {
  font-family: Calibri;
}
<head>
  <title>Customer Feedback Survey</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="furpaws.css">
</head>

<body>
  <!--Header-->
  <table bgcolor="#F172A1" height="10%" width="100%" class="tab" />
  <tr>
    <td width="1%" rowspan="2" height="5%" align="center" valign="middle">
      <a class="bleft"><img src="webpublogo.png" height="13%" /></a>
    </td>
  </tr>
  </table>
  <!--End of Header-->

  <br/>

  <!--Caption and Info-->
  <h2 align="center">Customer Feedback Survey</h2>
  <hr>
  <p class="particulars">
    Please fill in the form<br> Required fields are marked with an asterisk *<br>
  </p>
  <hr>
  <!--End of Caption and Info-->
  <br>

  <!--Particulars-->
  <table class="form">
    <form action="feedbackresult.html" onsubmit="return checkForm()">
      <tr>
        <td><label for="firstname">First Name: </label></td>
        <td><input type="text" name="first" id="firstname"></td>
      </tr>
      <tr>
        <td><label for="lastname">Last Name: </label></td>
        <td><input type="text" name="last" id="lastname"></td>
      </tr>
      <tr>
        <td><label for="mobileNo">Handphone No:* </label></td>
        <td><input type="tel" name="hpno" id="mobileNo" placeholder="e.g 91234567" maxlength="8" minlength="8" required></td>
      </tr>
      <tr>
        <td><label for="doa">Date of Appointment:* </label></td>
        <td><input type="date" name="date" id="doa" min="2000-01-01" required></td>
      </tr>
  </table>
  <!--End of Particulars-->

  <br/>

  <!--Survey-->
  <table align="center" border="0" width="80%" height="50%" cellspacing="0" cellpadding="0">
    <col width="3%">
    <col width="0.4%">
    <col width="0.4%">
    <col width="0.4%">
    <col width="0.4%">
    <col width="0.4%">
    <tr>
      <td class="column" style="text-align:center"> Please rate the following areas:</td>
      <td class="columnrating2">Very Poor</td>
      <td class="columnrating">Poor</td>
      <td class="columnrating2">Fair</td>
      <td class="columnrating">Good</td>
      <td class="columnrating2">Very Good</td>
    </tr>
    <tr>
      <td class="row2">*Grooming Services</td>
      <td class="rowrating2"><input type="radio" name="groomingServices" id="veryPoor" required></td>
      <td class="rowrating2"><input type="radio" name="groomingServices" id="Poor"></td>
      <td class="rowrating2"><input type="radio" name="groomingServices" id="fair"></td>
      <td class="rowrating2"><input type="radio" name="groomingServices" id="good"></td>
      <td class="rowrating2"><input type="radio" name="groomingServices" id="veryGood"></td>
    </tr>
    <tr>
      <td class="row">*Customer Service</td>
      <td class="rowrating2"><input type="radio" name="customerService" id="veryPoor" required></td>
      <td class="rowrating2"><input type="radio" name="customerService" id="Poor"></td>
      <td class="rowrating2"><input type="radio" name="customerService" id="fair"></td>
      <td class="rowrating2"><input type="radio" name="customerService" id="good"></td>
      <td class="rowrating2"><input type="radio" name="customerService" id="veryGood"></td>
    </tr>
    <tr>
      <td class="row2">*Hospitality of your pets</td>
      <td class="rowrating2"><input type="radio" name="hospitality" id="veryPoor" required></td>
      <td class="rowrating2"><input type="radio" name="hospitality" id="Poor"></td>
      <td class="rowrating2"><input type="radio" name="hospitality" id="fair"></td>
      <td class="rowrating2"><input type="radio" name="hospitality" id="good"></td>
      <td class="rowrating2"><input type="radio" name="hospitality" id="veryGood"></td>
    </tr>
    <tr>
      <td class="row">*Groomers were polite</td>
      <td class="rowrating2"><input type="radio" name="groomers" id="veryPoor" required></td>
      <td class="rowrating2"><input type="radio" name="groomers" id="Poor"></td>
      <td class="rowrating2"><input type="radio" name="groomers" id="fair"></td>
      <td class="rowrating2"><input type="radio" name="groomers" id="good"></td>
      <td class="rowrating2"><input type="radio" name="groomers" id="veryGood"></td>
    </tr>
    <tr>
      <td class="row2">*Cleanliness of environment</td>
      <td class="rowrating2"><input type="radio" name="environment" id="veryPoor" required></td>
      <td class="rowrating2"><input type="radio" name="environment" id="Poor"></td>
      <td class="rowrating2"><input type="radio" name="environment" id="fair"></td>
      <td class="rowrating2"><input type="radio" name="environment" id="good"></td>
      <td class="rowrating2"><input type="radio" name="environment" id="veryGood"></td>
    </tr>
    <tr>
      <td class="row">&nbsp;Remarks</td>
      <td colspan="6" class="rowrating2"><textarea style="vertical-align:top;"> </textarea></td>
    </tr>
    <tr>
      <td colspan="6" align="center">
        <input type="submit" value="Submit" class="buttons">
      </td>
    </tr>
    </form>
  </table>
  <!--End of Survey-->
  <br/>
  <br/>
</body>

我很想知道我的HTML文件出了什么问题导致脚本无法正常工作。谢谢。

此致 标记

1 个答案:

答案 0 :(得分:0)

你刚刚错误地关闭了标签。它应该是这样的:

<!--Particulars-->
<form action="feedbackresult.html" onsubmit="return checkForm()">
    <table class="form">
        <tbody>
            <tr>
                <td>
                    <label for="firstname">First Name: </label>
                </td>
                <td>
                    <input type="text" name="first" id="firstname">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="lastname">Last Name: </label>
                </td>
                <td>
                    <input type="text" name="last" id="lastname">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="mobileNo">Handphone No:* </label>
                </td>
                <td>
                    <input type="tel" name="hpno" id="mobileNo" placeholder="e.g 91234567" maxlength="8" minlength="8" required="">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="doa">Date of Appointment:* </label>
                </td>
                <td>
                    <input type="date" name="date" id="doa" min="2000-01-01" required="">
                </td>
            </tr>
        </tbody>
    </table>
</form>