The Date validation script in Javascript is malfunctioning

Question

The Date validation script in Javascript is malfunctioning

I encountered an issue where the script I used in my HTML file didn't work as expected. The purpose of this script was to prevent users from submitting a date greater than today's date. Interestingly, when I copied the same script to another HTML file, it worked perfectly fine. It seems like there is something specific to this particular HTML file that is causing the problem.

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

<head>
...
...
</body>

I am curious to investigate the reason behind the malfunction of the script in my HTML file. Your insights would be greatly appreciated.

Warm regards, Mark

javascript html css

Answer 1

Answer №1

It seems like you closed the tag incorrectly. Here is the correct format:

<!--Details-->
<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">Mobile Number:* </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>

Answer 2

It seems like you closed the tag incorrectly. Here is the correct format:

<!--Details-->
<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">Mobile Number:* </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>

The Date validation script in Javascript is malfunctioning

Answer №1

Similar questions

Is there a way to use the onclick event to open a link in the same window and tab?

Store the Ajax response in localStorage and convert it into an object for easy retrieval and manipulation

Dealing with reactive form controls using HTML select elements

Is there a way to showcase posts with a certain tag in a single column on my tumblr theme, while reserving the other column for posts aimed at the wider audience?

Swapping out video files with varying quality using HTML5 and Jquery

Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

Define the width of jqgrid

Using the ternary operator in various CSS rules

Learn how to automatically navigate to another page upon successfully creating an account and setting a value in the Firebase database

Will the rel attribute work in all web browsers and with all HTML tags?

populate form fields with database data using ajax

"Troubleshoot: jQuery UI accordion not functioning properly in response to

Facing issues with the forEach method in ReactJs when attempting to access data from an array

Error: Incompatibility - The variable is not functioning properly in node.js or express.js

Preventing automatic recompilation in Angular when there are changes in the assets folder

Is there a way to attach a CSS class to a BoundField in order to locate it using jQuery?

Modify the color of the background for a flex-wrap list

Angular ngx-translate not displaying image

Error: Undefined variable in JavaScript obfuscation

Error: The validation of a JSON request failed as schema.validate is not a recognized function